-
-
Notifications
You must be signed in to change notification settings - Fork 30
Description
Hello 👋
Context / Actual Issue
I have a test like this:
const {getByRole} = render(<button>abc<span> - </span>abc</button>,);
expect(getByRole('button', {name: 'abc - abc'})).toBeInTheDocument();
that passed on dom-accessibility-api
v0.5.12, but fails on v0.5.13 and onward because of the trim added on this line which seems to be removing the spaces around the -
in the span
:
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "abc - abc"
Here are the accessible roles:
button:
Name "abc-abc":
<button />
The accessible name for that button in dev tools includes the spaces "abc - abc":
Opposite Issue
I've been running that test locally on all the latest versions of testing-library, but when I try to make a reproduction in a sandbox, for some reason I am unable to reproduce the above issue. Instead, I'm having the opposite issue - even if I put no spaces in the span
in the sandbox, it will still think the accessible name contains spaces:
https://stackblitz.com/edit/github-w9fjy7-z43vk18u?file=src%2FApp.test.tsx
Test with no spaces:
const {getByRole} = render(<button>abc<span>-</span>abc</button>,);
expect(getByRole('button', {name: 'abc-abc'})).toBeInTheDocument();
Failure:
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "abc-abc"
Here are the accessible roles:
button:
Name "abc - abc":
<button />
But in this case, the accessible name shouldn't have spaces:
The first issue is the one that I'm actually running into and I'm not sure why it isn't reproducible in stackblitz, but it seems like either way, there's something about nested elements that are adding or subtracting whitespace to make the accessible name not match what is in dev tools - any ideas on what could be going on here?
Thank you!