accessibility issue with using 2 charts on the same page. about recharts HOT 7 CLOSED

The Legend example shouldn't conflict with removing the role from the parent.

I've opened a PR for the change.

from recharts.

Both aria-label and aria-labelledby get passed along to the SVG element. However, that SVG element is wrapped in the <div role="region">, which never receives those extra attributes.

Note that the SVG element itself already has a role attribute, and it seems like it will always be the same role as the .recharts-wrapper. My preference is just to remove the role from the .recharts-wrapper container element. I believe having 2 identical nested roles is unnecessary, and the SVG element is already receiving the relevant aria labelling attributes.

@ckifer Is there a time when the .recharts-wrapper has multiple SVG elements nested inside of it? If so, can you point me to one of those examples? Otherwise, what are your thoughts on removing that role?

Anyway, @nermin97, I hope it's easy for you to re-run the scans that are giving you that error. The error message looks like aXe/Deque to me, but I wasn't able to reproduce the error using Lighthouse (which sort of uses aXe). Since I don't know what tool you used for the scan, I'm not sure what will actually get you a clean scan. These options are your best bet for clearing the error today:

• Use the accessibilityLayer prop. This will assign a role of application (and make your chart tooltips accessible to keyboard-only and screen reader users). For example: <LineChart data={myData} accessibilityLayer>
• Overwrite the role to something else, like "none". role="none effectively tells the screen reader that the content is just a pile of text (which, without accessibilityLayer, is true). For example: <LineChart data={myData} role="none">.

from recharts.

Thanks for the help.

from recharts.

@julianna-langston thoughts?

from recharts.

@julianna-langston thanks for the detailed reply!

These are the usages of Surface which is where tags originate from

It looks like two SVGs are rendered in a chart with a Legend that uses DefaultLegendContent
Inspecting this example reveals that https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-barchart--stacked

Otherwise, only 1 <svg> per chart from what I can see

from recharts.

cherry-picked your commit into master as well. This should be out next patch

from recharts.

released in 2.12.4

from recharts.