feat: WCAG 3.3.1 inline error in report message modal (#36308)

Co-authored-by: Douglas Fabris <[email protected]>

Author: sandranymark

.changeset/thirty-donuts-visit.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Improves inline error in report message modal to meet WCAG compliance.

apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx

@@ -1,10 +1,12 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import { TextAreaInput, FieldGroup, Field, FieldRow, FieldError, Box } from '@rocket.chat/fuselage';
+import { TextAreaInput, FieldGroup, Field, FieldRow, FieldError, FieldLabel, FieldDescription, Box } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
-import { useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import { useForm } from 'react-hook-form';
+import { useId } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import MarkdownText from '../../../../components/MarkdownText';
 import MessageContentBody from '../../../../components/message/MessageContentBody';
@@ -23,12 +25,17 @@ const wordBreak = css`
 `;
 
 const ReportMessageModal = ({ message, onClose }: ReportMessageModalProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
+	const reasonForReportId = useId();
 	const {
-		register,
+		control,
 		formState: { errors },
 		handleSubmit,
-	} = useForm<ReportMessageModalsFields>();
+	} = useForm<ReportMessageModalsFields>({
+		defaultValues: {
+			description: '',
+		},
+	});
 	const dispatchToastMessage = useToastMessageDispatch();
 	const reportMessage = useEndpoint('POST', '/v1/chat.reportMessage');
 
@@ -49,20 +56,39 @@ const ReportMessageModal = ({ message, onClose }: ReportMessageModalProps): Reac
 		<GenericModal
 			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleReportMessage)} {...props} />}
 			variant='danger'
-			title={t('Report_this_message_question_mark')}
-			onClose={onClose}
+			title={t('Report_message')}
 			onCancel={onClose}
-			confirmText={t('Report_exclamation_mark')}
+			confirmText={t('Report')}
 		>
 			<Box mbe={24} className={wordBreak}>
 				{message.md ? <MessageContentBody md={message.md} /> : <MarkdownText variant='inline' parseEmoji content={message.msg} />}
 			</Box>
 			<FieldGroup>
 				<Field>
+					<FieldLabel htmlFor={reasonForReportId}>{t('Report_reason')}</FieldLabel>
+					<FieldDescription id={`${reasonForReportId}-description`}>{t('Let_moderators_know_what_the_issue_is')}</FieldDescription>
 					<FieldRow>
-						<TextAreaInput {...register('description', { required: true })} placeholder={t('Why_do_you_want_to_report_question_mark')} />
+						<Controller
+							rules={{ required: t('Required_field', { field: t('Report_reason') }) }}
+							name='description'
+							control={control}
+							render={({ field }) => (
+								<TextAreaInput
+									{...field}
+									id={reasonForReportId}
+									rows={3}
+									aria-required='true'
+									aria-invalid={!!errors.description}
+									aria-describedby={`${reasonForReportId}-description ${reasonForReportId}-error`}
+								/>
+							)}
+						/>
 					</FieldRow>
-					{errors.description && <FieldError>{t('You_need_to_write_something')}</FieldError>}
+					{errors.description && (
+						<FieldError role='alert' id={`${reasonForReportId}-error`}>
+							{errors.description.message}
+						</FieldError>
+					)}
 				</Field>
 			</FieldGroup>
 		</GenericModal>

apps/meteor/tests/e2e/page-objects/fragments/report-message-modal.ts

@@ -1,29 +1,48 @@
 import type { Locator, Page } from '@playwright/test';
 
