toBeAccessibleToolbar()
A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and purpose of the grouping to screen reader users.
Usage
Syntax
- Vanilla JS
- React + Testing Library
test('toolbar', () => {
document.body.innerHTML = '<div id="toolbar" role="toolbar">Hey, listen!</div>'
expect(document.getElementById('toolbar')).toBeAccessibleToolbar()
})
import { render, screen } from '@testing-library/react'
test('toolbar', () => {
render(
<div data-testid="toolbar" role="toolbar">
Hey, listen!
</div>,
)
expect(screen.getByTestId('toolbar')).toBeAccessibleToolbar()
})
Test Summary
The matcher tests the following:
✓ element has role toolbar
WAI-ARIA Roles, States, and Properties
1. The widget has a role of toolbar.
<!-- ✓ element has role toolbar -->
<div role="toolbar">hey, listen!</div>
<!-- ❌ element has role toolbar -->
<span>hey, listen!</span>
Keyboard Interaction
- Tab focuses the element