♿️(frontend) improve chat a11y for screen readers

Chat messages announced via role="log" when open, toast+announce when closed.

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 
 - ♿️(frontend) sync html lang attribute with i18n for screen readers #1111
 - ♿️(frontend) improve MoreLink a11y and UX on home page #1112
+- ♿(frontend) improve chat toast a11y for screen readers #1109
 
 ## [1.10.0] - 2026-03-05
 

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -18,10 +18,15 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { layoutStore } from '@/stores/layout'
+import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
   const { triggerNotificationSound } = useNotificationSound()
+  const { t } = useTranslation('notifications')
+  const announce = useScreenReaderAnnounce()
 
   const [reactions, setReactions] = useState<Reaction[]>([])
   const instanceIdRef = useRef(0)
@@ -41,12 +46,21 @@ export const MainNotificationToast = () => {
         },
         { timeout: NotificationDuration.MESSAGE }
       )
+      if (layoutStore.activePanelId !== PanelId.CHAT) {
+        announce(
+          t('chatMessageReceived', {
+            name: participant.name || t('defaultName'),
+            message: chatMessage.message,
+          }),
+          'polite'
+        )
+      }
     }
     room.on(RoomEvent.ChatMessage, handleChatMessage)
     return () => {
       room.off(RoomEvent.ChatMessage, handleChatMessage)
     }
-  }, [room, triggerNotificationSound])
+  }, [room, triggerNotificationSound, announce, t])
 
   const handleEmoji = (emoji: string, participant: Participant) => {
     if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -151,7 +151,12 @@ export function Chat({ ...props }: ChatProps) {
         minHeight={0}
         overflowY="scroll"
       >
-        <ul className="lk-list lk-chat-messages" ref={ulRef}>
+        <ul
+          className="lk-list lk-chat-messages"
+          ref={ulRef}
+          role="log"
+          aria-relevant="additions"
+        >
           {renderedMessages}
         </ul>
       </Div>

src/frontend/src/locales/de/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} hat dein Mikrofon stummgeschaltet. Kein Teilnehmer kann dich hören.",
   "openChat": "Chat öffnen",
+  "chatMessageReceived": "{{name}} sagt: {{message}}",
   "lowerHand": {
     "auto": "Es scheint, dass du angefangen hast zu sprechen, daher wird deine Hand gesenkt.",
     "dismiss": "Hand oben lassen"

src/frontend/src/locales/de/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "{{content}} ausblenden"
   },
   "chat": {
-    "disclaimer": "Die Nachrichten sind nur für Teilnehmer zum Zeitpunkt des Sendens sichtbar. Alle Nachrichten werden am Ende des Anrufs gelöscht."
+    "disclaimer": "Die Nachrichten sind nur für Teilnehmer zum Zeitpunkt des Sendens sichtbar. Alle Nachrichten werden am Ende des Anrufs gelöscht.",
+    "messagesLog": "Chat-Nachrichten"
   },
   "moreTools": {
     "body": "Greifen Sie auf weitere Tools zu, um Ihre Meetings zu verbessern.",

src/frontend/src/locales/en/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} has muted your microphone. No participant can hear you.",
   "openChat": "Open chat",
+  "chatMessageReceived": "{{name}} says: {{message}}",
   "lowerHand": {
     "auto": "It seems you have started speaking, so your hand will be lowered.",
     "dismiss": "Keep hand raised"

src/frontend/src/locales/en/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "Hide {{content}}"
   },
   "chat": {
-    "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
+    "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call.",
+    "messagesLog": "Chat messages"
   },
   "moreTools": {
     "body": "Access more tools to enhance your meetings.",

src/frontend/src/locales/fr/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} a coupé votre micro. Aucun participant ne peut l'entendre.",
   "openChat": "Ouvrir le chat",
+  "chatMessageReceived": "{{name}} dit : {{message}}",
   "lowerHand": {
     "auto": "Il semblerait que vous ayez pris la parole, donc la main va être baissée.",
     "dismiss": "Laisser la main levée"

src/frontend/src/locales/fr/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "Masquer {{content}}"
   },
   "chat": {
-    "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
+    "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel.",
+    "messagesLog": "Messages du chat"
   },
   "moreTools": {
     "body": "Accèder à d'avantage d'outils pour améliorer vos réunions.",

src/frontend/src/locales/nl/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} heeft uw microfoon gedempt. Deelnemers kunnen u niet horen.",
   "openChat": "Open chat",
+  "chatMessageReceived": "{{name}} zegt: {{message}}",
   "lowerHand": {
     "auto": "Het lijkt erop dat u bent begonnen te spreken, dus we laten uw hand zakken.",
     "dismiss": "Houdt uw hand opgestoken"

src/frontend/src/locales/nl/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "Verberg {{content}}"
   },
   "chat": {
-    "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek."
+    "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek.",
+    "messagesLog": "Chatberichten"
   },
   "moreTools": {
     "body": "Je krijgt toegang tot meer tools om je vergaderingen te verbeteren.",