Using `getByLabelText` is also returning the hidden value of `fieldset` which is not a label.

[CWSites]

• @testing-library/dom version: 8.10.1
• Testing Framework and version: Jest 29.6.3
• DOM Environment: Brave Browser (current)

Relevant code or config:

expect(screen.getByLabelText('Access type')).toBeVisible();

What you did:

Testing to make sure a label is visible in the UI

What happened:

Multiple results were returned, including fieldset

 ● ClientOidcInfo › in readOnly mode › should have expected elements

    TestingLibraryElementError: Found multiple elements with the text of: Access type

    Here are the matching elements:

    <select
      aria-invalid="false"
      disabled=""
      id="access_type"
      name="access_type"
    >
      <option value="one">One</option>
      <option value="two">Two</option>
    </select>

    <div
      aria-label="Access type"
      role="textbox"
    >
      <label
        data-shrink="true"
        for="access_type"
        id="access_type-label"
      >
        Access type
      </label>
      <div>
        <select
          aria-invalid="false"
          disabled=""
          id="access_type"
          name="access_type"
        >
          <option value="one">One</option>
          <option value="two">Two</option>
        </select>
        <fieldset aria-hidden="true">
          <legend>
            <span>
              Access type
            </span>
          </legend>
        </fieldset>
      </div>
    </div>

Problem description:

• fieldset is not part of the input label and shouldn't be included with getByLabelText

Suggested solution:

Do not return fieldset when using a query *ByLabelText

[MatanBobi]

I might be mistaken here, but if I understand correctly, the problem here is not the fieldset. You have a div with an aria-label of Access Type and a label pointing to the select element with the text Access Type. Therefor, we find two elements with that label (the div and all it's descendants and the select). Have you tried removing the aria-label from the div?

[CWSites]

Changing the aria-label removed one of them (thanks for that). However the fieldset is definitely an issue as it was complaining that the label in question was returned three times.

        <fieldset aria-hidden="true">
          <legend>
            <span>
              Access type
            </span>
          </legend>
        </fieldset>

[MatanBobi]

From the error you've showed above, it looks like the fieldset was inside the div, that's why I thought it will be removed also. Can you please gather a minimal reproduction for us to investigate this?

[CWSites]

Sure, I will see about getting something put together. I'm using standard MUI v5 with react and this is how they render a select field.