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

[danielannan17]

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

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]

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:

carbon-charts/packages/core/src/components/axes/toolbar.ts

Line 42 in 08318c6

.attr('aria-label', `chart toolbar`)

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: (162e410)

Also related issue: #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.