diff --git a/src/app/features/room/thread/ThreadSummary.tsx b/src/app/features/room/thread/ThreadSummary.tsx index 29a44e3ba..22d8ca81c 100644 --- a/src/app/features/room/thread/ThreadSummary.tsx +++ b/src/app/features/room/thread/ThreadSummary.tsx @@ -19,6 +19,18 @@ export function ThreadSummary({ rootEvent, room, onOpen }: ThreadSummaryProps) { const { count, latestTs } = summary; const latestStr = latestTs !== undefined ? format(latestTs) : undefined; + const visibleText = `${count === 1 ? '1 reply' : `${count} replies`}${latestStr ? ` · ${latestStr}` : ''}`; + // #179: the chip was named only by its visible text, so a screen reader never + // heard that it opens the thread, nor about the unread dot / muted bell. Keep + // the visible text first (WCAG 2.5.3, label in name) and add the rest. + const ariaLabel = [ + visibleText, + 'view thread', + unread > 0 ? 'unread replies' : undefined, + mode === ThreadNotificationMode.Mute ? 'muted' : undefined, + ] + .filter(Boolean) + .join(', '); return ( @@ -26,6 +38,7 @@ export function ThreadSummary({ rootEvent, room, onOpen }: ThreadSummaryProps) { variant="SurfaceVariant" radii="300" className={MobileTouchTarget} + aria-label={ariaLabel} before={} after={ unread > 0 ? : undefined @@ -35,10 +48,7 @@ export function ThreadSummary({ rootEvent, room, onOpen }: ThreadSummaryProps) { if (threadId) onOpen(threadId); }} > - - {count === 1 ? '1 reply' : `${count} replies`} - {latestStr ? ` · ${latestStr}` : ''} - + {visibleText} {mode === ThreadNotificationMode.Mute && }