a11y/toast-timing

Why

A toast that offers "Undo" for five seconds is gone before a screen reader user hears it and finds the button, and before a magnifier user scrolls to it. The APG has no toast pattern; the rules come from the alert pattern and WCAG 2.2.1 and 4.1.3.

Fix

Announce toasts through one live region that is always present (role="status", role="alert" for errors). Do not auto-dismiss toasts that have a button or carry information the user must act on; keep them until closed. For short confirmations, show them for at least several seconds, pause the timer on hover and focus, and keep a close button. Never move focus into a toast; offer a keyboard path to its action (for example the same action in the page, or a documented shortcut).

Examples

// good: an undo toast stays until closed or used
showToast({ text: 'Message deleted', action: { label: 'Undo', run: undo }, timeout: null })

Sources

• WCAG 2.2, Understanding SC 2.2.1 Timing Adjustable
• WAI-ARIA Authoring Practices, Alert pattern

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/toast-timing