Toast

Anatomy

• action<button>

  The toast's affordance (Undo, Retry, View). Runs the consumer handler, then dismisses — preventDefault in that handler keeps the toast open. Unlike Close, its label stays in the declarative toast's announcement.

  Uses native semantics

• close<button>

  Dismiss button; closes the toast.

  Uses native semantics

• content<div>

  The visible surface. Standalone it is the [popover=manual] element itself, fixed to the viewport corner; inside Toast.Viewport it drops the popover attribute and is laid out by the viewport, which owns the top layer for the whole stack. role=status names and exposes it as a status region, aria-live=off keeps it silent: a popover is display:none until showPopover(), so announcing from here is exactly the mutation-on-reveal that assistive technology drops. The off-screen announcer — the Root's own when standalone, the Provider's when queued — does the announcing.

  ARIA role: status

• description<div>

  Supporting body text; id wired to content via aria-describedby.

  Uses native semantics

• title<div>

  Primary toast heading; id wired to content via aria-labelledby.

  Uses native semantics

• trigger<button>

  Optional button that opens the toast. Open-only, and no aria-expanded: a toast is a status region, not a disclosure, and auto-dismiss would flip an announced expanded state with no user action.

  Uses native semantics

• viewport<div>

  The positioned region queued toasts render into — APG's notification-landmark shape: role=region with an accessible name (default aria-label "Notifications"), so a screen-reader user can navigate to the messages instead of hunting for them. It carries [popover=manual] for the whole stack and is shown only while a toast is visible; hovering or focusing it takes a Provider-wide WCAG 2.2.1 hold that freezes every queued toast's timer, not only the one under the cursor.

  ARIA role: region