testing-library
*ByRole form seems not to find <form /> elements
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!
It looks like it's been changed in https://github.com/w3c/html-aria/pull/402 (found that from the change on MDN in https://github.com/mdn/content/commit/e31cb5978e9f3c731c49db9ed0a15795b870e141#diff-25921a273c422a060a3204a4c8e46fb9d42be0ce77679b9d1e5094c9fc627985)
Should the fix be made in https://github.com/A11yance/aria-query/blob/main/src/etc/roles/literal/formRole.js ?
Looking at:
- https://www.w3.org/TR/html-aria/#docconformance
- https://www.w3.org/TR/html-aam-1.0/#el-form
- https://www.w3.org/TR/core-aam-1.2/#role-map-form-nameless
I’m inclined to agree, all the specs point to the form element having the form role regardless of accessible name. As you describe the only condition is regarding whether it’s also considered a landmark.
In addition to the update to aria-query, perhaps worth removing the comment in https://github.com/eps1lon/dom-accessibility-api/blob/main/sources/getRole.ts#L30 as well (although no code change needed as seems already assumed a form role)
Some more context:
- https://github.com/w3c/core-aam/issues/100
- https://github.com/w3c/html-aam/pull/372
- https://github.com/w3c/aria/issues/1764
The last one means that WAI-ARIA is somewhat in conflict with the AAM specs currently as it still states that an accessible name is required on a form (something that is a bug in in aria-query as it has accessibleNameRequired: false, currently).
If we assume that WAI-ARIA is updated (e.g. in 1.3) then we could ignore that aria-query has been inconsistent / incorrect till now on this one point.
