ByRole doesn't find SVG's graphics-document role

[CreativeTechGuy]

• @testing-library/dom version: 8.13.0
• Testing Framework and version: N/A
• DOM Environment: jsdom@19

Relevant code or config:

getByRole("graphics-document")

What you did:

I have an SVG element in the page which I'm trying to select by its role.

What happened:

In the W3 role documentation linked from the ByRole docs, it lists the implicit role for an SVG tag as graphics-document. This value isn't included in the TypeScript definitions, but more importantly it isn't supported at runtime either.

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-rd79zt?file=/src/__tests__/hello.js

Problem description:

The only way to query for an SVG is via querySelector which goes against the recommendations of the library.

Suggested solution:

Support the aria-role as a selector as the documentation would suggest is possible.

[timdeschryver]

This will land when A11yance/aria-query#181 is resolved.

[mmarcuccio]

It looks like the update to aria-query did not resolve this. Here is an updated version of the sandbox above: https://codesandbox.io/s/react-testing-library-demo-forked-221xzs?file=/src/__tests__/hello.js

[freedude]

its May 1st 2024 and I am still seeing the same issue, was this ever resolved or did anyone find another way?

[moek]

Setting a custom role to svgs helped me to work around this issue:

            <svg role="img" … />

            expect(screen.getByRole('img'))

Do not remember where I found this workaround, but it was also mentioned here:
https://css-tricks.com/accessible-svgs/

[bitbw-mak]

A11yance/aria-query#181 did not fix it, but A11yance/aria-query#548 should have.

Unfortunately, aria-query has not published a release since then.