React-testing-library: Unable to find role

[ngoble-phdata]

• @testing-library/react version: 11.2.0
• Testing Framework and version: Jest (CRA) 26.6.0
• DOM Environment: jsdom

Problem description:

Unable to find role="execute-button000"

It says it can't find that role, but as you can see in the debug print, it clearly exists in the DOM. This also fails for screen.findByRole

This seems to be happening to any component I add a custom role to, and was working in previous versions.

[brendan-donegan]

To be honest I deleted the comment because I just read that you said it was working before, so the library maintainers would need to comment as to why it was changed.

[ngoble-phdata]

Yeah I understand now from your previous comment that it's not a valid accessibility role. I'm having a hard time targeting this because it's a button with an SVG as the content, so I can't use text within the button to target it.

[brendan-donegan]

But your button should have an aria-label for screen readers so why not
just add one, like 'Execute' for example? Then you could do getByRole('button', { name: 'Execute' });

On Thu, 19 Nov 2020 at 17:46, ngoble-phdata [e-mail]
wrote:

Yeah I understand now from your previous comment that it's not a valid
accessibility role. I'm having a hard time targeting this because it's a
button with an SVG as the content, so I can't use text within the button to
target it.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/testing-library/react-testing-library/issues/835#issuecomment-730534909,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AASLMLWEGX6PPFITICY6K6TSQVKZFANCNFSM4T3WB73A
.

[kentcdodds]

@brendan-donegan is correct. Applying an invalid role is very bad for accessibility. Don't do it. Use a label instead. If for some reason that doesn't work, use a data-testid. Never apply an invalid role.

Thanks!

[ngoble-phdata]

There should still be documentation that calls out this breaking change in the library. This worked in previous versions.

[ngoble-phdata]

Also, testIds aren't working for me.

TestingLibraryElementError: Unable to find an element by: [data-testid="copy-button"]

Browser DOM:

jsdom

[kentcdodds]

There should still be documentation that calls out this breaking change in the library. This worked in previous versions.

Technically all bug fixes are breaking changes for people who relied on the bug. The fact it worked previously is a bug.

I'm not sure why the test ID isn't getting applied in jsdom. That will be a jsdom issue though I'm afraid. Any reason the aria-label idea isn't going to work for you? Consider that a blind user won't know what this is if it has no label.

[ngoble-phdata]

Turns out the reason it wasn't getting added was unrelated to this library. I had to set the jsdom window size in order to have the desktop variant shown. Thank you for your time, and updates on accessibility functionality.