testing-library / testing-library/dom-testing-library
*ByRole form seems not to find <form /> elements
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
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!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the testcase in src/test/foo.test.js with @testing-library/dom 9.3.4, then compare the observed form role behavior with the linked Core-AAM form role mapping. Check the existing role-computation tests and add a regression case if the specification supports exposing a nameless form. Done means the behavior and test expectations agree with the applicable accessibility mapping.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100