feat: Implement proper accessbility for report user modal (#33294)

Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>

.changeset/late-hats-carry.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+---
+
+Improves the accessibility of the report user modal by adding an appropriate label, description, and ARIA attributes.

apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx

@@ -1,4 +1,4 @@
-import { Box, FieldGroup, Field, FieldLabel, FieldRow, FieldError, TextAreaInput } from '@rocket.chat/fuselage';
+import { Box, FieldGroup, Field, FieldLabel, FieldRow, FieldError, TextAreaInput, FieldDescription } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { ComponentProps } from 'react';
@@ -45,27 +45,32 @@ const ReportUserModal = ({ username, displayName, onConfirm, onClose }: ReportUs
 			onCancel={onClose}
 			confirmText={t('Report')}
 		>
+			<Box mbe={16} display='flex' alignItems='center'>
+				<UserAvatar username={username} />
+				<Box mis={8} fontScale='p2b'>
+					{displayName}
+				</Box>
+			</Box>
 			<FieldGroup>
 				<Field>
-					<FieldLabel htmlFor={reasonForReportId}>
-						<Box mbe='x12' display='flex' alignItems='center'>
-							<UserAvatar username={username} />
-							<Box mis='x12' fontScale='p1' fontWeight='700'>
-								{displayName}
-							</Box>
-						</Box>
-					</FieldLabel>
+					<FieldLabel htmlFor={reasonForReportId}>{t('Report_reason')}</FieldLabel>
+					<FieldDescription id={`${reasonForReportId}-description`}>{t('Let_moderators_know_what_the_issue_is')}</FieldDescription>
 					<FieldRow>
 						<TextAreaInput
+							id={reasonForReportId}
 							rows={3}
-							placeholder={t('Why_do_you_want_to_report_question_mark')}
 							{...register('reasonForReport', { required: t('Required_field', { field: t('Reason_for_report') }) })}
 							width='full'
-							mbe='x4'
-							aria-label={t('Reason_for_report')}
+							mbe={4}
+							aria-required='true'
+							aria-describedby={`${reasonForReportId}-description ${reasonForReportId}-error`}
 						/>
 					</FieldRow>
-					{errors.reasonForReport && <FieldError>{errors.reasonForReport.message}</FieldError>}
+					{errors.reasonForReport && (
+						<FieldError aria-live='assertive' id={`${reasonForReportId}-error`}>
+							{errors.reasonForReport.message}
+						</FieldError>
+					)}
 				</Field>
 			</FieldGroup>
 		</GenericModal>

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

@@ -3199,6 +3199,7 @@
   "leave-p": "Leave Private Groups",
   "leave-p_description": "Permission to leave private groups",
   "Lets_get_you_new_one_": "Let's get you a new one!",
+  "Let_moderators_know_what_the_issue_is": "Let moderators know what the issue is",
   "Let_them_know": "Let them know",
   "Left": "Left",
   "License": "License",
@@ -4490,6 +4491,7 @@
   "Report_exclamation_mark": "Report!",
   "Report_has_been_sent": "Report has been sent",
   "Report_Number": "Report Number",
+  "Report_reason": "Report reason",
   "Report_this_message_question_mark": "Report this message?",
   "Report_User": "Report user",
   "Reporting": "Reporting",