Skip to content

computeAccessibleName unexpected whitespace around nested elements #1075

@sydneyjodon-wk

Description

@sydneyjodon-wk

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":

Image

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:

Image

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions