*ByRole form seems not to find <form /> elements #1293
Description
Prior issue #1021
Testcase:
it(`testcase`, async () => {
render(
<div>
<h1>helloworld</h1>
<form>
<h2>content</h2>
<label htmlFor="tinput">hello</label>
<input type="text" id="tinput" />
</form>
</div>
)
expect(screen.getByRole("form")).toBeInTheDocument()
})Result:
FAIL src/test/foo.test.js
● testcase
TestingLibraryElementError: Unable to find an accessible element with the role "form"
Here are the accessible roles:
heading:
Name "helloworld":
<h1 />
Name "content":
<h2 />
--------------------------------------------------
textbox:
Name "hello":
<input
id="tinput"
type="text"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div>
<h1>
helloworld
</h1>
<form>
<h2>
content
</h2>
<label
for="tinput"
>
hello
</label>
<input
id="tinput"
type="text"
/>
</form>
</div>
</div>
</body>
15 | );
16 |
> 17 | expect(screen.getByRole('form')).toBeInTheDocument();
| ^
18 | });
19 |
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.getByRole (src/test/foo.test.js:17:17)
@testing-library/domversion: 9.3.4- Testing Framework and version: jest 29.7.0
- DOM Environment: jsdom 20.0.0
In the previously mentioned bug, @eps1lon explained that this was following the roles from html-aam. However it looks like they've been updated, see https://www.w3.org/TR/core-aam-1.2/#role-map-form-nameless. It looks like that a form element without an accessible name gets a computed role form too.
However they mention that it shouldn't be exposed as a landmark. Is that where my interpretation is wrong?
Thanks for your feedback!