-export class ReportMessageModal {
-	private readonly page: Page;
+import { Modal } from './modal';
+import { ToastMessages } from './toast-messages';
+import { expect } from '../../utils/test';
+
+export class ReportMessageModal extends Modal {
+	readonly toastMessage: ToastMessages;
 
 	constructor(page: Page) {
-		this.page = page;
+		super(page.getByRole('dialog', { name: 'Report message' }));
+		this.toastMessage = new ToastMessages(page);
 	}
 
 	get inputReportDescription(): Locator {
-		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Why do you want to report?' });
+		return this.root.getByRole('textbox', { name: 'Report reason' });
+	}
+
+	private get btnSubmitReport(): Locator {
+		return this.root.getByRole('button', { name: 'Report' });
 	}
 
-	get btnSubmitReport(): Locator {
-		return this.page.getByRole('dialog').getByRole('button', { name: 'Report!' });
+	private get btnCancelReport(): Locator {
+		return this.root.getByRole('button', { name: 'Cancel' });
 	}
 
-	get btnCancelReport(): Locator {
-		return this.page.getByRole('dialog').getByRole('button', { name: 'Cancel' });
+	private get alertInputDescription(): Locator {
+		return this.root.getByRole('alert');
 	}
 
-	get reportDescriptionError(): Locator {
-		return this.page.getByRole('dialog').getByText('You need to write something!');
+	async cancelReport(): Promise<void> {
+		await this.btnCancelReport.click();
+		await this.waitForDismissal();
 	}
 
-	get modalTitle(): Locator {
-		return this.page.getByRole('dialog').getByText('Report this message?');
+	async submitReport(description?: string): Promise<void> {
+		if (!description) {
+			await this.btnSubmitReport.click();
+			await expect(this.alertInputDescription).toBeVisible();
+			return;
+		}
+
+		await this.inputReportDescription.fill(description);
+		await this.btnSubmitReport.click();
+		await this.waitForDismissal();
+		await this.toastMessage.waitForDisplay({ type: 'success', message: 'Report has been sent' });
 	}
 }

apps/meteor/tests/e2e/report-message.spec.ts

@@ -79,9 +79,7 @@ test.describe.serial('report message', () => {
 
 			await adminHomeChannel.content.openLastMessageMenu();
 			await adminPage.getByRole('menuitem', { name: 'Report' }).click();
-
-			await reportModal.btnSubmitReport.click();
-			await expect(reportModal.reportDescriptionError).toBeVisible();
+			await reportModal.submitReport();
 		});
 	});
 
@@ -98,10 +96,7 @@ test.describe.serial('report message', () => {
 
 			await adminHomeChannel.content.openLastMessageMenu();
 			await adminPage.getByRole('menuitem', { name: 'Report' }).click();
-
-			await expect(reportModal.modalTitle).toBeVisible();
-			await reportModal.btnCancelReport.click();
-			await expect(reportModal.modalTitle).not.toBeVisible();
+			await reportModal.cancelReport();
 		});
 	});
 
@@ -116,18 +111,13 @@ test.describe.serial('report message', () => {
 		});
 
 		await test.step('report message as the other user', async () => {
+			reportDescription = faker.lorem.sentence();
+
 			const adminHomeChannel = new HomeChannel(adminPage);
 			await adminHomeChannel.sidenav.openChat(targetChannel);
-
 			await adminHomeChannel.content.openLastMessageMenu();
 			await adminPage.getByRole('menuitem', { name: 'Report' }).click();
-
-			reportDescription = faker.lorem.sentence();
-			await reportModal.inputReportDescription.fill(reportDescription);
-
-			await reportModal.btnSubmitReport.click();
-
-			await expect(adminPage.getByText('Report has been sent')).toBeVisible();
+			await reportModal.submitReport(reportDescription);
 		});
 
 		await test.step('verify report in moderation console', async () => {

packages/i18n/src/locales/af.i18n.json

@@ -1791,9 +1791,7 @@
   "Reply": "antwoord",
   "ReplyTo": "Antwoord op",
   "Report_Abuse": "Rapporteer misbruik",
-  "Report_exclamation_mark": "Rapporteer!",
   "Report_sent": "Verslag gestuur",
-  "Report_this_message_question_mark": "Rapporteer hierdie boodskap?",
   "Reporting": "verslagdoening",
   "Require_all_tokens": "Vereis alle tokens",
   "Require_any_token": "Vereis enige teken",
@@ -2337,7 +2335,6 @@
   "Wednesday": "Woensdag",
   "Welcome": "Welkom <em>%s</em>.",
   "Welcome_to_the": "Welkom by die",
-  "Why_do_you_want_to_report_question_mark": "Hoekom wil jy rapporteer?",
   "Worldwide": "wêreldwyd",
   "Would_you_like_to_return_the_inquiry": "Wil jy die navraag terugbesorg?",
   "Yes": "Ja",
@@ -2370,7 +2367,6 @@
   "You_need_to_type_in_your_password_in_order_to_do_this": "U moet u wagwoord invoer om dit te kan doen!",
   "You_need_to_type_in_your_username_in_order_to_do_this": "Jy moet jou gebruikersnaam tik om dit te doen!",
   "You_need_to_verifiy_your_email_address_to_get_notications": "Jy moet jou e-pos adres verifieer om kennisgewings te kry",
-  "You_need_to_write_something": "Jy moet iets skryf!",
   "You_should_inform_one_url_at_least": "U moet ten minste een URL definieer.",
   "You_should_name_it_to_easily_manage_your_integrations": "U moet dit noem om u integrasies maklik te bestuur.",
   "You_will_not_be_able_to_recover": "Jy sal nie hierdie boodskap kan herstel nie!",

packages/i18n/src/locales/ar.i18n.json

@@ -3073,9 +3073,7 @@
   "Report": "إبلاغ",
   "Report_Abuse": "الإبلاغ عن إساءة",
   "Report_Number": "رقم الإبلاغ",
-  "Report_exclamation_mark": "إبلاغ!",
   "Report_sent": "تم إرسال الإبلاغ",
-  "Report_this_message_question_mark": "هل أبلغ عن هذه الرسالة؟",
   "Reporting": "يتم الإبلاغ الآن",
   "Request": "طلب",
   "Request_comment_when_closing_conversation": "طلب التعليق عند إغلاق المحادثة",
@@ -4083,7 +4081,6 @@
   "When_is_the_chat_busier?": "متى تكون الدردشة مشغولة جدًا؟",
   "Where_are_the_messages_being_sent?": "أين يتم إرسال الرسائل؟",
   "Why_did_you_chose__score__": "لماذا اخترت {{score}}؟",
-  "Why_do_you_want_to_report_question_mark": "لماذا تريد الإبلاغ؟",
   "Will_Appear_In_From": "سيظهر في عنوان \"من\": رأس رسائل البريد الإلكتروني التي ترسلها.",
   "Will_be_available_here_after_saving": "سيكون متاحًا هنا بعد الحفظ.",
   "Without_priority": "من دون أولوية",
@@ -4131,7 +4128,6 @@
   "You_need_to_type_in_your_password_in_order_to_do_this": "تحتاج إلى كتابة كلمة المرور الخاصة بك للقيام بذلك!",
   "You_need_to_type_in_your_username_in_order_to_do_this": "تحتاج إلى كتابة اسم المستخدم الخاص بك للقيام بذلك!",
   "You_need_to_verifiy_your_email_address_to_get_notications": "تحتاج إلى التحقق من عنوان بريدك الإلكتروني لتلقي الإشعارات",
-  "You_need_to_write_something": "تحتاج إلى كتابة شيء!",
   "You_reached_the_maximum_number_of_guest_users_allowed_by_your_license": "لقد وصلت إلى الحد الأقصى لعدد المستخدمين الضيوف الذي يسمح به ترخيصك.",
   "You_should_inform_one_url_at_least": "يجب عليك تحديد عنوان URL واحد على الأقل.",
   "You_should_name_it_to_easily_manage_your_integrations": "يجب عليك تسميته لإدارة عمليات التكامل بسهولة.",

packages/i18n/src/locales/az.i18n.json

@@ -1792,9 +1792,7 @@
   "Reply": "Cavab ver",
   "ReplyTo": "Cavab vermək",
   "Report_Abuse": "Şikayət et",
-  "Report_exclamation_mark": "Hesabat!",
   "Report_sent": "Hesabat göndərildi",
-  "Report_this_message_question_mark": "Bu mesajı bildirin?",
   "Reporting": "Hesabat",
   "Require_all_tokens": "Bütün simvollar tələb olunur",
   "Require_any_token": "Hər hansı mö'cüzə tələb et",
@@ -2338,7 +2336,6 @@
   "Wednesday": "Çərşənbə günü",
   "Welcome": "Xoş gəldiniz <em>%s</em>.",
   "Welcome_to_the": "Xoş gəlmisiniz",
-  "Why_do_you_want_to_report_question_mark": "Niyə hesabat vermək istəyirsiniz?",
   "Worldwide": "Dünya miqyasında",
   "Would_you_like_to_return_the_inquiry": "Sorğu qaytarmaq istəyirsinizmi?",
   "Yes": "Bəli",
@@ -2371,7 +2368,6 @@
   "You_need_to_type_in_your_password_in_order_to_do_this": "Bunun üçün parolunuzu yazmalısınız!",
   "You_need_to_type_in_your_username_in_order_to_do_this": "Bunu etmək üçün istifadəçi adınızı yazmalısınız!",
   "You_need_to_verifiy_your_email_address_to_get_notications": "Bildirişlər almaq üçün e-poçt ünvanınızı təsdiqləməlisiniz",
-  "You_need_to_write_something": "Bir şey yazmalısan!",
   "You_should_inform_one_url_at_least": "Ən azı bir URL müəyyən etməlisiniz.",
   "You_should_name_it_to_easily_manage_your_integrations": "İnteqrasiyanı asanlıqla idarə etmək üçün onu adlandırmalısınız.",
   "You_will_not_be_able_to_recover": "Bu mesajı bərpa edə bilməzsiniz!",

packages/i18n/src/locales/be-BY.i18n.json

@@ -1810,9 +1810,7 @@
   "Reply": "адказаць",
   "ReplyTo": "Адказваць на",
   "Report_Abuse": "Паведаміць аб парушэннях",
-  "Report_exclamation_mark": "Даклад!",
   "Report_sent": "Справаздача адпраўлены",
-  "Report_this_message_question_mark": "Паведаміць пра гэта паведамленні?",
   "Reporting": "справаздачнасці",
   "Require_all_tokens": "Патрабаваць, каб усе маркеры",
   "Require_any_token": "Патрабаваць любы маркер",
@@ -2358,7 +2356,6 @@
   "Wednesday": "серада",
   "Welcome": "Сардэчна запрашаем <em>%s</em>.",
   "Welcome_to_the": "Сардэчна запрашаем у",
-  "Why_do_you_want_to_report_question_mark": "Чаму вы хочаце паведаміць?",
   "Worldwide": "сусветнай",
   "Would_you_like_to_return_the_inquiry": "Вы хочаце, каб вярнуць запыт?",
   "Yes": "Да",
@@ -2391,7 +2388,6 @@
   "You_need_to_type_in_your_password_in_order_to_do_this": "Вы павінны ўвесці свой пароль для таго, каб зрабіць гэта!",
   "You_need_to_type_in_your_username_in_order_to_do_this": "Вы павінны ўвесці імя карыстальніка для таго, каб зрабіць гэта!",
   "You_need_to_verifiy_your_email_address_to_get_notications": "Вы павінны пацвердзіць свой адрас электроннай пошты для атрымання апавяшчэнняў",
-  "You_need_to_write_something": "Вы павінны напісаць што-небудзь!",
   "You_should_inform_one_url_at_least": "Вы павінны вызначыць прынамсі адзін URL.",
   "You_should_name_it_to_easily_manage_your_integrations": "Вы павінны назваць яго лёгка кіраваць інтэграцый.",
   "You_will_not_be_able_to_recover": "Вы не зможаце аднавіць гэта паведамленне!",

packages/i18n/src/locales/bg.i18n.json

@@ -1788,9 +1788,7 @@
   "Reply": "Отговор",
   "ReplyTo": "Отговаряте на",
   "Report_Abuse": "Съобщете за злоупотреба",
-  "Report_exclamation_mark": "Доклад!",
   "Report_sent": "Отчетът е изпратен",
-  "Report_this_message_question_mark": "Подайте сигнал за това съобщение?",
   "Reporting": "Докладване",
   "Require_all_tokens": "Изисквайте всички жетони",
   "Require_any_token": "Изискайте всеки символ",
@@ -2333,7 +2331,6 @@
   "Wednesday": "Сряда",
   "Welcome": "Добре дошли <em>%s</em>.",
   "Welcome_to_the": "Добре дошли в",
-  "Why_do_you_want_to_report_question_mark": "Защо искате да подадете сигнал?",
   "Worldwide": "В световен мащаб",
   "Would_you_like_to_return_the_inquiry": "Искате ли да върнете запитването?",
   "Yes": "Да",
@@ -2365,7 +2362,6 @@
   "You_need_to_type_in_your_password_in_order_to_do_this": "За да направите това, трябва да въведете паролата си!",
   "You_need_to_type_in_your_username_in_order_to_do_this": "Трябва да въведете потребителското си име, за да направите това!",
   "You_need_to_verifiy_your_email_address_to_get_notications": "Трябва да потвърдите имейл адреса си, за да получавате известия",
-  "You_need_to_write_something": "Трябва да напишете нещо!",
   "You_should_inform_one_url_at_least": "Трябва да определите поне един URL адрес.",
   "You_should_name_it_to_easily_manage_your_integrations": "Трябва да го наименувате, за да управлявате лесно интегрирането си.",
   "You_will_not_be_able_to_recover": "Няма да можете да възстановите това съобщение!",

packages/i18n/src/locales/bs.i18n.json

@@ -1785,9 +1785,7 @@
   "Reply": "Odgovor",
   "ReplyTo": "Odgovarati na",
   "Report_Abuse": "Prijavi zlostavljanje",
-  "Report_exclamation_mark": "Izvješće!",
   "Report_sent": "Izvješće je poslano",
-  "Report_this_message_question_mark": "Prijavi ovu poruku?",
   "Reporting": "Prijava",
   "Require_all_tokens": "Zahtijevaj sve oznake",
   "Require_any_token": "Zahtijevaj token",
@@ -2330,7 +2328,6 @@
   "Wednesday": "Srijeda",
   "Welcome": "Dobro došao/la <em>%s</em>.",
   "Welcome_to_the": "Dobro došli na",
-  "Why_do_you_want_to_report_question_mark": "Zašto želite prijaviti?",
   "Worldwide": "širom svijeta",
   "Would_you_like_to_return_the_inquiry": "Želite li vratiti upit?",
   "Yes": "Da",
@@ -2363,7 +2360,6 @@
   "You_need_to_type_in_your_password_in_order_to_do_this": "Morate upisati svoju lozinku kako biste to učinili!",
   "You_need_to_type_in_your_username_in_order_to_do_this": "Morate upisati svoje korisničko ime kako bi se to učinili!",
   "You_need_to_verifiy_your_email_address_to_get_notications": "Morate verificirati vašu e-mail adresu kako bi dobivali obavijesti",
-  "You_need_to_write_something": "Morate napisati nešto!",
   "You_should_inform_one_url_at_least": "Trebali bi definirati barem jedan URL.",
   "You_should_name_it_to_easily_manage_your_integrations": "Trebali bi imenovati integracije kako bi lakše njima upravljali.",
   "You_will_not_be_able_to_recover": "Nećeš moći vratiti ovu poruku!",