Skip to content

Commit 990152f

Browse files
committed
docs(ButtonGroup): add guidance around toolbar role
1 parent 27c4065 commit 990152f

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

content/components/button-group.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,11 @@ Similarly to buttons, button segments can optionally include an icon and/or a co
7979

8080
## Accessibility
8181

82-
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.
82+
### As toolbar
83+
84+
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.
85+
86+
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.
8387

8488
### Descriptive buttons
8589

0 commit comments

Comments
 (0)