Alert

The alert takes no focus and has no keys of its own. The caller's action and the close button are reached in reading order; Esc does nothing, since an inline message is not a layer that closes (Accessibility, Keys).

The root carries role="status" by default, for every color, unless the caller gives a role, so a caller can pass role="alert" for a danger message that stops the task the person is in; it is never alert by default. Accessibility asks for a polite live region that announces changes of state only, a status on a message present when the page loads is not read out and does no harm, a message whose words change while it stays mounted is read once, politely, and an alert on every danger message would interrupt whatever the person is hearing. A message added to the page with its words already in it is not reliably announced by a status (DataStatePanel keeps its region mounted for that reason), so CR-8 tells the caller what to do when one must be heard as it appears.

Alert adds no hidden word for its intent, such as "Warning" before the title; the caller's words say what the colour and the icon show, as Tag's and EmptyState's do: content design asks for plain sentences that say what is happening, a title such as "Could not load departures" already says it failed, and a fixed word before it would be read on every message, in four languages, and repeat what the sentence says ("Warning: Signal fault …").

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 and CR-2 ask for words that say the intent, and the stories hold to it. In forced colours the tint goes, and the edge, the icon's shape and the words stay.
• Every landmark and named region has an accessible name: none here; a status is a live region, not a landmark, and needs no name.
• Every default label can be overridden: closeLabel.
• Every shape the type accepts renders, in every variant: title, children, icon and action each render a string, an element and an array; description and action are divs, so block content such as a list is valid inside them, and the title takes phrasing content as a p or a heading does; icon as null or false renders no icon part (CR-3).
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses.
• Native semantics first: a p for the title, made a native h2 to h6 through render; the close button is a native <button type="button">; the action holds the caller's own button or a href; the one ARIA is the root's role="status", which no element says.
• Focus moves in reading order and returns on close: the action follows the sentences and the close button comes last, in the DOM and in the tab order; Alert never moves focus when it appears, and once the caller removes it in onClose the caller moves focus to the element before it (CR-7).
• 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; nothing moves.

Alert owns one word, the close button's name, and reuses the key en.ts has, whose JSDoc already reads "A button that closes a dialog, panel or notice." Every other word comes from the caller, through title, children and action, and the icon is hidden from screen readers.

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.