Toast

Accessibility

Import toast, Toaster, ToastPosition, ToastSeverity from @prepared911/ui/toast.

Region. The stack is a landmark named by label and a polite live region. A routine toast (default, info, success, warning) is announced when it is added.
Failures interrupt. An error toast also renders its text in a role="alert" element, so it is announced assertively. Politeness follows severity and is not a prop. Some assistive technology may read an error toast twice, once from each live region.
Reaching a toast. A toast that disappears before it can be read fails the review. The clock stops while the pointer is over the stack and while focus is inside it, and it stops while the document is hidden. Alt+T moves focus to the newest toast, Tab reaches its action and close button, and focus inside the stack spreads it out the way hover does so a toast stacked behind the newest is visible when focus lands on it. A toast past visibleToasts is never shown, so it is inert: it leaves the tab order and the accessibility tree as soon as sonner marks it, with or without motion, and Escape on a focused toast dismisses it and returns focus to where it was. The Escape does not reach a dialog that hosts the stack.
Names. The region, the close button, and the action are named by props. Nothing in the component is English.
Above a modal. While a modal dialog or drawer is open the stack lives inside it, so it is not inert and screen readers still reach its live region.
Motion. The slide, fade, and stack transitions are sonner's. Under prefers-reduced-motion sonner removes all of them, so a toast appears and leaves in place. The text state fade in the body uses --motion-glide-state.
Forced colors. The surface keeps a CanvasText border and drops its shadow. The severity is carried by the icon's shape, not only its color.
RTL. The stack mirrors its start and end corners, and the close button sits at the inline end.
Focus ring. A focused toast shows the design-system focus ring on its surface on :focus-visible.

Toast / API and Development

Toggle Group / Usage

Toast

Accessibility

Import toast, Toaster, ToastPosition, ToastSeverity from @prepared911/ui/toast.

Region. The stack is a landmark named by label and a polite live region. A routine toast (default, info, success, warning) is announced when it is added.
Failures interrupt. An error toast also renders its text in a role="alert" element, so it is announced assertively. Politeness follows severity and is not a prop. Some assistive technology may read an error toast twice, once from each live region.
Reaching a toast. A toast that disappears before it can be read fails the review. The clock stops while the pointer is over the stack and while focus is inside it, and it stops while the document is hidden. Alt+T moves focus to the newest toast, Tab reaches its action and close button, and focus inside the stack spreads it out the way hover does so a toast stacked behind the newest is visible when focus lands on it. A toast past visibleToasts is never shown, so it is inert: it leaves the tab order and the accessibility tree as soon as sonner marks it, with or without motion, and Escape on a focused toast dismisses it and returns focus to where it was. The Escape does not reach a dialog that hosts the stack.
Names. The region, the close button, and the action are named by props. Nothing in the component is English.
Above a modal. While a modal dialog or drawer is open the stack lives inside it, so it is not inert and screen readers still reach its live region.
Motion. The slide, fade, and stack transitions are sonner's. Under prefers-reduced-motion sonner removes all of them, so a toast appears and leaves in place. The text state fade in the body uses --motion-glide-state.
Forced colors. The surface keeps a CanvasText border and drops its shadow. The severity is carried by the icon's shape, not only its color.
RTL. The stack mirrors its start and end corners, and the close button sits at the inline end.
Focus ring. A focused toast shows the design-system focus ring on its surface on :focus-visible.

Toast / API and Development

Toggle Group / Usage