diff --git a/apps/meteor/client/components/message/IgnoredContent.tsx b/apps/meteor/client/components/message/IgnoredContent.tsx index 9a33d46508b82..8508d58677e5d 100644 --- a/apps/meteor/client/components/message/IgnoredContent.tsx +++ b/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 ( - + ; +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 = ({ {!sequential && } {ignored ? ( - + ) : ( )} diff --git a/apps/meteor/client/components/message/variants/ThreadMessage.tsx b/apps/meteor/client/components/message/variants/ThreadMessage.tsx index 3acb7653ab625..04a93a3d78d52 100644 --- a/apps/meteor/client/components/message/variants/ThreadMessage.tsx +++ b/apps/meteor/client/components/message/variants/ThreadMessage.tsx @@ -70,7 +70,11 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe {!sequential && } - {ignored ? : } + {ignored ? ( + + ) : ( + + )} {!message.private && }