*ByLabelText() with aria-hidden elements

Versions

• @testing-library/jest-dom version: 5.8.0
• @jest-environment-jsdom-sixteen: version 1.0.3

Relevant code or config:

const component = () => 
    <div>
        <label id="MyLabel" for="MyInput">My Label<span aria-hidden="true">*</span></label>
        <input id="MyInput" value="some value" />
    </div>

What you did:

I was testing a material-ui component, using the “required” property, which adds an asterisk to the label automatically.

What happened:

The *ByLabelText() methods do not find the label, because the asterisk is included. However, I thought with the aria-hidden attribute in there, it would exclude that part, just as screen readers do to locate and announce labels.

Reproduction:

Here’s a forked codesandbox example:

https://codesandbox.io/s/react-testing-library-demo-pxex9?file=/src/__tests__/hello.js

Problem description:

I’m not sure if this is expected, but I thought getByLabelText("My Label") would return a valid input. Instead, I have to use getByLabelText("My Label*"), because it finds the asterisk in there.

Suggested solution:

Honor aria-hidden elements by skipping them when locating labels, to be consistent with screen readers.

[kentcdodds]

It looks like there’s nothing actionable from here so let’s close this 👍

[delca85]

cc: @delca85. Didn’t you have similar experiences with aria-hidden?

react-testing-library worked as expected for me with the attribute aria-hidden set to true, it doesn’t find any role for the selected element.