feat: WCAG 3.3.1 inline error in report message modal

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

@@ -1,8 +1,9 @@
 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 { useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement} from 'react';
+import { useId } from 'react';
 import { useForm } from 'react-hook-form';
 
 import GenericModal from '../../../../components/GenericModal';
@@ -24,11 +25,16 @@
 
 const ReportMessageModal = ({ message, onClose }: ReportMessageModalProps): ReactElement => {
 	const t = useTranslation();
+	const reasonForReportId = useId();
 	const {
 		register,
 		formState: { errors },
 		handleSubmit,
-	} = useForm<ReportMessageModalsFields>();
+	} = useForm<ReportMessageModalsFields>({
+		defaultValues: {
+			description: '',
+		},
+	});
 	const dispatchToastMessage = useToastMessageDispatch();
 	const reportMessage = useEndpoint('POST', '/v1/chat.reportMessage');
 
@@ -49,20 +55,36 @@
 		<GenericModal
 			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleReportMessage)} {...props} />}
 			variant='danger'
-			title={t('Report_this_message_question_mark')}
+			title={t('Report_Message')}
 			onClose={onClose}
 			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')} />
+						<TextAreaInput
+							id={reasonForReportId}
+							rows={3}
+							width='full'
+							mbe={4}
+							aria-required='true'
+							aria-describedby={`${reasonForReportId}-description ${reasonForReportId}-error`}
+							{...register('description', {
+								required: t('Required_field', { field: t('Reason_for_report') }),
+							})}
+						/>
 					</FieldRow>
-					{errors.description && <FieldError>{t('You_need_to_write_something')}</FieldError>}
+					{errors.description && (
+  						<FieldError aria-live='assertive' id={`${reasonForReportId}-error`}>
+    						{errors.description.message}
+  						</FieldError>
+					)}
 				</Field>
 			</FieldGroup>
 		</GenericModal>

packages/i18n/src/locales/en.i18n.json

@@ -4243,6 +4243,7 @@
   "Report_Abuse": "Report Abuse",
   "Report_Number": "Report Number",
   "Report_User": "Report user",
+  "Report_Message": "Report message",
   "Report_exclamation_mark": "Report!",
   "Report_has_been_sent": "Report has been sent",
   "Report_reason": "Report reason",