search

carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
876 stars 182 forks source link

[Accessibility]: aria-label of charts toolbar all have same ID #1838

Open danielannan17 opened 3 weeks ago

danielannan17 commented 3 weeks ago

Application/Team

API Connect

Environment

Browser

What happened? What did you expect to happen instead?

When you use multiple charts on the same page, you're given an accessibility violation due to all the chart toolbars having the same aria-label

charts-toolbar-html

violation

What WCAG 2.1 checkpoint does the issue violate?

4.1.2

Version

@carbon/charts-react@1.16.3

Data & options used

No response

Relevant log output

No response

StackBlitz repro

No response

What priority level would this issue be in your opinion?

P0

tombrunet commented 1 week ago

Adding some info, since this came up on accessibility office hours from another team. It looks like the aria-label is hardcoded and doesn't include the chart name or any identifying information from the chart: https://github.com/carbon-design-system/carbon-charts/blob/08318c67c93dd53e31cb968976397f3068864e63/packages/core/src/components/axes/toolbar.ts#L42

It looks like someone tried to solve this using a random id, but then had to be pulled again because this solution doesn't account for the fact that these are human consumable string and not programmatic ids: (https://github.com/carbon-design-system/carbon-charts/commit/162e4104b6b1c83f65720f0203eb3c353774ef60)

Also related issue: https://github.com/carbon-design-system/carbon-charts/issues/1728

We need some way to have it be something like ${chart title} toolbar, or provide the user for a way to override the toolbar title in the chart options.