[a11y]: Carbon Tabs replacing the provided ID with an auto generated one. Also always expects a tabpanel to be associated so was it mentioned in the aria-controls property.

[prasanthdotv]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.61

React version

18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

For the table element the we have given the aria-describedby, which is pointing to the tab. Then we are providing the same id in the tab. When it rendered the id is replaced by carbon generated id ccs-:r1:-tab-0.

Also this tab element have aria-controls which is expecting a tab panel element always. So I had to add dummy visually hidden tab panel with the auto generated id to fix the violation.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-dmqw9c?file=src%2FApp.jsx

Steps to reproduce

1. Create a Tab with a custom id.
2. Inspect the element
3. Check if the element have the same id.

Suggested Severity

None

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems