Toast — accessibility
Keyboard
- The close button and the action button are real
<button>s, so Tab reaches them. - But the toast appears without moving focus, and it lives at the end of the DOM: a keyboard user who wants the undo has to tab past the rest of the page to reach it, usually within the four seconds before it disappears. Treat the action as a convenience, never as the only way to undo.
- The host is
pointer-events: none; each toast re-enables them, so the page underneath stays clickable. - There is no shortcut to focus or dismiss the stack.
ARIA
errortoasts carryrole="alert"(assertive — it interrupts); every other type carriesrole="status"(polite). That split is deliberate: a failure is worth interrupting for, a confirmation is not.- The host is
role="region"witharia-label="Oznámení", so the stack is findable as a landmark. - The icon is decorative; the title and description are the announced content.
- The close button is labelled
Zavřít. - A
loadingtoast that later resolves re-renders as a new type; the polite region announces the new title.
Focus
- Both buttons take the foundation ring from
ds.css(outline: 2px solid var(--accent); outline-offset: 1px). - Focus is never stolen and never restored — nothing to restore, since nothing was taken.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- Title
.toast-tin--fgon--surface-100(--surface-75in dark) — 17.59:1 light, well clear in dark. - Description
.toast-duses the muted tone — 2.85:1 light, below AA; keep it genuinely secondary. - Type icons:
--positive3.10:1 light / 5.50:1 dark ·--accent4.44 / 3.83 ·--warning1.80:1 light / 9.45 dark ·--critical3.91 / 4.35. The warning icon in the light theme is far under the 3:1 non-text threshold, so the icon never carries the meaning alone — the words do.
Known limits
- Four seconds is below the WCAG 2.2.1 expectation for timed content, and there is no user setting to extend it. Hovering pauses, which does not help a keyboard-only user.
- The action is hard to reach from the keyboard before the toast goes.
- The warning icon is effectively invisible in the light theme.
- Three simultaneous polite regions can queue up and read one after another.
Source: docs/toast/toast.a11y.md · GitLab