Toast

From the Base UI reference and its source, node_modules/@base-ui/react/toast/. Every key below works while at least one toast is open; with none, the region takes no keys.

Focus leaving the region and the pointer leaving it start the timers again.

A toast is read as it arrives because the region is a polite live region already on the page (CR-2): its title, its sentences, its action's names and "Close", in that order. It interrupts nothing. Toast adds no hidden word for its intent, as Alert adds none: the caller's words say what the colour and the icon show.

With no title, the toast is named by its description, the root's aria-labelledby pointing at the description and its aria-describedby left off: a dialog with no name fails axe's aria-dialog-name rule, which the stories run in error mode, a toast such as "Link copied." often has a sentence and no title, and naming it by the sentence and not describing it by the same sentence reads it once.

The close button is never aria-hidden, where Base UI's Toast.Close hides it from screen readers while the region is neither hovered nor holding focus: Toast sets aria-hidden={false} after Base UI's, since a focusable button inside aria-hidden fails axe's aria-hidden-focus rule, which the stories run in error mode, and a person reading the region with a screen reader, without F6, must find the button that closes a toast that stays; the cost is "Close" read after each toast's words as it arrives.

What axe won't catch, from the contract, each with how this component meets it:

• Everything the eye is told, the ear is told, for every shape each prop accepts: the colour, the tint and the icon repeat what the caller's words say, and the icon is aria-hidden; the color JSDoc asks for words that say the intent, as Alert's does. A toast that hides itself is read by the region as it arrives, so the ear hears it even where the eye looks elsewhere; one that leaves before it is read pauses while focus or the pointer is in the region.
• Every landmark and named region has an accessible name: the region is named "Notifications" from the locale, or PerronProvider's notificationsLabel (CR-3); each toast, a dialog, by its title or its description (CR-9).
• Every default label can be overridden: closeLabel on each Toast, notificationsLabel on PerronProvider for the shared region.
• Every shape the type accepts renders, in every variant: title, children, icon and action each render a string, an element and an array, as Alert's do; icon as null or false renders no icon part.
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: a toast past Base UI's limit is inert and not displayed; a leaving toast is gone from the list once its transition ends, and Toast keeps no copy of its own.
• Native semantics first: Base UI's region and dialog roles, a p for the title, a native <button type="button"> to close, the caller's own button or a href in the action; Toast adds aria-labelledby when there is no title (CR-9) and aria-hidden="false" on the close button (CR-7), and no other ARIA.
• Focus moves in reading order and returns on close: a toast never takes focus when it arrives; F6 reaches the region, Tab walks the toasts from the top, as they stand, newest first, and inside each its action, then its close button, as on screen; closing a focused toast moves focus to the next toast, or to the one before it when it was the last, or back to where it was before F6 (Base UI).
• Every target is at least size.target-min square: the close button is size.control, 34 px; the action's targets are the caller's components, a small Button size.button-sm.
• Loops stop when the system asks for less motion: none here; the slide in and out is a transition on duration.toast, which the token's reduced-motion value takes to 0.01 ms.

Toast owns the close button's name, the key en.ts has, and the region's name, a new key. Every other word comes from the caller, through title, children and action, and the icon is hidden from screen readers.

The region's name is the new owned key notifications, "Notifications", overridden by a notificationsLabel prop on PerronProvider, which renders the one region, and not on Toast: Base UI's viewport names itself "Notifications" in English in every locale, so Perron replaces it with the locale's word; the region is shared, so a prop on one toast would rename it for every other; and the contract asks for a *Label override for every owned string, which PerronProvider, the region's owner, takes. A Toast with no PerronProvider names its own region with the English word, as every owned string reads without a provider.

For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.