diff --git a/apps/webapp/src/i18n/en-US.json b/apps/webapp/src/i18n/en-US.json index a434345d77c..daa4aaf177e 100644 --- a/apps/webapp/src/i18n/en-US.json +++ b/apps/webapp/src/i18n/en-US.json @@ -111,6 +111,7 @@ "accessibility.conversationDetailsActionGroupAdminLabel": "Set group admin", "accessibility.conversationDetailsActionNotificationsLabel": "Show notifications settings", "accessibility.conversationDetailsCloseLabel": "Close image details view", + "accessibility.conversationMuted": "Muted", "accessibility.conversationOptionsMenu": "Open conversation options", "accessibility.conversationOptionsMenuAccessKey": "Use right arrow key to focus on the conversation options menu", "accessibility.conversationStatusMuted": "Muted conversation", diff --git a/apps/webapp/src/script/components/ConversationListCell/ConversationListCell.tsx b/apps/webapp/src/script/components/ConversationListCell/ConversationListCell.tsx index b6177654a0a..de5746ec737 100644 --- a/apps/webapp/src/script/components/ConversationListCell/ConversationListCell.tsx +++ b/apps/webapp/src/script/components/ConversationListCell/ConversationListCell.tsx @@ -104,6 +104,21 @@ export const ConversationListCell = ({ const [focusContextMenu, setContextMenuFocus] = useState(false); const [isContextMenuOpen, setContextMenuOpen] = useState(false); const contextMenuKeyboardShortcut = `keyboard-shortcut-${conversation.id}`; + const unreadMessagesCount = unreadState.allMessages.length; + const isMutedConversation = !conversation.showNotificationsEverything(); + const accessibilityParts = [displayName]; + + if (unreadMessagesCount > 0) { + accessibilityParts.push(`${unreadMessagesCount} ${t('conversationLabelUnread')}`); + } + + if (isMutedConversation) { + accessibilityParts.push(t('accessibility.conversationMuted')); + } + + const accessibilityConversationLabel = `${accessibilityParts.join(', ')}. ${t('accessibility.openConversation', { + name: displayName, + })}`; // Ref for immediate synchronous protection from multiple clicks const isJoiningCallRef = useRef(false); @@ -133,7 +148,7 @@ export const ConversationListCell = ({ await onJoinCall(conversation, MediaType.AUDIO); isJoiningCallRef.current = false; }); - } catch (error: unknown) { + } catch { // Re-enable on error isJoiningCallRef.current = false; } @@ -196,7 +211,7 @@ export const ConversationListCell = ({ onKeyDown={handleDivKeyDown} data-uie-name="go-open-conversation" tabIndex={isFocused ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE} - aria-label={t('accessibility.openConversation', {name: displayName})} + aria-label={accessibilityConversationLabel} aria-describedby={contextMenuKeyboardShortcut} > diff --git a/apps/webapp/src/script/components/ConversationListCell/components/StatusIcon/StatusIcon.tsx b/apps/webapp/src/script/components/ConversationListCell/components/StatusIcon/StatusIcon.tsx index 5d5d418a8a9..675618ca3d2 100644 --- a/apps/webapp/src/script/components/ConversationListCell/components/StatusIcon/StatusIcon.tsx +++ b/apps/webapp/src/script/components/ConversationListCell/components/StatusIcon/StatusIcon.tsx @@ -97,6 +97,7 @@ export const StatusIcon = ({conversation}: Props) => { className="conversation-list-cell-badge cell-badge-light conversation-muted" data-uie-name="status-silence" title={t('accessibility.conversationStatusMuted')} + aria-hidden="true" > diff --git a/apps/webapp/src/types/i18n.d.ts b/apps/webapp/src/types/i18n.d.ts index 4f45efda108..b26a240c729 100644 --- a/apps/webapp/src/types/i18n.d.ts +++ b/apps/webapp/src/types/i18n.d.ts @@ -115,6 +115,7 @@ declare module 'I18n/en-US.json' { 'accessibility.conversationDetailsActionGroupAdminLabel': `Set group admin`; 'accessibility.conversationDetailsActionNotificationsLabel': `Show notifications settings`; 'accessibility.conversationDetailsCloseLabel': `Close image details view`; + 'accessibility.conversationMuted': `Muted`; 'accessibility.conversationOptionsMenu': `Open conversation options`; 'accessibility.conversationOptionsMenuAccessKey': `Use right arrow key to focus on the conversation options menu`; 'accessibility.conversationStatusMuted': `Muted conversation`;