[Accessibility]: SVG element has no accessible name error for the charts

Mahalakshmivignesh commented 3 months ago

Application/Team

MLz

Environment

Browser

What happened? What did you expect to happen instead?

I am getting ‘The SVG element has no accessible name’ accessibility issue on the charts. i tried adding Aria-label, title, tooltip to the donutchart tag, but it is not helping to fix the issue. i have tried the codesandbox from the carbondesignsystems webpage and see the error there as well while running the accessibility tool: https://codesandbox.io/s/rc668d. I have also observed that the svg tag generated for the dropdown has the aria-label as “Open menu”. Similarly can this be generated for the svg of the charts also? Error details:

What WCAG 2.1 checkpoint does the issue violate?

svg_graphics_labelled

Version

@carbon/charts-react": "^1.13.6"

Data & options used

No response

Relevant log output

No response

StackBlitz repro

https://codesandbox.io/s/rc668d

What priority level would this issue be in your opinion?

P1

theiliad commented 2 months ago

fixed in 1.22.0

keep in mind that you'd need to either add a title to your chart

{
  title: "test"
}

or you can just add an aria-label using the below

{
  accessibility: {
    svgAriaLabel: "test"
  }
}

theiliad commented 1 month ago

This was addressed in the latest version of the library.

The only other errors that I’m seeing show up for me seem to be bugs in the accessibility checker, since those SVG elements have role=presentation and shouldn’t be required to have a name at that point

carbon-design-system / carbon-charts