toBeAccessibleAlert()
An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
hey, listen!
Usage
Syntax
- Vanilla JS
- React + Testing Library
test('alert', () => {
document.body.innerHTML = '<div id="alert" role="alert">Hey, listen!</div>'
expect(document.getElementById('alert')).toBeAccessibleAlert()
})
import { render, screen } from '@testing-library/react'
test('alert', () => {
render(
<div data-testid="alert" role="alert">
Hey, listen!
</div>,
)
expect(screen.getByTestId('alert')).toBeAccessibleAlert()
})
Test Summary
The toBeAccessibleAlert matcher tests the following:
✓ element has role alert
WAI-ARIA Roles, States, and Properties
1. The widget has a role of alert.
<!-- ✓ element has role alert -->
<div role="alert">hey, listen!</div>
<!-- ❌ element has role alert -->
<span>hey, listen!</span>
Keyboard Interaction
Because alerts are intended to provide important and potentially time-sensitive information without interfering with the user's ability to continue working, it is crucial they do not affect keyboard focus. The alert dialog is designed for situations where interrupting work flow is necessary.
Coming Soon