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

• @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:

Start by running the tests in the linked CodeSandbox and compare getByRole("img", {hidden: true, name: "svg_name"}) with the non-aria-hidden case. Trace how getByRole handles an SVG title when aria-hidden is present, then verify that the SVG can be queried by role and its title-derived accessible name.