-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ContentSwitcher causes accessibility violation #5580
Comments
cc @carmacleod , would |
Isn't this a tabpanel pattern, and the buttons are tabs? But there's a bit more to it than that... ;) The 2 example pages show slightly different keyboard handling, depending on whether or not the tabpanel content is shown when the button is "selected (focused)" or when it is "pressed" - you decide which one to use after reading the pattern information (fyi, your codepen example works like the "Manual Activation" one, which may or may not be what you want for your production content switcher). Remember to add arrow key handling for the buttons if you are going with this pattern (i.e. instead of using tab key; i.e. the buttons need After trying out the examples, please scroll further down the example page to see the actual Keyboard Support for each example, followed by the Role, Property, State, and Tabindex Attributes used in the example, followed by the Source Code. Good luck! |
it seems we will need some design confirmation on which keyboard navigation pattern we should implement here cc @carbon-design-system/design |
I think it would work similiar to what we defined in this tab issue: #4758 We'd want tabpanel content to be shown when the button is "pressed" so that the user can easily cycle through the tab options before reading/navigation the tabpanel content. |
The DAP error is not observed in https://carbon-components-react.netlify.com/iframe.html?id=contentswitcher--default or https://the-carbon-components.netlify.com/component/content-switcher--default.html as a11y roles are set as guided. Created #5657 for keyboard navigation (thanks @carmacleod and @aagonzales for the guidance!). |
Use of aria-selected is inappropriate for a button (Switch element) we probably should be using aria-expanded. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Detailed description
https://able.ibm.com/tools/token/ee371489-9723-4a53-8d41-cf3343313f8d/c556363d-beec-4512-8cf8-a8809f3860bb/archives/2019JulyDeploy//doc/w3/help/en-US/idhi_accessibility_check_g1146.html
Steps to reproduce the issue
See https://codepen.io/lee-chase/pen/bGdaxeZ
Coedpen content shows
Not sure why https://codesandbox.io/s/8wlh0 only shows
The text was updated successfully, but these errors were encountered: