Feedback

Alert

Inline messaging for things that warrant attention but do not need a modal. Five tones, an optional title, and a close button when the alert can be closed. Use Toast for feedback that floats over the page instead of sitting in the reading order.

A confirmation clears itself

A warning and a failure stay until they are dismissed, because the reader has to act on them. A confirmation does not: it reports something that already happened, and left on screen it stops reading as an outcome and starts reading as a description of the page.

Pass autoDismiss wherever the alert reports the outcome of a submit. It holds for five seconds and closes itself, and it carries a close button so nobody has to wait. The timer stops while the pointer is over the alert or focus is inside it, so text is never pulled away from somebody reading it.

Leave it off where a success tone states a standing condition rather than an outcome. "MFA is enabled" does not stop being true after five seconds.

The alert owns whether it is on screen. An outcome alert lives inside {#if form} in the page that submitted, and nothing clears a form result short of a navigation, so a callback into the page would have nothing to act on. ondismiss still fires, for a page that wants to know.

A result that stays on screen

Some results replace what the reader was working on, such as a confirmation that takes the place of the form that sent it, or a status that a poll updates. Clearing one of those would leave the page empty. Pass announce instead. The alert reads its message out when it appears, and every change to it after, and stays until the page removes it.

Which live region it is

The tone and two props decide. Without autoDismiss a failure and a warning take role="alert" and interrupt whatever is being read, because the reader has to act.

An alert that reports an outcome, one given autoDismiss or announce, is a polite region. It carries aria-live="polite" and no role, and waits for a pause. Its text arrives two frames after it mounts, so an alert rendered inside {#if form} with its text already in it is still a change a screen reader reads out. The region is atomic, so a change reads the whole message. An alert given autoDismiss waits for a pause whatever its tone, because an assertive alert that clears itself would interrupt to say something and then take it away.

Any other alert states a standing condition and is no live region. A page that shows one, on load or after a client-side navigation, reads nothing out.

Tones

Dismissible by hand

API