Add group role

packages/css/src/components/action-group/README.md

@@ -11,3 +11,4 @@ Groups one or more related actions and manages their layout.
 - Sighted users will read the primary action first, in line with the natural reading order.
   The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first.
 - Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top.
+- Replace the default ’group’ role with `role="toolbar"` for button toolbars.

packages/react/src/ActionGroup/ActionGroup.test.tsx

@@ -1,40 +1,40 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { ActionGroup } from './ActionGroup'
 import '@testing-library/jest-dom'
 
 describe('Action Group', () => {
   it('renders', () => {
-    const { container } = render(<ActionGroup />)
+    render(<ActionGroup />)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('group')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<ActionGroup />)
+    render(<ActionGroup />)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('group')
 
     expect(component).toHaveClass('ams-action-group')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<ActionGroup className="extra" />)
+    render(<ActionGroup className="extra" />)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('group')
 
     expect(component).toHaveClass('ams-action-group extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<ActionGroup ref={ref} />)
+    render(<ActionGroup ref={ref} />)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('group')
 
     expect(ref.current).toBe(component)
   })

packages/react/src/ActionGroup/ActionGroup.tsx

@@ -11,7 +11,7 @@ export type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const ActionGroup = forwardRef(
   ({ children, className, ...restProps }: ActionGroupProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('ams-action-group', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-action-group', className)} role="group">
       {children}
     </div>
   ),