fix: a11y in ExportMessages message checkbox

Co-authored-by: Copilot <copilot@github.com>

Author: juliajforesti

apps/meteor/client/components/message/helpers/getCheckboxLabel.tsx

@@ -0,0 +1,13 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import type { TFunction } from 'i18next';
+
+export const getCheckboxLabel = (message: IMessage, t: TFunction): string => {
+	const username = message.u.name || message.u.username;
+	if (message.msg) {
+		return t('Select_message_from_user_with_preview', {
+			username,
+			message: message.msg,
+		});
+	}
+	return t('Select_message_from_user', { username });
+};

apps/meteor/client/components/message/variants/RoomMessage.tsx

@@ -2,9 +2,10 @@ import type { IMessage } from '@rocket.chat/core-typings';
 import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rocket.chat/fuselage';
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { MessageAvatar } from '@rocket.chat/ui-avatar';
-import { useTranslation, useUserId, useUserCard } from '@rocket.chat/ui-contexts';
+import { useUserId, useUserCard } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
@@ -21,6 +22,7 @@ import MessageHeader from '../MessageHeader';
 import MessageToolbarHolder from '../MessageToolbarHolder';
 import StatusIndicators from '../StatusIndicators';
 import RoomMessageContent from './room/RoomMessageContent';
+import { getCheckboxLabel } from '../helpers/getCheckboxLabel';
 import { useMessageListReadReceipts } from '../list/MessageListContext';
 
 type RoomMessageProps = {
@@ -71,7 +73,7 @@ const RoomMessage = ({
 	searchText,
 	...props
 }: RoomMessageProps): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const uid = useUserId();
 	const editing = useIsMessageHighlight(message._id);
 	const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false);
@@ -88,6 +90,8 @@ const RoomMessage = ({
 	useCountSelected();
 	const messageRef = useJumpToMessage(message._id);
 
+	const checkboxLabel = getCheckboxLabel(message, t);
+
 	return (
 		<Message
 			ref={messageRef}
@@ -122,7 +126,7 @@ const RoomMessage = ({
 						{...triggerProps}
 					/>
 				)}
-				{selecting && <CheckBox checked={selected} onChange={toggleSelected} />}
+				{selecting && <CheckBox checked={selected} onChange={toggleSelected} aria-label={checkboxLabel} />}
 				{sequential && <StatusIndicators message={message} />}
 			</MessageLeftContainer>
 			<MessageContainer>

apps/meteor/client/components/message/variants/SystemMessage.tsx

@@ -30,6 +30,7 @@ import {
 } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
 import Attachments from '../content/Attachments';
 import MessageActions from '../content/MessageActions';
+import { getCheckboxLabel } from '../helpers/getCheckboxLabel';
 import {
 	useMessageListShowRealName,
 	useMessageListShowUsername,
@@ -63,6 +64,8 @@ const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps
 	useCountSelected();
 	const buttonProps = useButtonPattern((e) => openUserCard(e, user.username));
 
+	const checkboxLabel = getCheckboxLabel(message, t);
+
 	return (
 		<MessageSystem
 			role='listitem'
@@ -75,7 +78,7 @@ const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps
 		>
 			<MessageSystemLeftContainer>
 				{!isSelecting && showUserAvatar && <UserAvatar username={message.u.username} size='x18' />}
-				{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
+				{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} aria-label={checkboxLabel} />}
 			</MessageSystemLeftContainer>
 			<MessageSystemContainer>
 				<MessageSystemBlock>

apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx

@@ -31,6 +31,7 @@ import { useGoToThread } from '../../../views/room/hooks/useGoToThread';
 import Emoji from '../../Emoji';
 import { useShowTranslated } from '../list/MessageListContext';
 import ThreadMessagePreviewBody from './threadPreview/ThreadMessagePreviewBody';
+import { getCheckboxLabel } from '../helpers/getCheckboxLabel';
 
 type ThreadMessagePreviewProps = {
 	message: IThreadMessage;
@@ -69,6 +70,8 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }:
 		return toggleSelected();
 	};
 
+	const checkboxLabel = getCheckboxLabel(message, t);
+
 	return (
 		<ThreadMessage
 			role='link'
@@ -117,7 +120,7 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }:
 							size='x18'
 						/>
 					)}
-					{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} />}
+					{isSelecting && <CheckBox checked={isSelected} onChange={toggleSelected} aria-label={checkboxLabel} />}
 				</ThreadMessageLeftContainer>
 				<ThreadMessageContainer>
 					<ThreadMessageBody>

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

@@ -7212,5 +7212,7 @@
   "message_attachment": "message attachment",
   "system_message_body": "system message body",
   "No_changes_to_save": "No changes to save",
-  "Avatar_preview_updated": "Avatar preview updated"
+  "Avatar_preview_updated": "Avatar preview updated",
+  "Select_message_from_user": "Select message from {{username}}",
+  "Select_message_from_user_with_preview": "Select message from {{username}}: {{message}}"
 }