Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Not able to find fieldset element using `getByRole('group', { name: 'Name'})`
See original GitHub issue@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.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
`getByRole` can't find the name of the appropriate textbox
I came across this problem when using a React Hook Form Controller for a Material UI TextField. Even though my TextField element had...
Read more >React Testing Guide - Components.Guide
Test IDs are something that allow us to find specific elements on the page. They can seem especially necessary in a component system,...
Read more >Testing forms for accessibility using React Testing Library
Using getByRole and the name of the radio group (determined by a legend ), we can confirm that a fieldset is present.
Read more >What happens when aria-label, aria-labelledby and aria ...
So I tried to look up "user interface element", in the glossary. There is no definition for "user interface element" in the ARIA...
Read more >@testing-library/jest-dom - npm
Note: This matcher is being deprecated due to a name clash with jest-extended . See ... Note: This matcher does not find detached...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For future viewers the
<legend>needs to be the first child of the<fieldset>per MDN.🎉 This issue has been resolved in version 7.5.7 🎉
The release is available on:
npm package (@latest dist-tag)Your semantic-release bot 📦🚀