From 94c38c1d458d39f3dd43b456ba9fb46a831ff281 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Fri, 8 Nov 2024 12:40:58 -0500 Subject: [PATCH] Update content/components/button-group.mdx Co-authored-by: Patrick H. Lauke --- content/components/button-group.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/components/button-group.mdx b/content/components/button-group.mdx index e8b0cd63b..b436f1687 100644 --- a/content/components/button-group.mdx +++ b/content/components/button-group.mdx @@ -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