fix(ux): WCAG (4.1.2) Dynamic aria-labelledby-message (RocketChat#36271)

Co-authored-by: erik <erik.gothe@fotbollsdata.se>
Co-authored-by: juliajforesti <juliajforesti@gmail.com>

Author: 3 people

apps/meteor/client/components/message/IgnoredContent.tsx

@@ -4,10 +4,11 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type IgnoredContentProps = {
+	messageId: string;
 	onShowMessageIgnored: () => void;
 };
 
-const IgnoredContent = ({ onShowMessageIgnored }: IgnoredContentProps): ReactElement => {
+const IgnoredContent = ({ messageId, onShowMessageIgnored }: IgnoredContentProps): ReactElement => {
 	const { t } = useTranslation();
 
 	const showMessageIgnored = (event: SyntheticEvent): void => {
@@ -17,7 +18,7 @@ const IgnoredContent = ({ onShowMessageIgnored }: IgnoredContentProps): ReactEle
 	};
 
 	return (
-		<MessageBody role='document' aria-roledescription={t('message_body')} dir='auto'>
+		<MessageBody id={`${messageId}-content`} role='document' aria-roledescription={t('message_body')} dir='auto'>
 			<Box display='flex' alignItems='center' fontSize='c2' color='hint'>
 				<span
 					tabIndex={0}

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

@@ -21,6 +21,7 @@ import MessageHeader from '../MessageHeader';
 import MessageToolbarHolder from '../MessageToolbarHolder';
 import StatusIndicators from '../StatusIndicators';
 import RoomMessageContent from './room/RoomMessageContent';
+import { useMessageListReadReceipts } from '../list/MessageListContext';
 
 type RoomMessageProps = {
 	message: IMessage & { ignored?: boolean };
@@ -34,6 +35,30 @@ type RoomMessageProps = {
 	searchText?: string;
 } & ComponentProps<typeof Message>;
 
+const getAriaLabelledBy = ({
+	readReceiptEnabled,
+	messageId,
+	sequential,
+}: {
+	readReceiptEnabled: boolean;
+	messageId: string;
+	sequential: boolean;
+}) => {
+	const labels: string[] = [];
+
+	if (!sequential) {
+		labels.push(`${messageId}-displayName`, `${messageId}-time`);
+	}
+
+	labels.push(`${messageId}-content`);
+
+	if (readReceiptEnabled) {
+		labels.push(`${messageId}-read-status`);
+	}
+
+	return labels.join(' ');
+};
+
 const RoomMessage = ({
 	message,
 	showUserAvatar,
@@ -58,6 +83,8 @@ const RoomMessage = ({
 	const toggleSelected = useToggleSelect(message._id);
 	const selected = useIsSelectedMessage(message._id);
 
+	const { enabled: readReceiptEnabled } = useMessageListReadReceipts();
+
 	useCountSelected();
 	const messageRef = useJumpToMessage(message._id);
 
@@ -68,7 +95,7 @@ const RoomMessage = ({
 			role='listitem'
 			aria-roledescription={t('message')}
 			tabIndex={0}
-			aria-labelledby={`${message._id}-displayName ${message._id}-time ${message._id}-content ${message._id}-read-status`}
+			aria-labelledby={getAriaLabelledBy({ readReceiptEnabled, messageId: message._id, sequential })}
 			onClick={selecting ? toggleSelected : undefined}
 			isSelected={selected}
 			isEditing={editing}
@@ -101,7 +128,7 @@ const RoomMessage = ({
 			<MessageContainer>
 				{!sequential && <MessageHeader message={message} />}
 				{ignored ? (
-					<IgnoredContent onShowMessageIgnored={toggleDisplayIgnoredMessage} />
+					<IgnoredContent messageId={message._id} onShowMessageIgnored={toggleDisplayIgnoredMessage} />
 				) : (
 					<RoomMessageContent message={message} unread={unread} mention={mention} all={all} searchText={searchText} />
 				)}

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

@@ -70,7 +70,11 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe
 			<MessageContainer>
 				{!sequential && <MessageHeader message={message} />}
 
-				{ignored ? <IgnoredContent onShowMessageIgnored={toggleIgnoring} /> : <ThreadMessageContent message={message} />}
+				{ignored ? (
+					<IgnoredContent messageId={message._id} onShowMessageIgnored={toggleIgnoring} />
+				) : (
+					<ThreadMessageContent message={message} />
+				)}
 			</MessageContainer>
 			{!message.private && <MessageToolbarHolder message={message} context={messageContext} />}
 		</Message>