a11y: toast system silent for screen readers — no aria-live/role

[ajianaz]

Summary

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.

Source: Titen UX audit 2026-09-20 (finding H1).

[ajianaz]

Implemented in PR #278 (merged 2026-09-20, commit 57c101f) — UX audit remediation batch.