testing-library / dom-testing-library

🐙 Simple and complete DOM testing utilities that encourage good testing practices.
https://testing-library.com/dom
MIT License
3.26k stars 467 forks source link

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

Open Josh68 opened 2 years ago

Josh68 commented 2 years ago

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 commented 2 years ago

Not sure if this is a duplicate of https://github.com/testing-library/dom-testing-library/issues/846?