Skip to content

Commit

Permalink
Update content/components/button-group.mdx
Browse files Browse the repository at this point in the history
Co-authored-by: Patrick H. Lauke <[email protected]>
  • Loading branch information
francinelucca and patrickhlauke authored Nov 8, 2024
1 parent 990152f commit 94c38c1
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion content/components/button-group.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ Similarly to buttons, button segments can optionally include an icon and/or a co

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.
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.

When `role="toolbar"` is used, individual buttons aren't separately focusable. Instead, only one button receives focus, and users switch between all buttons in the toolbar using the cursor keys. This behavior is baked into the component.

### Descriptive buttons

Expand Down

0 comments on commit 94c38c1

Please sign in to comment.