testing-library / testing-library/dom-testing-library

RTL can't find <fieldset> element and it's children with getByRole

Open
#1,332 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.3k
Forks
474
PR merge metrics
No merged PRs in 30d

Description

  • @testing-library/dom version: 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.