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([]) 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" > -