Feedback
Alert
A message about the page, in place.
Usage
When to reach for it
import { Alert } from '@misoto22/design'Notes
A message about the page, in place.
Carries role="alert" for the danger tone and role="status" for the rest, which is the difference between interrupting the reader and waiting for a pause. Getting that backwards is the usual accessibility failure here: a "saved" toast that talks over someone mid-sentence, or a payment error that is never announced at all.
The tone is the message's SEVERITY, not its decoration. Colour is doubled by an icon and by the words, so the meaning survives both monochrome printing and colour-blindness.
Anatomy
| Element | Description |
|---|---|
| Regionrequired | The container, carrying the role and the aria-live the tone chooses, plus the tone’s ground. It is not focusable and it is not a landmark, so it exists for the reader who is already there and for the announcement. |
| Mark | The tone’s Remix Icon glyph at 18px — RiInformationLine, RiCheckboxCircleLine, RiAlertLine or RiCloseCircleLine — aria-hidden, so it doubles the colour for sighted readers only. hideIcon removes it. |
| Title | title, as a medium-weight paragraph in --ink. A p and not a heading, so it never appears in a screen reader’s heading list. |
| Body | children, in --ink-2 at relaxed leading, offset from the title only when there is a title to offset from. |
| Action | action, below the body and inside the region — so its label is read out with the message rather than being something the reader has to go looking for. |
Best practices
Do
- Mount the Alert when there is something to say and unmount it when there is not. A region kept permanently in the page announces only when its words change, so a second failed submit carrying the same message is announced to nobody.
- Move focus after a failed submit — to the Alert or to the field it names. The component announces and then stays put, so a keyboard reader hears the error from wherever they were standing and has no way back to it.
- Put the retry, the link or the escape in action rather than describing it in the prose. It sits inside the live region, which is the difference between the announcement telling the reader what to do and merely telling them something is wrong.
Don’t
- hideIcon takes away one of the two things that double the colour, and the tinted grounds are 13–16% alpha over paper. With the mark gone the severity is carried by a wash the reader may not resolve at all, so the words have to say it outright.
- info is the default and the only tone with a border and no tint — --paper-2 inside a --rule-2 hairline, which is a card. An Alert written without tone therefore looks like page furniture rather than like a notice.
- Do not stack alerts as a running log. Each one is its own live region, so five on a page are five announcements competing for the same speech queue, and a danger among them is assertive enough to cut off the four that explain it.
Examples
tones
The four tones, in the order they escalate. The tone is the message's severity and not its decoration: danger carries role alert and interrupts whatever the screen reader was saying, because what the reader is doing is already failing, and the other three carry role status and wait for a pause. Colour is doubled by the icon and by the words, so the meaning survives monochrome printing and colour-blindness — which is what hideIcon takes away, leaving the severity on a wash at 13 to 16 per cent alpha. Do not stack them as a running log: five on a page are five live regions competing for one speech queue, and the danger among them cuts off the four that explain it.
Read-only mode
Deployed
Token expires in 6 days
Upload failed
a failed submit
An error that has to persist, with the way out inside it. Put the retry in action rather than describing it in the prose: action sits inside the live region, which is the difference between the announcement telling the reader what to do and merely telling them something is wrong. Mount the Alert when there is something to say and unmount it when there is not — a region kept permanently in the page announces only when its words change, so a second failed submit carrying the same message is announced to nobody. Move focus to it, or to the field it names: it announces and then stays put, so a keyboard reader hears the error from wherever they were standing.
We could not send the invitation
Enter an address we can deliver to.
inside the panel
One panel failed; the rest of the page still works. This is the case a full-screen ErrorState gets wrong — replacing the whole view throws away the navigation the reader needed to get out of it, where an Alert inside the panel keeps both the error and the way past it. Reach for the page-sized state only when the page itself could not be shown. The tone here is warning rather than danger for the same reason: nothing the reader did has failed, and danger is assertive enough to interrupt whatever they were reading elsewhere on the page.
Deploy history
History is unavailable
Types
export type AlertTone = 'info' | 'success' | 'warning' | 'danger'Accessibility
- danger is role="alert" and interrupts; the other three are role="status" and wait for a pause.
- Colour is doubled by an icon and by the words.