feat(a11y): Inline errors ReportUserView (#6426)

OtavioStasiak · web-flow · commit 88cb61683205 · 2025-07-24T11:13:44.000-03:00
* feat: custom error message

* feat announce of a11y error hook

* feat: custom error message

* chore: refactor useA11yErrorAnnouncement

* action: organized translations

* feat: custom error message

* action: organized translations

* chore: adjusted useA11yErrorAnnouncement to useDebounce

* remove usePrevious

* fix: remove cooments and renamed translation

---------

Co-authored-by: OtavioStasiak &lt;OtavioStasiak@users.noreply.github.com&gt;
diff --git a/app/i18n/locales/ar.json b/app/i18n/locales/ar.json
@@ -403,6 +403,7 @@
   "Read_Only": "قراءة فقط",
   "Read_only_hint": "يمكن لمالكي القنوات فقط إرسال رسائل جديدة",
   "Read_Receipt": "قراءة المستلم",
+  "Report_reason_required": "السبب مطلوب",
   "Receive_Group_Mentions": "تلقي إشارات المجموعة",
   "Receive_Group_Mentions_Info": "تلقي @all و @here للإشعارات",
   "Receive_Notification": "استلام الإشعار",
diff --git a/app/i18n/locales/bn-IN.json b/app/i18n/locales/bn-IN.json
@@ -578,6 +578,7 @@
   "Read_Only": "শুধুমাত্র পড়া",
   "Read_only_hint": "কেবল চ্যানেল মালিকরা নতুন বার্তা প্রেরণ করতে পারেন",
   "Read_Receipt": "পড়া স্বীকৃতি",
+  "Report_reason_required": "কারণ প্রয়োজন",
   "Receive_Group_Mentions": "গ্রুপ উল্লেখ প্রাপ্ত করুন",
   "Receive_Group_Mentions_Info": "@all এবং @here উল্লেখ প্রাপ্ত করুন",
   "Receive_Notification": "বিজ্ঞপ্তি প্রাপ্ত করুন",
diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json
@@ -620,6 +620,7 @@
   "Read_Only": "Pouze ke čtení",
   "Read_only_hint": "Pouze majitelé kanálů mohou odesílat nové zprávy",
   "Read_Receipt": "Potvrzení o přečtení",
+  "Report_reason_required": "Vyžadován důvod.",
   "Receive_Group_Mentions": "Přijímat zmínky o skupině",
   "Receive_Group_Mentions_Info": "Přijímat @všechny a @zde zmínky",
   "Receive_Notification": "Přijmout oznámení",
diff --git a/app/i18n/locales/de.json b/app/i18n/locales/de.json
@@ -565,6 +565,7 @@
   "Read_Only": "Schreibgeschützt",
   "Read_only_hint": "Nur Kanalbesitzer können neue Nachrichten senden",
   "Read_Receipt": "Lesebestätigung",
+  "Report_reason_required": "Grund erforderlich",
   "Receive_Group_Mentions": "Gruppen-Benachrichtigungen erhalten",
   "Receive_Group_Mentions_Info": "@all- und @here-Erwähnungen empfangen",
   "Receive_Notification": "Benachrichtigungen erhalten",
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
@@ -644,6 +644,7 @@
   "Read_Only": "Read only",
   "Read_only_hint": "Only channel owners can send new messages",
   "Read_Receipt": "Read receipt",
+  "Report_reason_required": "Reason required",
   "Receive_Group_Mentions": "Receive group mentions",
   "Receive_Group_Mentions_Info": "Receive @all and @here mentions",
   "Receive_Notification": "Receive notification",
diff --git a/app/i18n/locales/es.json b/app/i18n/locales/es.json
@@ -272,6 +272,7 @@
   "Read_Only": "Sólo lectura ",
   "Read_only_hint": "Solo los propietarios de canales pueden enviar nuevos mensajes",
   "Read_Receipt": "Comprobante de lectura",
+  "Report_reason_required": "Motivo requerido",
   "Receive_Group_Mentions": "Recibir menciones de grupo",
   "Receive_Group_Mentions_Info": "Recibir menciones @all y @here",
   "Receive_Notification": "Recibir notificación",
diff --git a/app/i18n/locales/fi.json b/app/i18n/locales/fi.json
@@ -540,6 +540,7 @@
   "Read_Only": "Vain luku",
   "Read_only_hint": "Vain kanavanomistajat voivat lähettää uusia viestejä",
   "Read_Receipt": "Lukukuittaus",
+  "Report_reason_required": "Vaaditaan syy",
   "Receive_Group_Mentions": "Vastaanota ryhmämainintoja",
   "Receive_Group_Mentions_Info": "Vastaanota @all- ja @here-maininnat",
   "Receive_Notification": "Vastaanota ilmoitus",
diff --git a/app/i18n/locales/fr.json b/app/i18n/locales/fr.json
@@ -500,6 +500,7 @@
   "Read_Only": "Lecture seule",
   "Read_only_hint": "Seuls les propriétaires de canaux peuvent envoyer de nouveaux messages",
   "Read_Receipt": "Accusé de réception",
+  "Report_reason_required": "Raison requise",
   "Receive_Group_Mentions": "Recevoir des mentions de groupe",
   "Receive_Group_Mentions_Info": "Recevoir des mentions @all et @here",
   "Receive_Notification": "Recevoir une notification",
diff --git a/app/i18n/locales/hi-IN.json b/app/i18n/locales/hi-IN.json
@@ -578,6 +578,7 @@
   "Read_Only": "केवल पठन",
   "Read_only_hint": "केवल चैनल के मालिक केवल नए संदेश भेज सकते हैं",
   "Read_Receipt": "पठन प्राप्ति",
+  "Report_reason_required": "कारण आवश्यक है।",
   "Receive_Group_Mentions": "समूह उल्लेख प्राप्त करें",
   "Receive_Group_Mentions_Info": "@all और @here उल्लेख प्राप्त करें",
   "Receive_Notification": "सूचना प्राप्त करें",
diff --git a/app/i18n/locales/hu.json b/app/i18n/locales/hu.json
@@ -579,6 +579,7 @@
   "Read_Only": "Csak olvasható",
   "Read_only_hint": "Csak a csatornatulajdonosok küldhetnek új üzeneteket",
   "Read_Receipt": "Olvassa el a nyugtát",
+  "Report_reason_required": "Indoklás szükséges",
   "Receive_Group_Mentions": "Csoportos említések fogadása",
   "Receive_Group_Mentions_Info": "Az @all és @here említések fogadása",
   "Receive_Notification": "Értesítés fogadása",
diff --git a/app/i18n/locales/it.json b/app/i18n/locales/it.json
@@ -438,6 +438,7 @@
   "Read_Only": "Sola lettura",
   "Read_only_hint": "Solo i proprietari di canali possono inviare nuovi messaggi",
   "Read_Receipt": "Conferma di lettura",
+  "Report_reason_required": "Motivo richiesto",
   "Receive_Group_Mentions": "Ricevi menzioni di gruppo",
   "Receive_Group_Mentions_Info": "Ricevi menzioni @all e @here",
   "Receive_Notification": "Ricevi notifiche",
diff --git a/app/i18n/locales/ja.json b/app/i18n/locales/ja.json
@@ -357,6 +357,7 @@
   "Read_Only": "読み取り専用",
   "Read_only_hint": "チャネル所有者のみが新しいメッセージを送信できます",
   "Read_Receipt": "レシートを見る",
+  "Report_reason_required": "理由が必要です",
   "Receive_Group_Mentions": "グループの通知を受け取る",
   "Receive_Group_Mentions_Info": "@all と @here の通知を受け取る",
   "Receive_Notification": "通知を受け取る",
diff --git a/app/i18n/locales/nl.json b/app/i18n/locales/nl.json
@@ -500,6 +500,7 @@
   "Read_Only": "Alleen lezen",
   "Read_only_hint": "Alleen kanaaleigenaren kunnen nieuwe berichten verzenden",
   "Read_Receipt": "Leesbevestiging",
+  "Report_reason_required": "Reden vereist",
   "Receive_Group_Mentions": "Groepsvermeldingen ontvangen",
   "Receive_Group_Mentions_Info": "Ontvang @all en @here vermeldingen",
   "Receive_Notification": "Notificatie ontvangen",
diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json
@@ -631,6 +631,7 @@
   "Read_Only": "Somente leitura",
   "Read_only_hint": "Somente os proprietários do canal podem enviar novas mensagens",
   "Read_Receipt": "Lida por",
+  "Report_reason_required": "Motivo necessário",
   "Receive_Group_Mentions": "Receber menções de grupo",
   "Receive_Group_Mentions_Info": "Receber menções @all e @here",
   "Receive_Notification": "Receber notificação",
diff --git a/app/i18n/locales/pt-PT.json b/app/i18n/locales/pt-PT.json
@@ -375,6 +375,7 @@
   "Read_Only": "Só de Leitura",
   "Read_only_hint": "Somente os proprietários do canal podem enviar novas mensagens",
   "Read_Receipt": "Recibos de leitura",
+  "Report_reason_required": "Motivo obrigatório",
   "Recently_used": "Recentemente usado",
   "Record_audio_message": "Gravar mensagem de áudio",
   "Register": "Registar",
diff --git a/app/i18n/locales/ru.json b/app/i18n/locales/ru.json
@@ -530,6 +530,7 @@
   "Read_Only": "Только для чтения",
   "Read_only_hint": "Только владельцы каналов могут отправлять новые сообщения",
   "Read_Receipt": "Уведомление о прочтении",
+  "Report_reason_required": "Требуется причина",
   "Receive_Group_Mentions": "Получать групповые уведомления",
   "Receive_Group_Mentions_Info": "Получать @all и @here уведомления",
   "Receive_Notification": "Получать уведомления",
diff --git a/app/i18n/locales/sl-SI.json b/app/i18n/locales/sl-SI.json
@@ -512,6 +512,7 @@
   "Read_Only": "Le branje",
   "Read_only_hint": "Samo lastniki kanalov lahko pošljejo nova sporočila",
   "Read_Receipt": "Preberite potrdilo",
+  "Report_reason_required": "Zahtevan razlog",
   "Receive_Group_Mentions": "Prejemajte omembe skupine",
   "Receive_Group_Mentions_Info": "Prejemate @all in @Here omembe",
   "Receive_Notification": "Prejemanje obvestila",
diff --git a/app/i18n/locales/sv.json b/app/i18n/locales/sv.json
@@ -539,6 +539,7 @@
   "Read_Only": "Skrivskyddat",
   "Read_only_hint": "Endast kanalägare kan skicka nya meddelanden",
   "Read_Receipt": "Läskvitto",
+  "Report_reason_required": "Anledning krävs",
   "Receive_Group_Mentions": "Ta emot gruppomnämnanden",
   "Receive_Group_Mentions_Info": "Ta emot omnämnanden av typen @all och @here",
   "Receive_Notification": "Ta emot meddelanden",
diff --git a/app/i18n/locales/ta-IN.json b/app/i18n/locales/ta-IN.json
@@ -578,6 +578,7 @@
   "Read_Only": "மட்டுமே படிக்க முடியும்",
   "Read_only_hint": "சேனல் உரிமையாளர்கள் மட்டுமே புதிய செய்திகளை அனுப்ப முடியும்",
   "Read_Receipt": "படித்த ரசீது",
+  "Report_reason_required": "காரணம் தேவை.",
   "Receive_Group_Mentions": "குழு குறிப்புகளைப் பெறு",
   "Receive_Group_Mentions_Info": "@all மற்றும் @here குறிப்புகளைப் பெறு",
   "Receive_Notification": "அறிவிப்பு பெறு",
diff --git a/app/i18n/locales/te-IN.json b/app/i18n/locales/te-IN.json
@@ -577,6 +577,7 @@
   "Read_Only": "కేవలం చదవడానికి",
   "Read_only_hint": "ఛానెల్ యజమానులు మాత్రమే క్రొత్త సందేశాలను పంపగలరు",
   "Read_Receipt": "చదవడానికి సాక్షాత్కారం",
+  "Report_reason_required": "कारण आवश्यक है।",
   "Receive_Group_Mentions": "గ్రూప్ స్మరణలు స్వీకరించు",
   "Receive_Group_Mentions_Info": "@all మరియు @here స్మరణలు స్వీకరించు",
   "Receive_Notification": "నోటిఫికేషన్ స్వీకరించండి",
diff --git a/app/i18n/locales/tr.json b/app/i18n/locales/tr.json
@@ -421,6 +421,7 @@
   "Read_Only": "Yazma Kısıtlı",
   "Read_only_hint": "Yalnızca kanal sahipleri yeni mesajlar gönderebilir",
   "Read_Receipt": "Okundu Bilgisi",
+  "Report_reason_required": "Gerekçesi gerekiyor",
   "Receive_Group_Mentions": "Grup Bahsetmelerini Al",
   "Receive_Group_Mentions_Info": "Grup bahsetmelerini al",
   "Receive_Notification": "Bildirim Al",
diff --git a/app/i18n/locales/zh-CN.json b/app/i18n/locales/zh-CN.json
@@ -404,6 +404,7 @@
   "Read_Only": "只读",
   "Read_only_hint": "只有频道所有者可以发送新消息",
   "Read_Receipt": "查看已读人员",
+  "Report_reason_required": "原因必填",
   "Receive_Group_Mentions": "接收群组提及",
   "Receive_Group_Mentions_Info": "接收@all和@here提及",
   "Receive_Notification": "接收通知",
diff --git a/app/i18n/locales/zh-TW.json b/app/i18n/locales/zh-TW.json
@@ -421,6 +421,7 @@
   "Read_Only": "唯讀",
   "Read_only_hint": "只有頻道所有者可以發送新消息",
   "Read_Receipt": "查看已讀人員",
+  "Report_reason_required": "需要原因",
   "Receive_Group_Mentions": "接收群組提及",
   "Receive_Group_Mentions_Info": "接收@all和@here提及",
   "Receive_Notification": "接收通知",
diff --git a/app/lib/hooks/useA11yErrorAnnouncement.tsx b/app/lib/hooks/useA11yErrorAnnouncement.tsx
@@ -0,0 +1,31 @@
+import { useRef } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import { useDebounce } from '../methods/helpers';
+import { textInputDebounceTime } from '../constants';
+
+interface IUseA11yErrorAnnouncement {
+	error: string | undefined;
+}
+
+const useA11yErrorAnnouncement = ({ error }: IUseA11yErrorAnnouncement) => {
+	const previousMessage = useRef<string>(error);
+	const announced = useRef<boolean>(false);
+	const shouldAnnounce = error && error !== previousMessage.current && !announced.current;
+
+	const handleA11yAnnouncement = useDebounce(() => {
+		if (shouldAnnounce) {
+			const message = (error || '').trim();
+			if (message) {
+				AccessibilityInfo.announceForAccessibility(message);
+				announced.current = true;
+			}
+		} else if (!error) {
+			announced.current = false;
+		}
+	}, textInputDebounceTime);
+
+	handleA11yAnnouncement();
+};
+
+export default useA11yErrorAnnouncement;
diff --git a/app/views/ReportUserView/index.tsx b/app/views/ReportUserView/index.tsx
@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
+import useA11yErrorAnnouncement from '../../lib/hooks/useA11yErrorAnnouncement';
 import log from '../../lib/methods/helpers/log';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { ChatsStackParamList } from '../../stacks/types';
@@ -34,23 +35,28 @@ interface ISubmit {
 }
 
 const schema = yup.object().shape({
-	description: yup.string().trim().required()
+	description: yup.string().trim().required(I18n.t('Report_reason_required'))
 });
 
 const ReportUserView = () => {
 	const [loading, setLoading] = useState(false);
 	const navigation = useNavigation<TReportUserViewNavigationProp>();
 	const { isMasterDetail } = useAppSelector(state => ({ isMasterDetail: state.app.isMasterDetail }));
-
 	const {
 		params: { username, userId, name }
 	} = useRoute<TReportUserViewRouteProp>();
 
 	const {
 		control,
 		handleSubmit,
-		formState: { isValid }
-	} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema), defaultValues: { description: '' } });
+		formState: { errors }
+	} = useForm<ISubmit>({
+		mode: 'onChange',
+		resolver: yupResolver(schema),
+		defaultValues: { description: '' }
+	});
+
+	useA11yErrorAnnouncement({ error: errors.description?.message });
 
 	useLayoutEffect(() => {
 		navigation?.setOptions({
@@ -85,6 +91,7 @@ const ReportUserView = () => {
 						name='description'
 						control={control}
 						label={I18n.t('Why_do_you_want_to_report')}
+						error={errors.description?.message}
 						multiline
 						inputStyle={styles.textInput}
 						testID='report-user-view-input'
@@ -93,7 +100,6 @@ const ReportUserView = () => {
 					<Button
 						title={I18n.t('Report')}
 						type='primary'
-						disabled={!isValid}
 						onPress={handleSubmit(submit)}
 						testID='report-user-view-submit'
 						loading={loading}
