From e9c3214a3c52058045606d4dbb3672b2d881763f Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 16 Sep 2024 11:51:41 -0300
Subject: [PATCH 1/3] feat: :sparkles: Add label and description to report user
 modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed the user avatar and nickname from the report user modal’s FieldLabel. Added a proper text label, description, and necessary ARIA elements to the form elements. Also fixed issues with incorrect spacing, font scale, and improper use of `rem` for margins.
---
 .../UserInfo/ReportUserModal.tsx              | 31 +++++++++++--------
 packages/i18n/src/locales/en.i18n.json        |  2 ++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx
index 5f94f7c407b0..86b4571d88d1 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx
+++ b/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>
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 796e9d0519ff..ef21814f1683 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -3197,6 +3197,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",
@@ -4488,6 +4489,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",

From 5b11d7c41c48df49e59182b3fdb409161e6cd99d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <43561537+rique223@users.noreply.github.com>
Date: Mon, 16 Sep 2024 12:03:59 -0300
Subject: [PATCH 2/3] Create late-hats-carry.md

---
 .changeset/late-hats-carry.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/late-hats-carry.md

diff --git a/.changeset/late-hats-carry.md b/.changeset/late-hats-carry.md
new file mode 100644
index 000000000000..fdbcb945f261
--- /dev/null
+++ b/.changeset/late-hats-carry.md
@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+---
+
+Improves the accessibility of the report user modal by adding an appropriate label, description, and aria elements
+to enhance the usability of the modal for people with disabilities.

From 831a2eb1031db17461e794d31babe2c122ce0a04 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 19 Sep 2024 20:57:50 -0300
Subject: [PATCH 3/3] Update late-hats-carry.md

---
 .changeset/late-hats-carry.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.changeset/late-hats-carry.md b/.changeset/late-hats-carry.md
index fdbcb945f261..ec24c7cd5376 100644
--- a/.changeset/late-hats-carry.md
+++ b/.changeset/late-hats-carry.md
@@ -3,5 +3,4 @@
 "@rocket.chat/i18n": minor
 ---
 
-Improves the accessibility of the report user modal by adding an appropriate label, description, and aria elements
-to enhance the usability of the modal for people with disabilities.
+Improves the accessibility of the report user modal by adding an appropriate label, description, and ARIA attributes.