Role and semantics
Section titled “Role and semantics”ButtonGroup renders a <div> with role="group". With label the group is named through aria-label; without it the group has no name and screen readers read only the buttons.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves focus to each button in the group in turn. |
| Enter, Space | Runs the focused button. |
| Arrow keys | Not used. For arrow-key navigation use ToggleGroup. |
The focus ring comes from the buttons. In an attached group the focused button takes z-index: 1, so the ring is not hidden under the next button.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
First button inside <ButtonGroup label="Pages"> |
“Pages, group”, then “Previous, button” |
Without label |
Only “Previous, button” |
Contrast
Section titled “Contrast”ButtonGroup adds no colour. In an attached group the shared border between buttons is the color-border-default border of the secondary button.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How ButtonGroup meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | role="group" and an optional aria-label. |
Give a label to buttons that make sense together. |
| 2.4.3 Focus order | Buttons take focus in DOM order. | Do not change the visual order with CSS. |
| 2.4.7 Focus visible | The focused button comes to the front. | Do not set z-index through className. |
| 2.5.8 Target size (minimum) | Buttons are at least 32 px high. | Use buttons of one size. |