getByRole() doesn't recognize header's implicit banner role #578
Description
@testing-library/domversion:7.5.1@testing-library/jest-dom:5.7.0@testing-library/react:10.0.4jest:24.9.0
Relevant code or config:
import React from "react";
import { render, screen } from "@testing-library/react";
describe("getByRole", () => {
test("doens't consider a <header> as banner role", () => {
render(<header>Test</header>);
expect(screen.getByRole("banner")).toBeInTheDocument();
});
});What you did:
The header tag has an implicit banner role. RTL's getByRole should be able to identify this.
What happened:
TestingLibraryElementError: Unable to find an accessible element with the role "banner"
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
<body>
<div>
<header>
Test
</header>
</div>
</body>
Problem description:
From the official W3C specs:
- The HTML
headerelement defines abannerlandmark when its context is thebodyelement. - The HTML
headerelement is not considered abannerlandmark when it is descendant of any of following elements:
articleasidemainnavsection
Chrome gets this one right:
Suggested solution:
RTL should be able to identify the role correctly with respect to the above banner specs for the header tag.
