From 191f8abbcc4ff1d8851e3c2bb5c9b460be5591f4 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 6 Mar 2026 14:57:05 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20chat?=
 =?UTF-8?q?=20a11y=20for=20screen=20readers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chat messages announced via role="log" when open, toast+announce when closed.
---
 CHANGELOG.md                                     |  1 +
 .../notifications/MainNotificationToast.tsx      | 16 +++++++++++++++-
 .../src/features/rooms/livekit/prefabs/Chat.tsx  |  7 ++++++-
 src/frontend/src/locales/de/notifications.json   |  1 +
 src/frontend/src/locales/de/rooms.json           |  3 ++-
 src/frontend/src/locales/en/notifications.json   |  1 +
 src/frontend/src/locales/en/rooms.json           |  3 ++-
 src/frontend/src/locales/fr/notifications.json   |  1 +
 src/frontend/src/locales/fr/rooms.json           |  3 ++-
 src/frontend/src/locales/nl/notifications.json   |  1 +
 src/frontend/src/locales/nl/rooms.json           |  3 ++-
 11 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b9e0110..fff8d12f 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx
index 89e8e4be..758a1389 100644
--- a/src/frontend/src/features/notifications/MainNotificationToast.tsx
+++ b/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
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx b/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
index 981deeb7..90d43eb9 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx
+++ b/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>
diff --git a/src/frontend/src/locales/de/notifications.json b/src/frontend/src/locales/de/notifications.json
index 049c00f7..4c9e9216 100644
--- a/src/frontend/src/locales/de/notifications.json
+++ b/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"
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 6452bd2c..d2f32d34 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/en/notifications.json b/src/frontend/src/locales/en/notifications.json
index 2e0a264c..665bb94d 100644
--- a/src/frontend/src/locales/en/notifications.json
+++ b/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"
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index a2a79ee8..e4ae4b41 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/fr/notifications.json b/src/frontend/src/locales/fr/notifications.json
index 0b3bd8e4..28a65e5f 100644
--- a/src/frontend/src/locales/fr/notifications.json
+++ b/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"
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 95c4f514..548ac4c0 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/nl/notifications.json b/src/frontend/src/locales/nl/notifications.json
index 116fe94f..74778286 100644
--- a/src/frontend/src/locales/nl/notifications.json
+++ b/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"
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index bbc612e9..a0a1fca9 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/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.",