testing-library / testing-library/dom-testing-library
RTL can't find <fieldset> element and it's children with getByRole
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
@testing-library/domversion: 10.4.0- Testing Framework and version: testing-library/react: 16.0.0
- vitest:^1.6.0
- DOM Environment: jsdom: 24.1.0
Situation
RTL can't find the second fieldset element and can't find any accessible roles within that fieldset element. It CAN find all element with getByText.
The HTML for the first fieldset elements looks like this (CAN find this element with getByRole("radiogroup")):
<fieldset class="..." role="radiogroup" aria-labelledby="..." aria-describedby="...">
<label class="..." id="...">...</label>
</fieldset>
The HTML for the second (sibling) fieldset elements looks like this (can't find this element with getByRole("group"), but can find it with getByText):
<fieldset class="..." role="group" aria-labelledby="...">
<legend class="..." id="...">...</legend>
<button type="button" aria-expanded="false" aria-controls="...">...</button>
"More accessible elements in here like heading which cannot be found by role"
</fieldset>
Trying to getByRole the button within the fieldset with getByRole:
expect(screen.getByText("form.privacy.show-extra-info")).toBeInTheDocument();
What happened:
(relevant) test output:
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "form.privacy.show-extra-info"
Here are the accessible roles:
--------------------------------------------------
radiogroup:
Name "form.frequency.label":
<fieldset
aria-describedby="subscribeRadioGroupHelp"
aria-labelledby="subscribeRadioGroupLabel"
class="field-container radio-group has-help-text"
role="radiogroup"
/>
--------------------------------------------------
button: _=> this is a button outside the <fieldset> element_
Name "form.submit.label":
<button
aria-live="polite"
class="button button--large button--default"
type="submit"
/>
--------------------------------------------------
<fieldset
aria-labelledby="privacyLegend"
class="ro-form__fieldset"
role="group"
>
<legend
class="ro-form__legend"
id="privacyLegend"
>
form.privacy.legend
</legend>
<div
class="ro-form__fieldset-contents"
>
<div
class="rich-text avg-block__intro on-gray-background"
>
<p>
form.privacy.intro.p1
</p>
<p>
form.privacy.intro.p2
</p>
<p>
form.privacy.intro.p3
</p>
</div>
<div
class="accordion ro-form__field"
>
<div
class="default-accordion-item accordion-item"
>
<h3
class="default-accordion-item__header accordion-item__header"
>
<button
aria-controls="accordionPanel:r3:0"
aria-expanded="false"
class="default-accordion-item__button accordion-item__button"
id="accordionItemTitle:r3:0"
type="button"
>
<div
class="default-accordion-item__icon accordion-item__icon"
data-testid="icon"
>
</div>
<span
class="default-accordion-item__button-content"
>
<span
class="default-accordion-item__button-text"
>
<span
class="default-accordion-item__title"
>
form.privacy.show-extra-info
</span>
</span>
</span>
</button>
</h3>
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 with the getByRole behavior for the supplied sibling fieldset markup and reproduce the missing group, button, and descendant roles in a focused test. Trace how accessible roles are reported for fieldsets, then verify that the expected roles and button name become queryable without breaking the existing radiogroup case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100