Toast

Toast notifications display brief, auto-dismissing messages in the corner of the screen.

Keyboard interaction

Key	Action
`Tab`	Moves focus to the dismiss (×) button on a visible toast.
`Enter / Space`	Activates the focused dismiss button, removing the toast and emitting the dismiss event.
`Escape`	No built-in binding — consider adding an application-level escape handler to dismiss the top-most persistent toast.

Attribute / Property	Value / Behaviour
`aria-live="polite" (host)`	Declares the toast container as a live region. Screen readers announce new messages when the user is idle.
`aria-atomic="false" (host)`	Allows screen readers to announce each individual toast as it appears rather than re-reading the whole region.
`role="status" (diwa-toast-item)`	Marks each individual toast as a status region, providing a secondary live region announcement.
`aria-live="polite" (diwa-toast-item)`	Redundant polite live region on each item for maximum screen-reader compatibility across browsers.
`aria-label="Dismiss notification" (close button)`	Provides an accessible name for the icon-only dismiss button.

✓

1.4.3 Contrast (Minimum) — AAPass

Toast text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the panel background in both themes.

✓

1.4.11 Non-text Contrast — AAPass

The panel border (--diwa-border) is validated to have ≥ 3:1 contrast against adjacent surface colours.

✓

2.1.1 Keyboard — APass

The dismiss button is reachable via Tab and activatable with Enter or Space.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the dismiss button via :focus-visible.

✓

4.1.3 Status Messages — AAPass

aria-live="polite" on the container creates a live region so screen readers announce new toasts without stealing focus.

One singleton per app — place a single <diwa-toast> in your root layout. Multiple instances will each render their own live region, causing duplicate announcements.
Persistent toasts — when duration: 0 is set, the toast remains until the user dismisses it. Always use this for error states so users do not miss failure feedback.
Focus management — the toast does not steal focus when it appears, which is the correct pattern for non-blocking notifications. The dismiss button is reachable via Tab.
Motion — the slide-in animation is declared with a CSS keyframe animation. Respect the user's prefers-reduced-motion preference in your global styles if motion is a concern.