You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
a11y: toast system silent for screen readers — no aria-live/role #270
The global toast system is silent for screen-reader and keyboard users. Every operation feedback in the admin dashboard (approve/reject schedule, reply to comment, upload/delete media, save settings) flows through this component — none of it is announced.
Evidence
web/src/routes/admin/+layout.svelte:185-191 — toast container is a plain <div class="toast-container"> with no aria-live / role.
web/src/lib/toast.svelte.ts — toast items carry only a type (success | error | info); the renderer applies .toast--{type} which differs only by a left border color.
Errors and successes are visually distinguished by color alone → also a WCAG 1.4.1 concern.
Impact
WCAG 4.1.3 Status Messages (fail): SR users never learn the outcome of any action.
Color-only differentiation for error vs success (WCAG 1.4.1).
Fix
Container: role="status" + aria-live="polite".
Error toasts: role="alert" (assertive).
Add a non-color cue per type (icon or text prefix).
Optional: migrate to svelte-sonner (already in package.json, currently unused) if it satisfies the roles.
Acceptance criteria
Toast container exposes a polite live region; error toasts are asserted.
Error/success distinguishable without color.
npm run build + npx svelte-check --threshold error clean.
Activity
fix(web): UX audit remediation #270-#277 (#278)
ajianaz commentedon Sep 20, 2026
Implemented in PR #278 (merged 2026-09-20, commit 57c101f) — UX audit remediation batch.