Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG that is aria-hidden, cannot query by role using title for accessible name #1132

Open
Josh68 opened this issue May 18, 2022 · 1 comment

Comments

@Josh68
Copy link

Josh68 commented May 18, 2022

  • @testing-library/dom version: 7.31.2
  • Testing Framework and version: Jest, 27.4.6
  • DOM Environment: jsdom, 27.4.6

Relevant code or config:

In React, but using dom-testing-library under the hood:

// code
const MySvg = () => <svg role="img" aria-hidden="true"...><title>svg_name</title><path>...</path></svg>;

// test, fails
render(<MySvg />);
screen.getByRole("img", { hidden: true, name: "svg_name" }));

Note that this will still get the SVG, if it's the only element with role="img"

screen.getByRole("img", { hidden: true }));

SVG is not aria-hidden:

// code
const MySvg = () => <svg role="img" ...><title>svg_name</title><path>...</path></svg>;

// test, passes
render(<MySvg />);
screen.getByRole("img", { name: "svg_name" }));

What you did:

Tried to test rendering of an aria-hidden svg by using getByRole with the options { hidden: true, name: accessible_name } where accessible_name is the text node inside the svg's title element.

What happened:

Found I could only make this work when the svg is not aria-hidden (and I don't need to add { hidden: true } to the getByRole options, although the test passes whether or not I remove that option).

Reproduction:

https://codesandbox.io/s/happy-darkness-zy83ig (run tests)

Problem description:

This PR evidently fixed using title as an accessible name for svg elements. But evidently this still doesn't work if the svg is aria-hidden.

Suggested solution:

@Josh68
Copy link
Author

Josh68 commented Jun 1, 2022

Not sure if this is a duplicate of #846?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant