Skip to content
This repository was archived by the owner on Jul 7, 2025. It is now read-only.

docs(ButtonGroup): add guidance around toolbar role #888

Merged
francinelucca merged 4 commits into from
Nov 12, 2024
Merged

docs(ButtonGroup): add guidance around toolbar role #888

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
990152f
docs(ButtonGroup): add guidance around toolbar role
francinelucca Nov 1, 2024
94c38c1
Update content/components/button-group.mdx
francinelucca Nov 8, 2024
60aa3ea
Merge branch 'main' of github.com:primer/design into francinelucca/34…
francinelucca Nov 12, 2024
7a8f1b2
Docs(ButtonGroup): add note on PRC implementation and fix todo
francinelucca Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion content/components/button-group.mdx
View file
Open in desktop
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