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

  • error toasts carry role="alert" (assertive — it interrupts); every other type carries role="status" (polite). That split is deliberate: a failure is worth interrupting for, a confirmation is not.
  • The host is role="region" with aria-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 loading toast 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-t in --fg on --surface-100 (--surface-75 in dark) — 17.59:1 light, well clear in dark.
  • Description .toast-d uses the muted tone — 2.85:1 light, below AA; keep it genuinely secondary.
  • Type icons: --positive 3.10:1 light / 5.50:1 dark · --accent 4.44 / 3.83 · --warning 1.80:1 light / 9.45 dark · --critical 3.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