From b76943922931f23fdc88038cc1bd9c730e249cc4 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 21 Jul 2026 23:13:53 +0200
Subject: [PATCH] a11y(toaster): announce toasts to screen readers (U-F)

The toast is the app's main feedback channel but had no live region, so a screen
reader never spoke it. Each toast now carries role + aria-live by severity:
error/fatal interrupt (alert/assertive), everything else waits its turn
(status/polite).
---
 frontend/src/components/Toaster.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/Toaster.tsx b/frontend/src/components/Toaster.tsx
index 3f598678..bf0e3c54 100644
--- a/frontend/src/components/Toaster.tsx
+++ b/frontend/src/components/Toaster.tsx
@@ -19,9 +19,14 @@ export default function Toaster() {
     <div className="absolute bottom-4 left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
       {toasts.map((toast) => {
         const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
+        const urgent = toast.level === "error" || toast.level === "fatal";
         return (
           <div
             key={toast.id}
+            // Announce toasts to screen readers — the toast is the app's main feedback channel.
+            // Errors interrupt (assertive/alert); everything else waits its turn (polite/status).
+            role={urgent ? "alert" : "status"}
+            aria-live={urgent ? "assertive" : "polite"}
             className="toast-card glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
           >
             <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />