Dom-testing-library: Unable to find an accessible element with the role "form"
DOM Testing Libraryversion: 9.5.0 (react library)nodeversion: Whatever CodeSandbox runs on for React sandboxesnpm(oryarn) version: Whatever CodeSandbox runs on for React sandboxes
Relevant code or config:
import React from "react";
import { render } from "@testing-library/react";
const Form = () => (
<div>
<form id='form1' title='form title'>
<p>Hi</p>
</form>
</div>
)
const wrapper = render(<Form />);
wrapper.getByRole('form');
What you did:
Trying to select the form element by role. This also fails with findByRole.
What happened:
Unable to find an accessible element with the role "form"
Here are the accessible roles:
document:
Name "":
<body />
Adding role='form' to form element does find the form element but should not be required.
Reproduction:
https://codesandbox.io/s/falling-surf-0br51
Looks like bug was introduced in 16.4.1 as 16.4.0 works fine (with 9.4.1 version of @testing-library/react):
https://codesandbox.io/s/dom-testing-library-template-kzorw
Problem description:
Fails tests that are asserting that an accessible form is in the DOM.
Suggested solution:
aria-query looks to still be exporting form in the roles map so that's probably not the issue. Other than that not had enough time to dig further.
ruscal
All 3 comments
This is actually intended by spec. A <form> element needs an accessible name to have the form role. So you need <form aria-label="form" /> or <form aria-labelledby="form-label-element-id" />.
Though we could extend the error message to add a hint if a role is queried where an element needs an accessible name to have that role.
eps1lon
on 11 Mar 2020
So it's changed from title being the semantic equivalent to name then. I've verified that changing to using name works fine.
Thanks for your help!
ruscal
on 11 Mar 2020
In my case, neither name nor aria-label work when running screen.getByRole('form').
sunpietro
on 22 Sep 2020
Related issues
EvgenyOrekhov
路
3Comments
ysgk
路
3Comments
rbrtsmith
路
4Comments
nazanine
路
3Comments
Pau1fitz
路
4Comments
Most helpful comment
This is actually intended by spec. A
<form>element needs an accessible name to have theformrole. So you need<form aria-label="form" />or<form aria-labelledby="form-label-element-id" />.Though we could extend the error message to add a hint if a role is queried where an element needs an accessible name to have that role.