IBM Equal Access Accessibility Checker - Version 3.1.70
Assistive technology
No response
Description
Using the Tearsheet component with Tabs, etc. in navigation field poses accessibility violations.
I have the Tabs, TabList, and Tab in the navigation section, but the Tabs, TabPanels, and TabPanel in the content of the Tearsheet. This results in multiple violations
The 'id' "ccs-:r49:-tabpanel-0" specified for the ARIA property 'aria-controls' value is not valid
and
The 'id' "ccs-:rtp:-tab-0" specified for the ARIA property 'aria-labelledby' value is not valid
because I don’t have the TabPanels under the same parent Tabs component within navigation.
Package
@carbon/ibm-products
Browser
Chrome
Operating System
MacOS
Package version
^2.31.0
React version
^18.2.0
Automated testing tool and ruleset
IBM Equal Access Accessibility Checker - Version 3.1.70
Assistive technology
No response
Description
Using the
Tearsheetcomponent withTabs, etc. in navigation field poses accessibility violations.I have the
Tabs,TabList, andTabin thenavigationsection, but theTabs,TabPanels, andTabPanelin the content of the Tearsheet. This results in multiple violationsand
because I don’t have the
TabPanelsunder the same parentTabscomponent withinnavigation.WCAG 2.1 Violation
No response
Reproduction/example
https://codesandbox.io/p/devbox/shy-sun-kl9t29?file=%2Fsrc%2FExample%2FExample.jsx%3A64%2C13-72%2C24
Steps to reproduce
Scan the page using the IBM Equal Access Accessibility Checker
Code of Conduct