Closed
Description
@testing-library/domversion: "^7.2.2"- Testing Framework and version:
@testing-library/reactversion: "^10.0.4"
- DOM Environment: "jest-environment-jsdom-sixteen": "^1.0.3"
Node version: 13.7.0
Relevant code or config:
test("fieldset accessible name", () => {
const { getByRole } = render(
<>
<fieldset>
<legend>My Legend</legend>
<label>
My Input
<input type="text" />
</label>
</fieldset>
</>
);
const fieldset = getByRole("group", { name: /my legend/i });
expect(within(fieldset).getByLabelText(/my input/i)).not.toBeNull();
});What you did:
Following the suggested guidance from Which query should I use FAQ
I am trying to get a fieldset element by its role and name.
What happened:
Unable to find an accessible element with the role "group" and name `/fieldset/i`
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
group:
Name "":
<fieldset />
--------------------------------------------------
textbox:
Name "My Input":
<input
type="text"
/>
--------------------------------------------------
<body>
<div>
<fieldset>
<legend>
Legend
</legend>
<label>
My Input
<input
type="text"
/>
</label>
</fieldset>
</div>
</body>
Reproduction:
https://codesandbox.io/s/fieldset-accessible-name-69lhg?file=/src/__tests__/App.test.js
Problem description:
- Trying to get a fieldset by its role: "group", the accessible name for the "group" is not associated with the legend element.
--------------------------------------------------
group:
Name "":
<fieldset />
--------------------------------------------------
Suggested solution:
- As described in WAI-ARIA Name with legend:
The HTML fieldset element can be used to group form controls, and the legend element can be used to give the group a name.
Consider assigning legend element as accessible name for a fieldset.