feat(a11y): inline errors RoomInfoEditView (#6486)

OtavioStasiak · web-flow · commit 064e3aa25e74 · 2025-08-20T19:49:45.000-03:00
* chore: started migration to hooks

* chore: useSubscription and react-hook-form

* chore: useDeleteTeamOrRoom

* fix: subscription unomount

* chore: code improvements

* rename hook

* chore: format code with Prettier [skip ci]

* rename hook

* fix: usePermissions

* fix: usePermissions

* remove unnecessary reactivity from loadRoom

* fix: random value changing value on every render

* fix: e2e tests

* fix: use getSubscriptionByRoomId insetad of db.get.find

* chore: remove unused comment

* fix: use getSubscriptionByRoomId and room as state instead of ref

* fix: randomValue

* fix: form using only useForm

* feat: new i18n translation

* feat: inline errors and a11y announcement

* action: organized translations

---------

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
@@ -70,6 +70,7 @@
   "changing_avatar": "تغيير الصورة الرمزية",
   "Channel_hint_private": "لا يمكن للناس الانضمام إلا من خلال دعوتهم",
   "Channel_Name": "اسم القناة",
+  "Channel_name_already_taken": "اسم القناة مأخوذ بالفعل",
   "Channel_name_required": "اسم القناة مطلوب",
   "Channel_Read_Only_Hint": "يمكن لمالكي القنوات فقط إرسال رسائل جديدة",
   "Channels": "قنوات",
diff --git a/app/i18n/locales/bn-IN.json b/app/i18n/locales/bn-IN.json
@@ -115,6 +115,7 @@
   "Channel_hint_private": "মানুষ কেবল আমন্ত্রণের মাধ্যমে যোগ দিতে পারে",
   "Channel_hint_public": "সবাই এই চ্যানেলে অ্যাক্সেস পাবে",
   "Channel_Name": "চ্যানেল নাম",
+  "Channel_name_already_taken": "চ্যানেল নাম ইতিমধ্যেই নেওয়া হয়েছে।",
   "Channel_name_required": "চ্যানেলের নাম প্রয়োজন",
   "Channel_Read_Only_Hint": "শুধুমাত্র চ্যানেলের মালিকরা নতুন বার্তা পাঠাতে পারেন",
   "Channels": "চ্যানেলগুলি",
diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json
@@ -121,6 +121,7 @@
   "Channel_hint_private": "Lidé se mohou připojit pouze tím, že byli pozváni",
   "Channel_hint_public": "K tomuto kanálu má přístup každý",
   "Channel_Name": "Název kanálu",
+  "Channel_name_already_taken": "Název kanálu je již zabraný.",
   "Channel_name_required": "Název kanálu je vyžadován.",
   "Channel_Read_Only_Hint": "Pouze majitelé kanálů mohou odesílat nové zprávy",
   "Channels": "Kanály",
diff --git a/app/i18n/locales/de.json b/app/i18n/locales/de.json
@@ -110,6 +110,7 @@
   "Channel_hint_private": "Menschen können nur dann durch eingeladen werden",
   "Channel_hint_public": "Jeder kann auf diesen Kanal zugreifen",
   "Channel_Name": "Channel-Name",
+  "Channel_name_already_taken": "Kanalname bereits vergeben",
   "Channel_name_required": "Kanalname erforderlich",
   "Channel_Read_Only_Hint": "Nur Kanalbesitzer können neue Nachrichten senden",
   "Channels": "Channels",
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
@@ -122,6 +122,7 @@
   "Channel_hint_private": "People can only join by being invited",
   "Channel_hint_public": "Everyone can access this channel",
   "Channel_Name": "Channel name",
+  "Channel_name_already_taken": "Channel name already taken",
   "Channel_name_required": "Channel name required",
   "Channel_Read_Only_Hint": "Only channel owners can send new messages",
   "Channels": "Channels",
diff --git a/app/i18n/locales/es.json b/app/i18n/locales/es.json
@@ -64,6 +64,7 @@
   "changing_avatar": "cambiando avatar",
   "Channel_hint_private": "La gente solo puede unirse al ser invitado",
   "Channel_Name": "Nombre sala",
+  "Channel_name_already_taken": "Nombre de canal ya está en uso.",
   "Channel_name_required": "Nombre del canal requerido",
   "Channel_Read_Only_Hint": "Solo los propietarios de canales pueden enviar nuevos mensajes",
   "Channels": "Salas",
diff --git a/app/i18n/locales/fi.json b/app/i18n/locales/fi.json
@@ -100,6 +100,7 @@
   "Channel_hint_private": "Ihmiset voivat liittyä vain kutsumalla",
   "Channel_hint_public": "Kaikilla on pääsy tälle kanavalle",
   "Channel_Name": "Kanavan nimi",
+  "Channel_name_already_taken": "Kanavan nimi on jo varattu.",
   "Channel_name_required": "Kanavan nimi vaaditaan",
   "Channel_Read_Only_Hint": "Vain kanavanomistajat voivat lähettää uusia viestejä",
   "Channels": "Kanavat",
diff --git a/app/i18n/locales/fr.json b/app/i18n/locales/fr.json
@@ -79,6 +79,7 @@
   "changing_avatar": "changer d'avatar",
   "Channel_hint_private": "Les gens ne peuvent se joindre qu'en étant invité",
   "Channel_Name": "Nom du canal",
+  "Channel_name_already_taken": "Nom de chaîne déjà pris",
   "Channel_name_required": "Nom de la chaîne requis",
   "Channel_Read_Only_Hint": "Seuls les propriétaires de canaux peuvent envoyer de nouveaux messages",
   "Channels": "Canaux",
diff --git a/app/i18n/locales/hi-IN.json b/app/i18n/locales/hi-IN.json
@@ -115,6 +115,7 @@
   "Channel_hint_private": "लोग केवल आमंत्रित किए जाने पर ही जुड़ सकते हैं",
   "Channel_hint_public": "हर कोई इस चैनल तक पहुँच सकता है",
   "Channel_Name": "चैनल का नाम",
+  "Channel_name_already_taken": "चैनल का नाम पहले से लिया जा चुका है।",
   "Channel_name_required": "चैनल का नाम आवश्यक है।",
   "Channel_Read_Only_Hint": "केवल चैनल के मालिक नए संदेश भेज सकते हैं",
   "Channels": "चैनल्स",
diff --git a/app/i18n/locales/hu.json b/app/i18n/locales/hu.json
@@ -115,6 +115,7 @@
   "Channel_hint_private": "Az emberek csak meghívással csatlakozhatnak",
   "Channel_hint_public": "Mindenki hozzáférhet ehhez a csatornához",
   "Channel_Name": "Csatorna neve",
+  "Channel_name_already_taken": "A csatorna neve már foglalt.",
   "Channel_name_required": "Csatornanév szükséges",
   "Channel_Read_Only_Hint": "Csak a csatornatulajdonosok küldhetnek új üzeneteket",
   "Channels": "Csatornák",
diff --git a/app/i18n/locales/it.json b/app/i18n/locales/it.json
@@ -75,6 +75,7 @@
   "changing_avatar": "cambio avatar",
   "Channel_hint_private": "Le persone possono unirsi solo essendo invitati",
   "Channel_Name": "Nome canale",
+  "Channel_name_already_taken": "Nome del canale già preso",
   "Channel_name_required": "Nome del canale richiesto",
   "Channel_Read_Only_Hint": "Solo i proprietari di canali possono inviare nuovi messaggi",
   "Channels": "Canali",
diff --git a/app/i18n/locales/ja.json b/app/i18n/locales/ja.json
@@ -69,6 +69,7 @@
   "changing_avatar": "アバターを変更",
   "Channel_hint_private": "人々は招待されることによってのみ参加することができます",
   "Channel_Name": "チャンネル名",
+  "Channel_name_already_taken": "チャンネル名は既に使用されています。",
   "Channel_name_required": "チャンネル名が必要です。",
   "Channel_Read_Only_Hint": "チャネル所有者のみが新しいメッセージを送信できます",
   "Channels": "チャンネル",
diff --git a/app/i18n/locales/nl.json b/app/i18n/locales/nl.json
@@ -79,6 +79,7 @@
   "changing_avatar": "avatar aan het veranderen",
   "Channel_hint_private": "Mensen kunnen alleen meedoen door uitgenodigd te worden",
   "Channel_Name": "Kanaal naam",
+  "Channel_name_already_taken": "Kanaalnaam al in gebruik",
   "Channel_name_required": "Kanaalnaam vereist",
   "Channel_Read_Only_Hint": "Alleen kanaaleigenaren kunnen nieuwe berichten verzenden",
   "Channels": "Kanalen",
diff --git a/app/i18n/locales/nn.json b/app/i18n/locales/nn.json
@@ -50,6 +50,7 @@
   "Channel_hint_not_read_only": "Alle brukere i kanalen kan skrive nye meldinger",
   "Channel_hint_private": "Folk kan bare bli med ved å bli invitert",
   "Channel_hint_public": "Alle kan få tilgang til denne kanalen",
+  "Channel_name_already_taken": "Kanalnamnet er allereie tatt",
   "Channels": "Totalt antall kanaler",
   "Chat_closed_by_agent": "Chat stengt av agent",
   "Chat_started": "Chat startet",
diff --git a/app/i18n/locales/no.json b/app/i18n/locales/no.json
@@ -114,6 +114,7 @@
   "Channel_hint_private": "Bare inviterte brukere har tilgang til denne kanalen",
   "Channel_hint_public": "Alle kan få tilgang til denne kanalen",
   "Channel_Name": "Kanalnavn",
+  "Channel_name_already_taken": "Navn på kanalen er allerede tatt",
   "Channel_Read_Only_Hint": "Bare kanaleiere kan sende nye meldinger",
   "Channels": "Kanaler",
   "Chat_closed_by_agent": "Chatten ble avsluttet av agenten",
diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json
@@ -120,6 +120,7 @@
   "Channel_hint_private": "As pessoas só podem entrar por meio de convite",
   "Channel_hint_public": "Todos podem acessar este canal",
   "Channel_Name": "Nome do canal",
+  "Channel_name_already_taken": "Nome do canal já está em uso.",
   "Channel_name_required": "Nome do canal necessário",
   "Channel_Read_Only_Hint": "Apenas os proprietários do canal podem enviar novas mensagens",
   "Channels": "Canais",
diff --git a/app/i18n/locales/pt-PT.json b/app/i18n/locales/pt-PT.json
@@ -67,6 +67,7 @@
   "changing_avatar": "a alterar avatar",
   "Channel_hint_private": "As pessoas só podem se juntar ao ser convidadas",
   "Channel_Name": "Nome do Canal",
+  "Channel_name_already_taken": "Nome do canal já está em uso",
   "Channel_name_required": "Nome do canal obrigatório",
   "Channel_Read_Only_Hint": "Somente os proprietários de canais podem enviar novas mensagens",
   "Channels": "Canais",
diff --git a/app/i18n/locales/ru.json b/app/i18n/locales/ru.json
@@ -96,6 +96,7 @@
   "Channel_hint_private": "Люди могут присоединиться только к приглашению",
   "Channel_hint_public": "У всех есть доступ к этому каналу",
   "Channel_Name": "Название канала",
+  "Channel_name_already_taken": "Название канала уже занято.",
   "Channel_name_required": "Требуется название канала",
   "Channel_Read_Only_Hint": "Только владельцы каналов могут отправлять новые сообщения",
   "Channels": "Каналы",
diff --git a/app/i18n/locales/sl-SI.json b/app/i18n/locales/sl-SI.json
@@ -83,6 +83,7 @@
   "changing_avatar": "spreminjanje avatarja",
   "Channel_hint_private": "Ljudje se lahko pridružijo samo z vabilom",
   "Channel_Name": "Ime kanala",
+  "Channel_name_already_taken": "Ime kanala je že zasedeno.",
   "Channel_name_required": "Zahtevano ime kanala",
   "Channel_Read_Only_Hint": "Samo lastniki kanala lahko pošiljajo nova sporočila",
   "Channels": "Kanali",
diff --git a/app/i18n/locales/sv.json b/app/i18n/locales/sv.json
@@ -100,6 +100,7 @@
   "Channel_hint_private": "Människor kan bara gå med genom att bli inbjudna",
   "Channel_hint_public": "Alla kan öppna kanalen",
   "Channel_Name": "Kanalnamn",
+  "Channel_name_already_taken": "Kanalnamnet är redan taget.",
   "Channel_name_required": "Kanalsnamn krävs",
   "Channel_Read_Only_Hint": "Endast kanalägare kan skicka nya meddelanden",
   "Channels": "Kanaler",
diff --git a/app/i18n/locales/ta-IN.json b/app/i18n/locales/ta-IN.json
@@ -115,6 +115,7 @@
   "Channel_hint_private": "மக்கள் அழைப்பின் மூலம் மட்டும் சேர முடியும்",
   "Channel_hint_public": "அனைத்து பயனர்களும் இந்த சேனலுக்கு அணுகலாம்",
   "Channel_Name": "சேனலின் பெயர்",
+  "Channel_name_already_taken": "சேனல் பெயர் ஏற்கனவே எடுத்துக்கொண்டது.",
   "Channel_name_required": "சேனல் பெயர் தேவை",
   "Channel_Read_Only_Hint": "சேனல் உரிமையாளர்கள் மட்டுமே புதிய செய்திகளை அனுப்ப முடியும்",
   "Channels": "சேனல்கள்",
diff --git a/app/i18n/locales/te-IN.json b/app/i18n/locales/te-IN.json
@@ -115,6 +115,7 @@
   "Channel_hint_private": "కేవలం ఆహ్వానిత వాడాలు ఈ చానల్‌కు ప్రాప్తి ఉంచవచ్చు",
   "Channel_hint_public": "ప్రతిపక్షం ఈ చానల్‌కు ప్రాప్తి ఉంచవచ్చు",
   "Channel_Name": "ఛానల్ పేరు",
+  "Channel_name_already_taken": "चैनल का नाम पहले से लिया जा चुका है।",
   "Channel_name_required": "चैनल का नाम आवश्यक है।",
   "Channels": "ఛానల్లు",
   "Chat_closed_by_agent": "ఏజెంట్ ద్వారా చాట్ మూసబడింది",
diff --git a/app/i18n/locales/tr.json b/app/i18n/locales/tr.json
@@ -69,6 +69,7 @@
   "changing_avatar": "profil fotoğrafı değiştirme",
   "Channel_hint_private": "İnsanlar sadece davet edilerek katılabilir",
   "Channel_Name": "Kanal Adı",
+  "Channel_name_already_taken": "Kanal adı zaten alınmış.",
   "Channel_name_required": "Kanal adı gerekli.",
   "Channel_Read_Only_Hint": "Yalnızca kanal sahipleri yeni mesajlar gönderebilir",
   "Channels": "Kanallar",
diff --git a/app/i18n/locales/zh-CN.json b/app/i18n/locales/zh-CN.json
@@ -69,6 +69,7 @@
   "changing_avatar": "更改头像",
   "Channel_hint_private": "人们只能被邀请加入",
   "Channel_Name": "频道名",
+  "Channel_name_already_taken": "频道名称已被占用",
   "Channel_name_required": "需要频道名称",
   "Channel_Read_Only_Hint": "只有频道所有者可以发送新消息",
   "Channels": "频道",
diff --git a/app/i18n/locales/zh-TW.json b/app/i18n/locales/zh-TW.json
@@ -69,6 +69,7 @@
   "changing_avatar": "更改大頭貼",
   "Channel_hint_private": "人們只能被邀請加入",
   "Channel_Name": "頻道名稱",
+  "Channel_name_already_taken": "頻道名稱已被使用",
   "Channel_name_required": "需要頻道名稱",
   "Channel_Read_Only_Hint": "只有頻道所有者可以發送新消息",
   "Channels": "頻道",
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
@@ -1,8 +1,10 @@
 import React, { useLayoutEffect, useState } from 'react';
 import { BlockContext } from '@rocket.chat/ui-kit';
 import { dequal } from 'dequal';
-import { Alert, Keyboard, ScrollView, Text, View } from 'react-native';
+import { AccessibilityInfo, Alert, Keyboard, ScrollView, Text, View } from 'react-native';
 import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import { useAppSelector, usePermissions } from '../../lib/hooks';
 import { AvatarWithEdit } from '../../containers/Avatar';
@@ -37,6 +39,10 @@ const MESSAGE_TYPE_VALUES = MessageTypeValues.map(m => ({
 	text: { text: I18n.t('Hide_type_messages', { type: I18n.t(m.text) }) }
 }));
 
+const schema = yup.object().shape({
+	name: yup.string().required(I18n.t('Name_required'))
+});
+
 const RoomInfoEditView = ({ navigation, route }: IRoomInfoEditViewProps) => {
 	const { colors } = useTheme();
 	const { encryptionEnabled, serverVersion } = useAppSelector(state => ({
@@ -68,7 +74,9 @@ const RoomInfoEditView = ({ navigation, route }: IRoomInfoEditViewProps) => {
 			enableSysMes: false,
 			encrypted: false,
 			archived: false
-		}
+		},
+		mode: 'onChange',
+		resolver: yupResolver(schema)
 	});
 
 	const initializeRoomState = (room: ISubscription) => {
@@ -180,7 +188,17 @@ const RoomInfoEditView = ({ navigation, route }: IRoomInfoEditViewProps) => {
 		} catch (e: any) {
 			if (e.error === 'error-invalid-room-name') {
 				setError('name', { message: e, type: 'validate' });
+				setFocus('name');
+			}
+
+			if (e.error === 'error-duplicate-channel-name') {
+				setError('name', { message: I18n.t('Channel_name_already_taken'), type: 'validate' });
+				setFocus('name');
 			}
+
+			const a11yAnnouncement = e.error === 'error-duplicate-channel-name' ? I18n.t('Channel_name_already_taken') : e.reason;
+			AccessibilityInfo.announceForAccessibility(a11yAnnouncement);
+
 			error = true;
 			log(e);
 		}
