diff --git a/packages/css/src/components/action-group/README.md b/packages/css/src/components/action-group/README.md
index 7a58c08583..6f4be7918f 100644
--- a/packages/css/src/components/action-group/README.md
+++ b/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.
diff --git a/packages/react/src/ActionGroup/ActionGroup.test.tsx b/packages/react/src/ActionGroup/ActionGroup.test.tsx
index 129f3cf555..9af11a0a67 100644
--- a/packages/react/src/ActionGroup/ActionGroup.test.tsx
+++ b/packages/react/src/ActionGroup/ActionGroup.test.tsx
@@ -1,30 +1,30 @@
-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()
+ render()
- 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()
+ render()
- 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()
+ render()
- const component = container.querySelector(':only-child')
+ const component = screen.getByRole('group')
expect(component).toHaveClass('ams-action-group extra')
})
@@ -32,9 +32,9 @@ describe('Action Group', () => {
it('supports ForwardRef in React', () => {
const ref = createRef()
- const { container } = render()
+ render()
- const component = container.querySelector(':only-child')
+ const component = screen.getByRole('group')
expect(ref.current).toBe(component)
})
diff --git a/packages/react/src/ActionGroup/ActionGroup.tsx b/packages/react/src/ActionGroup/ActionGroup.tsx
index d953e53895..348fda9843 100644
--- a/packages/react/src/ActionGroup/ActionGroup.tsx
+++ b/packages/react/src/ActionGroup/ActionGroup.tsx
@@ -11,7 +11,7 @@ export type ActionGroupProps = PropsWithChildren>
export const ActionGroup = forwardRef(
({ children, className, ...restProps }: ActionGroupProps, ref: ForwardedRef) => (
-