toBeAccessibleBreadcrumb()
A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.
It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.
Usage
Syntax
- Vanilla JS
- React + Testing Library
test('breadcrumb', () => {
document.body.innerHTML =
'<nav aria-label="Breadcrumb" id="breadcrumb"><a href="1">1</a><a href="2">2</a></nav>'
expect(document.getElementById('breadcrumb')).toBeAccessibleBreadcrumb()
})
import { render, screen } from '@testing-library/react'
test('alert', () => {
render(
<nav aria-label="breadcrumbs" data-testid="breadcrumb">
<a href="1">1</a>
<a href="2">2</a>
</nav>,
)
expect(screen.getByTestId('breadcrumb')).toBeAccessibleBreadcrumb()
})
Test Summary
The matcher tests the following:
✓ element has tagName nav
✓ element has accessible label
Functionality that is not tested:
⚠ The link to the current page has `aria-current` set to page. If the element representing the
current page is not a link, `aria-current` is optional.
WAI-ARIA Roles, States, and Properties
1. The widget has a tagName of nav.
<!-- ✓ element has tagName nav -->
<nav aria-label="breadcrumbs">
<ol>
<li><a href="">1</a></li>
</ol>
</nav>
<!-- ❌ element has tagName nav -->
<div aria-label="breadcrumbs">
<ol>
<li><a href="">1</a></li>
</ol>
</div>
2. The widget has an accessible label.
<!-- ✓ element has accessible label -->
<nav aria-label="breadcrumbs">
<ol>
<li><a href="">1</a></li>
</ol>
</nav>
<!-- ❌ element has accessible label -->
<nav>
<ol>
<li><a href="">1</a></li>
</ol>
</nav>
Keyboard Interaction
Not applicable.