[Accessibility]: Multiple toolbar components do not have unique labels

Mahalakshmivignesh commented 1 month ago

Application/Team

MLz

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 as there are no aria-label. We had earlier issue created https://github.com/carbon-design-system/carbon-charts/issues/1838. As part of this, the fix is done to remove the aria-label. But as per the error we are getting, we are expected to have aria-label, but UNIQUE ones.

The HTML component created is <div class="cds--cc--toolbar" width="100%" height="100%" role="toolbar">.

What WCAG 2.1 checkpoint does the issue violate?

aria_toolbar_label_unique

Version

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

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

Mahalakshmivignesh commented 1 month ago

@theiliad - As advised i have created this issue to handle the multiple toolbar issue. Please let me know if you need any more information.

skylandOnes commented 1 month ago

@theiliad We are using the charts-react 1.19.2

"node_modules/@carbon/charts-react": {
      "version": "1.19.2",
      "resolved": "https://registry.npmjs.org/@carbon/charts-react/-/charts-react-1.19.2.tgz",
      "integrity": "sha512-CwIbOW8UgzHCAs9jO7SQ94kVaZGH7sdFSa0XoOQAiNdPXOfxf829W9H67iBYa5Y6K6s/qRnM7OkIica50batRw==",
      "hasInstallScript": true,
      "dependencies": {
        "@carbon/charts": "1.19.2",
        "@carbon/icons-react": "^11.45.0",
        "@ibm/telemetry-js": "^1.6.0"
      },

Mahalakshmivignesh commented 2 days ago

@theiliad - do u have any updates on this please?

carbon-design-system / carbon-charts