Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 10 commits into from
Nov 11, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3a0926e
fix: WCAG 3.3.1 inline error in report message modal
sandranymark Jun 26, 2025
7f2210d
chore: fix lint errors in ReportMessageModal
sandranymark Aug 18, 2025
d335b11
Merge branch 'develop' into fix/inline-error-report-message-modal
sandranymark Aug 19, 2025
bdc0c86
Merge branch 'develop' into fix/inline-error-report-message-modal
dougfabris Nov 10, 2025
512885b
fix: review
dougfabris Nov 10, 2025
8e05ff9
i18n: translations
dougfabris Nov 10, 2025
e924679
test: fix e2e test
dougfabris Nov 10, 2025
1d583f3
chore: changeset
dougfabris Nov 10, 2025
41af612
Merge branch 'develop' into fix/inline-error-report-message-modal
ggazzo Nov 11, 2025
3528f39
Merge branch 'develop' into fix/inline-error-report-message-modal
rodrigok Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/thirty-donuts-visit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@rocket.chat/i18n': minor
'@rocket.chat/meteor': minor
---

Improves inline error in report message modal to meet WCAG compliance.
48 changes: 37 additions & 11 deletions apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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');

Expand All @@ -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>
Expand Down
43 changes: 31 additions & 12 deletions apps/meteor/tests/e2e/page-objects/fragments/report-message-modal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' });
}
}
20 changes: 5 additions & 15 deletions apps/meteor/tests/e2e/report-message.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});

Expand All @@ -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();
});
});

Expand All @@ -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 () => {
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/af.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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!",
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/ar.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "طلب التعليق عند إغلاق المحادثة",
Expand Down Expand Up @@ -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": "من دون أولوية",
Expand Down Expand Up @@ -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": "يجب عليك تسميته لإدارة عمليات التكامل بسهولة.",
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/az.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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!",
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/be-BY.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Патрабаваць любы маркер",
Expand Down Expand Up @@ -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": "Да",
Expand Down Expand Up @@ -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": "Вы не зможаце аднавіць гэта паведамленне!",
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/bg.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Изискайте всеки символ",
Expand Down Expand Up @@ -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": "Да",
Expand Down Expand Up @@ -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": "Няма да можете да възстановите това съобщение!",
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/bs.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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!",
Expand Down
4 changes: 0 additions & 4 deletions packages/i18n/src/locales/ca.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3020,9 +3020,7 @@
"Reply_via_Email": "Respondre per correu electrònic",
"Report": "Reportar",
"Report_Abuse": "Reportar abús",
"Report_exclamation_mark": "Informa!",
"Report_sent": "Informe enviat",
"Report_this_message_question_mark": "Informar d'aquest missatge?",
"Reporting": "Informes",
"Request": "Sol·licitud",
"Request_comment_when_closing_conversation": "Sol·licitar un comentari al tancar la conversa",
Expand Down Expand Up @@ -3971,7 +3969,6 @@
"When_is_the_chat_busier?": "Quan està més ocupat el xat?",
"Where_are_the_messages_being_sent?": "A on s'envien els missatges?",
"Why_did_you_chose__score__": "Per què va triar {{score}}?",
"Why_do_you_want_to_report_question_mark": "Per què vols informar?",
"Will_Appear_In_From": "Apareixerà a la capçalera De: dels correus electrònics que envieu.",
"Will_be_available_here_after_saving": "Estarà disponible aquí després de desar-lo.",
"Without_priority": "Sense prioritat",
Expand Down Expand Up @@ -4015,7 +4012,6 @@
"You_need_to_type_in_your_password_in_order_to_do_this": "Cal que escriguis la contrasenya per fer això.",
"You_need_to_type_in_your_username_in_order_to_do_this": "Necessiteu escriure el vostre nom d'usuari per fer-ho!",
"You_need_to_verifiy_your_email_address_to_get_notications": "Cal tenir verificada l'adreça de correu electrònic per poder rebre notificacions",
"You_need_to_write_something": "Cal escriure alguna cosa!",
"You_reached_the_maximum_number_of_guest_users_allowed_by_your_license": "Heu assolit el nombre màxim d’usuaris convidats que permet la vostra llicència.",
"You_should_inform_one_url_at_least": "Heu de definir almenys una URL.",
"You_should_name_it_to_easily_manage_your_integrations": "Ho hauria de nomenar per administrar fàcilment les seves integracions.",
Expand Down
Loading
Loading