Dom-testing-library: ByLabelText does not work with IE 11

[eps1lon]

• @testing-library/dom version: 7.21.6
• Testing Framework and version: any
• DOM Environment: IE11 or Firefox 52

Relevant code or config:

<label for="rating-test-2">2 Stars</label>
<input id="rating-test-test" type="radio" />

What you did:

getByLabelText('2 Stars')

What happened:

  Found a label with the text of: 2 Stars, however the element associated with this label (<input />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <input />, you can use aria-label or aria-labelledby instead.

Reproduction:

55e72b2 (#21944)

Problem description:

HTMLInputElement.labels is not supported in IE 11 or prior to Firefox 56

Suggested solution:

Use CSS selector. It's even used later in the code and it's not clear why we use two different approaches.

[kentcdodds]

Dang it. 😅

[eps1lon]

Dang it.

dom-accessibility-api didn't support native labels either in these environments. Polyfilling this is actually quite involved: https://github.com/eps1lon/dom-accessibility-api/pull/352/files

Though that fix also targets Edge 17. If you just target Edge 18 and IE 11 you can leverage HTMLLabelElement.control which simplifies things by a lot.

[kentcdodds]

That actually doesn't look all that bad. Thanks for sharing! We could just put that code at the bottom of the label query module or in a helpers file and if we can't access things by .label we could use that as a fallback.

Anyone wanna work on this? It's possible this could also be useful as another module and both our libraries could consume I guess.

[BatuhanW]

I'd like to work on this one, but unfortunately, I'm not totally clear about how this one should be fixed. Some help is appreciated!

[maxnewlands]

I'd like to work on this one, but unfortunately, I'm not totally clear about how this one should be fixed. Some help is appreciated!

@BatuhanW Apologies, I didn't mean to step on your toes with my PR! I'd started this a few days ago, so just thought I'd go for it. Happy to discuss if you'd find it helpful 🙂

[kentcdodds]

@BatuhanW, I'm sure there will be another opportunity to contribute in the future :) Watch the repo and you can be notified when there's an opportunity :) We'd love to have your contribution!

[kentcdodds]

:tada: This issue has been resolved in version 7.21.8 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: