Role and semantics
Section titled “Role and semantics”EmptyState is a heading (headingLevel, h2 by default), a paragraph and actions; it is not a landmark or a live region. The icon and illustration are decorative and not read.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves to the actions. |
EmptyState takes no focus. Managing focus after filters are cleared or an item is added is up to the app.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Title | “No results found, heading level 2” |
| Action | “Clear filters, button” |
Contrast
Section titled “Contrast”The title reaches at least 4.5:1 and the description in color-text-subtle at least 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How EmptyState meets it | What product teams do |
|---|---|---|
| 1.3.1 Info and relationships | A real heading and paragraph. | Fit headingLevel to the page outline. |
| 1.1.1 Non-text content | The icon is hidden; an illustration needs alt="". |
Do not put meaning in the illustration. |
| 4.1.3 Status messages | It has no role. | Announce the result count after a search separately. |