feat(a11y): inline errors StatusView (#6348)

OtavioStasiak · web-flow · commit 0bdaeec274bb · 2025-08-06T18:56:45.000-03:00
* feat: formTextInput update

* feat: added inline errors on status view

* feat: announce accessibility error

* fix: color text input

* chore: code improvements

* action: organized translations

* fix: useA11yErrorAnnouncement props

* fix: translation

* fix: e2e tests

---------

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
@@ -510,6 +510,7 @@
   "Started_call": "أجرى الاتصال {{userBy}}",
   "Started_discussion": "بدأ النقاش",
   "Status_saved_successfully": "تم حفظ الحالة بنجاح!",
+  "Status_text_limit_exceeded": "تم تجاوز الحد المسموح به لعدد الأحرف",
   "Symbols": "رموز",
   "Table": "جدول",
   "Tags": "العلامات",
diff --git a/app/i18n/locales/bn-IN.json b/app/i18n/locales/bn-IN.json
@@ -717,6 +717,7 @@
   "Started_call": "{{userBy}} এর দ্বারা কল শুরু হয়েছে",
   "Started_discussion": "একটি আলোচনা শুরু হয়েছে:",
   "Status_saved_successfully": "স্থিতি সফলভাবে সংরক্ষণ করা হয়েছে!",
+  "Status_text_limit_exceeded": "{{সীমানা}} অক্ষরের সীমা অতিক্রান্ত হয়েছে।",
   "Supported_versions_expired_description": "একটি প্রশাসককে ওয়ার্কস্পেসটি মোবাইল এবং ডেস্কটপ অ্যাপ থেকে পুনরায় প্রবেশ সক্ষম করার জন্য ওয়ার্কস্পেসটি আপডেট করতে হবে।",
   "Supported_versions_expired_title": "{{workspace_name}} একটি অসমর্থিত সংস্করণে Rocket.Chat চালাচ্ছে",
   "Supported_versions_warning_update_required": "আপডেট প্রয়োজন",
diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json
@@ -776,6 +776,7 @@
   "Started_call": "Hovor zahájil {{userBy}}",
   "Started_discussion": "Zahájena diskuse:",
   "Status_saved_successfully": "Stav úspěšně uložen!",
+  "Status_text_limit_exceeded": "{{limit}} překročil limit znaků",
   "Strikethrough": "Přeškrtnout",
   "Supported_versions_expired_description": "Správce potřebuje aktualizovat pracovní prostor na podporovanou verzi, aby mohl znovu povolit přístup z mobilních a desktopových aplikací.",
   "Supported_versions_expired_title": "{{workspace_name}} používá nepodporovanou verzi Rocket.Chat",
diff --git a/app/i18n/locales/de.json b/app/i18n/locales/de.json
@@ -713,6 +713,7 @@
   "Started_call": "Anruf gestartet von {{userBy}}",
   "Started_discussion": "Hat eine Diskussion gestartet:",
   "Status_saved_successfully": "Status erfolgreich gesetzt!",
+  "Status_text_limit_exceeded": "Zeichenanzahl überschritten",
   "Symbols": "Symbole",
   "Table": "Tabelle",
   "Tags": "Tags",
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
@@ -806,6 +806,7 @@
   "Started_call": "Call started by {{userBy}}",
   "Started_discussion": "Started a discussion:",
   "Status_saved_successfully": "Status saved successfully!",
+  "Status_text_limit_exceeded": "{{limit}} character limit exceeded",
   "Strikethrough": "Strikethrough",
   "Supported_versions_expired_description": "An admin needs to update the workspace to a supported version in order to reenable access from mobile and desktop apps.",
   "Supported_versions_expired_title": "{{workspace_name}} is running an unsupported version of Rocket.Chat",
diff --git a/app/i18n/locales/es.json b/app/i18n/locales/es.json
@@ -351,6 +351,7 @@
   "Starred": "Destacado",
   "Started_call": "Llamada iniciada por {{userBy}}",
   "Started_discussion": "Comenzar una conversación:",
+  "Status_text_limit_exceeded": "{{límite}} límite de caracteres excedido",
   "Symbols": "Símbolos",
   "Table": "Tabla",
   "Take_a_photo": "Enviar una foto",
diff --git a/app/i18n/locales/fi.json b/app/i18n/locales/fi.json
@@ -688,6 +688,7 @@
   "Started_call": "Puhelun aloitti {{userBy}}",
   "Started_discussion": "Aloitettiin keskustelu:",
   "Status_saved_successfully": "Tila on tallennettu!",
+  "Status_text_limit_exceeded": "{{rajoitus}} merkkiraja ylittyi",
   "Symbols": "Symbolit",
   "Table": "Taulukko",
   "Tags": "Tunnisteet",
diff --git a/app/i18n/locales/fr.json b/app/i18n/locales/fr.json
@@ -626,6 +626,7 @@
   "Started_call": "Appel lancé par {{userBy}}",
   "Started_discussion": "A commencé une discussion :",
   "Status_saved_successfully": "Statut enregistré avec succès !",
+  "Status_text_limit_exceeded": "limite de caractères dépassée",
   "Symbols": "Symboles",
   "Table": "Tableau",
   "Tags": "Mots clés",
diff --git a/app/i18n/locales/hi-IN.json b/app/i18n/locales/hi-IN.json
@@ -717,6 +717,7 @@
   "Started_call": "{{userBy}} द्वारा शुरू की गई कॉल",
   "Started_discussion": "एक चर्चा शुरू की गई:",
   "Status_saved_successfully": "स्थिति सफलतापूर्वक सहेजी गई!",
+  "Status_text_limit_exceeded": "अक्षर सीमा पार हुई",
   "Supported_versions_expired_description": "एक प्रबंधक को मोबाइल और डेस्कटॉप ऐप्स से पहुँच को पुनः सक्षम करने के लिए कार्यक्षेत्र को समर्थित संस्करण पर अपडेट करना होगा।",
   "Supported_versions_expired_title": "{{workspace_name}} एक असमर्थित संस्करण पर चल रहा है रॉकेट.चैट का",
   "Supported_versions_warning_update_required": "अपडेट की आवश्यकता है",
diff --git a/app/i18n/locales/hu.json b/app/i18n/locales/hu.json
@@ -718,6 +718,7 @@
   "Started_call": "A hívást indította {{userBy}}",
   "Started_discussion": "Elindított beszélgetés:",
   "Status_saved_successfully": "Állapot sikeresen mentve!",
+  "Status_text_limit_exceeded": "{{korlát}} karakterkorlát túllépve",
   "Supported_versions_expired_description": "Az adminisztrátornak frissítenie kell a munkaterületet egy támogatott verzióra ahhoz, hogy a mobil és asztali alkalmazásokból való hozzáférés újra elérhetővé váljon.",
   "Supported_versions_expired_title": "{{workspace_name}} a Rocket.Chat nem támogatott verzióját futtatja",
   "Supported_versions_warning_update_required": "Frissítés szükséges",
diff --git a/app/i18n/locales/it.json b/app/i18n/locales/it.json
@@ -543,6 +543,7 @@
   "Started_call": "Chiamata iniziata da {{userBy}}",
   "Started_discussion": "Discussione iniziata:",
   "Status_saved_successfully": "Stato salvato correttamente!",
+  "Status_text_limit_exceeded": "Limite di caratteri {{limit}} superato",
   "Symbols": "Simboli",
   "Table": "Tabella",
   "Tags": "Tag",
diff --git a/app/i18n/locales/ja.json b/app/i18n/locales/ja.json
@@ -446,6 +446,7 @@
   "Starred": "お気に入りされています",
   "Started_call": "{{userBy}}と通話する",
   "Started_discussion": "ディスカッションを開始する:",
+  "Status_text_limit_exceeded": "{{限界}} 文字数制限を超えました。",
   "Symbols": "シンボルズ",
   "Table": "表",
   "Take_a_photo": "写真を撮影",
diff --git a/app/i18n/locales/nl.json b/app/i18n/locales/nl.json
@@ -626,6 +626,7 @@
   "Started_call": "Oproep gestart door {{userBy}}",
   "Started_discussion": "Begin van een discussie:",
   "Status_saved_successfully": "Status succesvol opgeslagen!",
+  "Status_text_limit_exceeded": "{{limiet}} tekenlimiet overschreden",
   "Symbols": "Symbolen",
   "Table": "Tabel",
   "Tags": "Tags",
diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json
@@ -786,6 +786,7 @@
   "Started_call": "Chamada iniciada por {{userBy}}",
   "Started_discussion": "Iniciou uma discussão:",
   "Status_saved_successfully": "Status salvo com sucesso!",
+  "Status_text_limit_exceeded": "Limite de {{limit}} caracteres excedido.",
   "Supported_versions_expired_description": "Um administrador precisa atualizar o espaço de trabalho para uma versão suportada a fim de reabilitar o acesso a partir de aplicativos móveis e de desktop.",
   "Supported_versions_expired_title": "{{workspace_name}} está executando uma versão não suportada do Rocket.Chat",
   "Supported_versions_warning_update_required": "Atualização necessária",
diff --git a/app/i18n/locales/pt-PT.json b/app/i18n/locales/pt-PT.json
@@ -433,6 +433,7 @@
   "Smileys_and_people": "Smileys e pessoas",
   "Star": "Dar estrela",
   "Starred": "Deu uma estrela",
+  "Status_text_limit_exceeded": "limite de caracteres {{limit}} ultrapassado",
   "Symbols": "Símbolos",
   "Take_a_photo": "Tirar uma foto",
   "Terms_of_Service": " Termos do Serviço ",
diff --git a/app/i18n/locales/ru.json b/app/i18n/locales/ru.json
@@ -665,6 +665,7 @@
   "Started_call": "Звонок, начат {{userBy}}",
   "Started_discussion": "Началось обсуждение:",
   "Status_saved_successfully": "Статус установлен успешно!",
+  "Status_text_limit_exceeded": "Превышен предел в {{limit}} символов.",
   "Symbols": "Символы",
   "Table": "Таблица",
   "Tags": "Тэги",
diff --git a/app/i18n/locales/sl-SI.json b/app/i18n/locales/sl-SI.json
@@ -640,6 +640,7 @@
   "Started_call": "Klic, ki ga je začel {{userBy}}",
   "Started_discussion": "Začel razpravo:",
   "Status_saved_successfully": "Status je uspešno shranjen!",
+  "Status_text_limit_exceeded": "Dovoljena dolžina {{limit}} znakov je presežena.",
   "Symbols": "Simboli",
   "Table": "Miza",
   "Tags": "Oznake",
diff --git a/app/i18n/locales/sv.json b/app/i18n/locales/sv.json
@@ -687,6 +687,7 @@
   "Started_call": "Samtalet startades av {{userBy}}",
   "Started_discussion": "Startade en diskussion:",
   "Status_saved_successfully": "Statusen har sparats.",
+  "Status_text_limit_exceeded": "{{gräns}} teckengräns överskriden",
   "Symbols": "Symboler",
   "Table": "Tabell",
   "Tags": "Taggar",
diff --git a/app/i18n/locales/ta-IN.json b/app/i18n/locales/ta-IN.json
@@ -717,6 +717,7 @@
   "Started_call": "{{userBy}} இயக்கிய அழைப்பு",
   "Started_discussion": "ஒரு பேச்சை ஆரம்பித்தார்:",
   "Status_saved_successfully": "நிலை வெற்றியாக சேமிக்கப்பட்டது!",
+  "Status_text_limit_exceeded": "{{limit}} எழுத்துச் வரம்பை மீறிவிட்டது",
   "Supported_versions_expired_description": "ஒரு நிர்வாகி, கையேந்தி அழுக்கப்பட்ட பதிப்பை ஒரு ஆதரிக்கப்படுத்த மொழியை அப்டேட் செய்ய வேண்டும்.",
   "Supported_versions_expired_title": "{{workspace_name}} ஒரு ஆதரிக்கப்படாத Rocket.Chat பதிப்புயிராக இயங்குகிறது",
   "Supported_versions_warning_update_required": "புதுப்பிக்கல் தேவை",
diff --git a/app/i18n/locales/te-IN.json b/app/i18n/locales/te-IN.json
@@ -716,6 +716,7 @@
   "Started_call": "{{userBy}} ద్వారా కాల్ ప్రారంభించబడింది",
   "Started_discussion": "ఒక చర్చను ప్రారంభించారు:",
   "Status_saved_successfully": "స్థితి విజయవంతంగా భద్రపరచబడింది!",
+  "Status_text_limit_exceeded": "{{सीमा}} अक्षर की सीमा पार हो गई",
   "Supported_versions_expired_description": "వార్క్‌స్పేస్ యాడ్మిన్ మొదటిగా మొబైల్ మరియు డెస్క్టాప్ యాప్‌ల నుండి ప్రవేశాన్ని మళ్లీ ప్రారంభించడానికి వార్క్‌స్పేస్‌ను నవీకరించాలి.",
   "Supported_versions_expired_title": "{{workspace_name}} అసమర్థిత రాకెట్.చాట్ ఒరిజినల్ వెర్షన్‌ను పరిచయించిపోయింది",
   "Supported_versions_warning_update_required": "నవీకరణ అవసరం",
diff --git a/app/i18n/locales/tr.json b/app/i18n/locales/tr.json
@@ -526,6 +526,7 @@
   "Started_call": "Arama {{userBy}} tarafından başlatıldı",
   "Started_discussion": "Bir tartışma başlattı:",
   "Status_saved_successfully": "Durum başarıyla kaydedildi!",
+  "Status_text_limit_exceeded": "{{limit}} karakter sınırı aşıldı",
   "Symbols": "Semboller",
   "Table": "Tablo",
   "Tags": "Etiketler",
diff --git a/app/i18n/locales/zh-CN.json b/app/i18n/locales/zh-CN.json
@@ -499,6 +499,7 @@
   "Started_call": "{{userBy}} 开始的通话",
   "Started_discussion": "已开始的讨论",
   "Status_saved_successfully": "状态储存成功",
+  "Status_text_limit_exceeded": "字符限制超出",
   "Symbols": "符号",
   "Table": "表格",
   "Tags": "标签",
diff --git a/app/i18n/locales/zh-TW.json b/app/i18n/locales/zh-TW.json
@@ -527,6 +527,7 @@
   "Started_call": "{{userBy}} 開始的通話",
   "Started_discussion": "已開始的討論",
   "Status_saved_successfully": "狀態儲存成功",
+  "Status_text_limit_exceeded": "{{limit}} 字元限制已超出",
   "Symbols": "符號",
   "Table": "表格",
   "Tags": "標籤",
diff --git a/app/lib/constants/maxLength.ts b/app/lib/constants/maxLength.ts
@@ -0,0 +1,2 @@
+// https://github.com/RocketChat/Rocket.Chat/blob/b2fad333d3d7a9b7404e166b83b57c1b95eeb2ed/apps/meteor/client/lib/constants.ts#L1
+export const USER_STATUS_TEXT_MAX_LENGTH = 120;
diff --git a/app/views/StatusView/index.tsx b/app/views/StatusView/index.tsx
@@ -1,15 +1,19 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
+import useA11yErrorAnnouncement from '../../lib/hooks/useA11yErrorAnnouncement';
 import { setUser } from '../../actions/login';
 import * as HeaderButton from '../../containers/Header/components/HeaderButton';
 import * as List from '../../containers/List';
 import { sendLoadingEvent } from '../../containers/Loading';
 import SafeAreaView from '../../containers/SafeAreaView';
 import StatusIcon from '../../containers/Status/Status';
-import { FormTextInput } from '../../containers/TextInput';
+import { ControlledFormTextInput } from '../../containers/TextInput';
 import { IApplicationState, TUserStatus } from '../../definitions';
 import I18n from '../../i18n';
 import { showToast } from '../../lib/methods/helpers/showToast';
@@ -20,6 +24,7 @@ import log, { events, logEvent } from '../../lib/methods/helpers/log';
 import { useTheme } from '../../theme';
 import Button from '../../containers/Button';
 import Check from '../../containers/Check';
+import { USER_STATUS_TEXT_MAX_LENGTH } from '../../lib/constants/maxLength';
 
 interface IStatus {
 	id: TUserStatus;
@@ -94,27 +99,47 @@ const Status = ({
 };
 
 const StatusView = (): React.ReactElement => {
+	const validationSchema = yup.object().shape({
+		statusText: yup
+			.string()
+			.max(USER_STATUS_TEXT_MAX_LENGTH, I18n.t('Status_text_limit_exceeded', { limit: USER_STATUS_TEXT_MAX_LENGTH }))
+	});
+
 	const user = useSelector((state: IApplicationState) => getUserSelector(state));
 	const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
 	const Accounts_AllowInvisibleStatusOption = useSelector(
 		(state: IApplicationState) => state.settings.Accounts_AllowInvisibleStatusOption
 	);
 
-	const [statusText, setStatusText] = useState(user.statusText || '');
-	const [status, setStatus] = useState(user.status);
+	const {
+		control,
+		watch,
+		setValue,
+		formState: { errors, isValid }
+	} = useForm({
+		mode: 'onChange',
+		defaultValues: { statusText: user.statusText || '', status: user.status },
+
+		resolver: yupResolver(validationSchema)
+	});
+	const inputValues = watch();
+	const { statusText } = inputValues;
 
 	const dispatch = useDispatch();
 	const { setOptions, goBack } = useNavigation();
 	const { colors } = useTheme();
 
 	const submit = async () => {
+		const { status } = inputValues;
 		logEvent(events.STATUS_DONE);
 		if (statusText !== user.statusText || status !== user.status) {
 			await setCustomStatus(status, statusText);
 		}
 		goBack();
 	};
 
+	useA11yErrorAnnouncement({ errors, inputValues });
+
 	useEffect(() => {
 		const setHeader = () => {
 			setOptions({
@@ -123,7 +148,11 @@ const StatusView = (): React.ReactElement => {
 			});
 		};
 		setHeader();
-	}, [statusText, status]);
+	}, [isMasterDetail]);
+
+	const setStatus = (updatedStatus: TUserStatus) => {
+		setValue('status', updatedStatus);
+	};
 
 	const setCustomStatus = async (status: TUserStatus, statusText: string) => {
 		sendLoadingEvent({ visible: true });
@@ -146,16 +175,19 @@ const StatusView = (): React.ReactElement => {
 
 	const statusType = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline');
 
-	const isStatusMatching = () => {
+	const isStatusChanged = () => {
+		const { status } = inputValues;
+		if (!isValid) {
+			return true;
+		}
 		const isStatusEqual = status === user.status;
-		const isStatusTextEqual = (!!user.statusText && user.statusText === statusText) || (!user.statusText && !statusText);
-
-		return isStatusEqual && isStatusTextEqual;
+		const isStatusTextEqual = (!!user.statusText && user.statusText === statusText) ?? (!user.statusText && !statusText);
+		return !isValid && isStatusEqual && isStatusTextEqual;
 	};
 
 	const FooterComponent = () => (
 		<View style={styles.footerComponent}>
-			<Button testID='status-view-submit' disabled={isStatusMatching()} onPress={submit} title={I18n.t('Save')} />
+			<Button testID='status-view-submit' disabled={isStatusChanged()} onPress={submit} title={I18n.t('Save')} />
 		</View>
 	);
 
@@ -164,16 +196,18 @@ const StatusView = (): React.ReactElement => {
 			<FlatList
 				data={statusType}
 				keyExtractor={item => item.id}
-				renderItem={({ item }) => <Status statusType={item} status={status} setStatus={setStatus} />}
+				renderItem={({ item }) => <Status statusType={item} status={inputValues.status} setStatus={setStatus} />}
 				ListHeaderComponent={
 					<>
-						<FormTextInput
+						<ControlledFormTextInput
+							name='statusText'
+							control={control}
 							label={I18n.t('Message')}
 							value={statusText}
 							containerStyle={styles.inputContainer}
-							onChangeText={text => setStatusText(text)}
 							inputStyle={styles.inputStyle}
 							testID='status-view-input'
+							error={errors.statusText?.message}
 						/>
 						<List.Separator />
 					</>
