Accessibility
What the components do for you, and what you still have to do yourself.
Focus
Every control that takes focus draws the same ring: 2px of #4688EC, offset by 2px, outside the box so nothing shifts. Tab through these.
Labels
An icon button takes a label and renders it as aria-label. A field takes a label element tied to it by id.
What the components handle
| Behaviour | Where |
|---|---|
| Escape closes the layer | Modal, drawer, popup, dropdown menu. |
| A click outside closes the layer | Popup, dropdown menu, and the blanket under a modal or drawer. |
| aria-current marks the current item | Rail, tabs, pagination, breadcrumbs. |
| aria-expanded on a disclosure | Dropdown menu, accordion, table tree. |
| role and aria-modal on a dialog | Modal, drawer. |
| Live values announced | Progress bar, meter, spinner. |
What you still have to do
| Yours | Why |
|---|---|
| Give every icon button a label | The component renders it, but only you know the action. |
| Tie a label to its field | htmlFor and id, or an aria-label where no visible label exists. |
| Write the error, not just the state | An invalid field is drawn red. The message says what to fix. |
| Keep focus order the reading order | The components do not reorder the DOM. Your layout can. |