- StatusBadge is a plain
<span>; it has no role and is not interactive. The status text is always visible and read.
- The icon is decorative (
aria-hidden); screen readers get only the text. Neither colour nor icon carries the meaning alone.
- With
announce, a hidden region with role="status" and aria-live="polite" is added next to the badge. It exists on the page together with the badge; when the status changes its text updates and screen readers announce it politely.
announce is off by default, so hundreds of badges in a table do not all announce. Turn it on only for single statuses that change without a user action, such as a background job.
| Key |
Behaviour |
| Tab |
The badge takes no focus; it is not in the tab order. |
The badge is not interactive, so it has no focus ring. A control that changes the status, such as a Button, carries its own focus.
| Example |
Read |
| Badge |
“Approved” |
Status change with announce |
“Approved” (a polite announcement; it waits if speech is in progress) |
| Unknown code |
“on-hold” (the raw code; add it to the vocabulary) |
Text is at least 4.5:1 in every brand and mode; values are computed from the bigbang and fixture token output. The lowest value of the six tones is given below.
| Pair |
Light mode |
Dark mode |
subtle: color-status-*-foreground / color-status-*-background (lowest) |
6.46:1 (warning) |
7.19:1 (danger) |
bold: color-status-*-on-emphasis / color-status-*-emphasis (lowest) |
4.72:1 (warning) |
5.88:1 (info) |
Every tone is above the 4.5:1 threshold in both modes.
| Criterion |
How StatusBadge meets it |
What the product team does |
| 1.3.1 Info and relationships |
The status is given as text. |
Place the badge near its record; in a table, in the row’s cell. |
| 1.4.1 Use of colour |
The text is always there; tone and icon support it. |
Do not hide the text. |
| 1.4.3 Contrast (minimum) |
Every tone is at least 4.72:1. |
Do not add custom colours; use the status vocabulary. |
| 4.1.3 Status messages |
announce announces a status change politely. |
Turn on announce for statuses that change without a user action. |
| 2.3.3 Animation from interactions |
Only a very short fade; it also works with reduced motion. |
Do not add more motion. |