[v7] *ByLabelText finding additional elements when descendants of label

[wKovacs64]

• dom-testing-library version: 7.0.3
• node version: 12.16.1
• npm (or yarn) version: yarn v1.22.0

Relevant code or config:

test('getByLabelText and label descendants', () => {
  render(
    <label htmlFor="text-input">
      <h2>Enter your text here:</h2>
      <div>
        {/* should just find this input */}
        <input id="text-input" name="text" type="text" />
        {/* but v7 also finds this button */}
        <button type="submit">Submit</button>
      </div>
    </label>,
  );

  screen.getByLabelText(/your text here/i);
});

What you did:

I upgraded @testing-library/react from v.9.50 to v10.0.1 (and thus, @testing-library/dom from v6 to v7).

What happened:

A particular class of tests started to fail with the following message:

TestingLibraryElementError: Found multiple elements with the text of: /your text here/

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Reproduction repository:

https://codesandbox.io/s/dom-testing-library-v7-label-descendants-issue-cw8mb?module=%2Fsrc%2F__tests__%2Findex.test.js&previewwindow=tests

Problem description:

The *ByLabelText queries used to find just the input but now they find the input and the button when nested under a label. I'm not using the selector option, but I think this might have been introduced in #373.

Suggested solution:

Not sure yet, ran out of time. It's quite possible I'm just doin' it wrong™️ , too.

[eps1lon]

I don't know ByLabelText well enough to understand the issue.

But getByRole('textbox', { name: /your text here/}) will only find a single element. Though you might want to assert additionally that the textbox has an actual <label>.

[kentcdodds]

I think the behavior is correct. If you have an element inside a label then technically the label is labeling that element. The fix would be:

test('getByLabelText and label descendents', () => {
  render(
    <>
      <label htmlFor="text-input">
        <h2>Enter your text here:</h2>
        <div>
          <input id="text-input" name="text" type="text" />
        </div>
      </label>
      <button type="submit">Submit</button>
    </>,
  );

  screen.getByLabelText(/your text here/i);
});

Or you could use the new selector option screen.getByLabelText(/your text here/i, {selector: 'input'})

[kentcdodds]

In any case, I don't think this is a bug, so I'll go ahead and close this one. Let me know if I misunderstood the situation.

[wKovacs64]

If you have an element inside a label then technically the label is labeling that element.

Huh, apparently multiple descendants are allowed but, only certain phrasing content elements which are not labelable (button is labelable, so it's not allowed). TIL!

Axe has never complained about this structure, but I suppose it's not so much an a11y issue as it is a structural/validity issue. Anyway, easy enough to fix. Thanks, and sorry for the noise.

Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
https://html.spec.whatwg.org/multipage/forms.html#the-label-element

[kentcdodds]

Thanks for doing that research @wKovacs64! 👏