fix(ButtonGroup): add toolbar interactions for role toolbar

.changeset/slow-news-love.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(ButtonGroup): add toolbar interactions for role toolbar

e2e/components/ButtonGroup.test.ts

@@ -86,4 +86,32 @@ test.describe('ButtonGroup', () => {
       })
     }
   })
+
+  test.describe('As Toolbar', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--as-toolbar',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.As Toolbar.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--as-toolbar',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx

@@ -73,3 +73,11 @@ export const DropdownSplit = () => {
     </ButtonGroup>
   )
 }
+
+export const AsToolbar = () => (
+  <ButtonGroup role="toolbar">
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+  </ButtonGroup>
+)

packages/react/src/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,58 @@
+import {Button} from '../Button'
+import {render, screen, fireEvent} from '@testing-library/react'
+import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
+import {behavesAsComponent} from '../utils/testing'
+import type {ButtonGroupProps} from './ButtonGroup'
+import ButtonGroup from './ButtonGroup'
+import React from 'react'
+
+const TestButtonGroup = (props: ButtonGroupProps) => (
+  <ButtonGroup {...props}>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+  </ButtonGroup>
+)
+
+describe('ButtonGroup', () => {
+  behavesAsComponent({
+    Component: TestButtonGroup,
+    options: {skipSx: true, skipAs: true},
+  })
+
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <ButtonGroup className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
+  it('renders a <div>', () => {
+    const container = render(<ButtonGroup data-testid="button-group" />)
+    expect(container.getByTestId('button-group').tagName).toBe('DIV')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = render(<TestButtonGroup />)
+    const results = await axe.run(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should respect role prop', () => {
+    render(<ButtonGroup role="toolbar" />)
+    expect(screen.getByRole('toolbar')).toBeInTheDocument()
+  })
+})

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -7,6 +7,9 @@ import classes from './ButtonGroup.module.css'
 import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
+import {FocusKeys, useFocusZone, type FocusZoneHookSettings} from '../hooks/useFocusZone'
+import {useProvidedRefOrCreate} from '../hooks'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 const StyledButtonGroup = toggleStyledComponent(
   'primer_react_css_modules_team',
@@ -73,24 +76,39 @@ const StyledButtonGroup = toggleStyledComponent(
   `,
 )
 
-export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>
+export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup> & {
+  /**
+   * Settings to apply to the Focus Zone on the ButtonGroup container component. This is only used when role="toolbar" is supplied.
+   */
+  focusZoneSettings?: Partial<FocusZoneHookSettings>
+}
 const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
-  {children, className, ...rest},
+  {children, className, role, focusZoneSettings, ...rest},
   forwardRef,
 ) {
   const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
+
+  useFocusZone({
+    containerRef: buttonRef,
+    disabled: role !== 'toolbar',
+    bindKeys: FocusKeys.ArrowHorizontal,
+    ...focusZoneSettings,
+  })
+
   return (
     <StyledButtonGroup
-      ref={forwardRef}
+      ref={buttonRef}
       className={clsx(className, {
         [classes.ButtonGroup]: enabled,
       })}
+      role={role}
       {...rest}
     >
       {children}
     </StyledButtonGroup>
   )
-})
+}) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>
 
 ButtonGroup.displayName = 'ButtonGroup'