getByLabelText doesn't concat multipart aria-labelledby

• React Testing Library version: 9.5.0
• node version: 12.4.0
• npm (or yarn) version: 6.13.6

What you did:

Along the lines of this MDN article, I have an input labelled by a combination of three different elements: a label, a text field, and another label. So the input has an aria-labelledby attribute with a value like label1 text-field label2. In my test, I’m trying to grab the input based on that full, concatenated label, with something like getByLabelText('text of label1 value of text-field text of label2').

What happened:

I can successfully grab the input with getByLabelText('text of label1') or getByLabelText('text of label2'), but giving it the full, concatenated label getByLabelText('text of label1 value of text-field text of label2') results in nothing being found. Even if I removed the text field ID from aria-labelledby, I still can’t get the input using getByLabelText('text of label1 text of label2').

Reproduction:

Here’s a codesandbox: https://codesandbox.io/s/rtl-aria-labelledby-multipart-vpjpx?from-embed=&file=/src/__tests__/index.js

Problem description:

Based on my understanding of the MDN article, the “label” for an input with a multiple IDs in aria-labelledby should be a concatenation of the values of the elements with those IDs. So I expected getByLabelText to retrieve the input based on this concatenated label (especially because it can handle aria-labelledby attributes with just one ID).

Suggested solution:

From looking at label-text.js, it seems like there are a couple things going on…

• getByLabelText only looks at <label> elements, so that <input> that’s part of my aria-labelledby doesn’t get picked up at all. (However, even when I removed the input’s ID from aria-labelledby, I still had the concatenation problem, so this is kind of a separate issue.)
• getByLabelText does a sweep for individual <label> elements matching the given text (before trying to figure out what input elements they’re labeling). This means it doesn’t catch combinations of <label> elements (or any other kind of element) that match the given text when concatenated.

So on the surface, fixing my problem would require significantly switching around how getByLabelText works so that it 1) looks at elements beyond <label>s and 2) considers combinations of element values.

However, the documentation explicitly says getByLabelText first looks for labels and then associated elements, and it also says something semi-cryptic about how you should use getByRole if you want to be “robust against switching to aria-label or aria-labelledby”. So I’m not sure if my “problem” is actually just the intended behavior.

If it is the intended behavior, then it would be great to clarify that in the documentation (and I’d be happy to submit a pull request for that!).

(I should also clarify that I’m happily using getByRole('checkbox', {name: 'allow up to 0 words in between'}) for my specific use case right now per this Stack Overflow post. I just wanted to submit this issue in case this is a bug that should be fixed!)

[kentcdodds]

Sounds fine to me 👍

[kentcdodds]

🎉 This issue has been resolved in version 7.21.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