Skip to content

Commit

Permalink
docs(ButtonGroup): add guidance around toolbar role
Browse files Browse the repository at this point in the history
  • Loading branch information
francinelucca committed Nov 1, 2024
1 parent 27c4065 commit 990152f
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion content/components/button-group.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,11 @@ Similarly to buttons, button segments can optionally include an icon and/or a co

## Accessibility

A button group does not behave like a [toolbar](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role), so assistive technologies still interpret the buttons as unrelated. The grouping is purely visual.
### As toolbar

By default, a button group does not behave like a [toolbar](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role), so assistive technologies still interpret the buttons as unrelated. The grouping is purely visual.

If you want to make the button group behave like a toolbar, you can add the `role="toolbar"` prop to the `ButtonGroup` component; this will communicate the appropriate role to assistive technologies. Toolbar keyboard interactions are baked in as well when the toolbar role is supplied.

### Descriptive buttons

Expand Down

0 comments on commit 990152f

Please sign in to comment.