*ByRole queries don't properly support the banner role #997
Description
-
@testing-library/domversion: 7.28.1 -
Testing Framework and version: Jest 26.6.3
-
DOM Environment: jsdom 16.6
-
Node: 14.16
What you did:
Given this HTML body:
<body>
<header>
<h1>2 Rooms</h1>
</header>
<main>
<header>
<div>
<button
aria-controls="floor-filter-menu"
aria-expanded="true"
aria-haspopup="true"
id="floor-filter-button"
>
All Floors
</button>
</div>
</header>
<nav>
<ul>
<li>
<header>
<h2>Level 1</h2>
</header>
<div>
<a href="/embed/77/rooms/1001">
<h3>Ballroom A</h3>
<p>100 square feet</p>
</a>
</div>
</li>
<li>
<header>
<h2>Level 2</h2>
</header>
<div>
<a href="/embed/77/rooms/2003">
<h3>Ballroom C</h3>
<p>250 square feet</p>
</a>
</div>
</li>
</ul>
</nav>
</main>
</body>What happened:
screen.getByRole('banner') throws TestingLibraryElementError: Found multiple elements with the role "banner"
Reproduction:
https://codesandbox.io/s/react-testing-library-demo-forked-7rp9f?file=/src/__tests__/hello.js
Problem description:
According to WAI-ARIA:
| HTML element | Implicit ARIA semantics |
|---|---|
header |
If not a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region then role=banner. Otherwise no corresponding role |
Suggested solution:
the ByRole queries should adhere to ARIA specs, and only implicitly assume the banner role for <header> elements when they are not descendants of the specified elements