[a11y]: Contained list has two focus points, and overlap between the focus indicators #14174
Open
2 tasks done
Labels
component: contained-list
role: dev 🤖
severity: 4
https://ibm.biz/carbon-severity
type: bug 🐛
type: docs 📖
Package
@carbon/react
Browser
Chrome
Operating System
MacOS
Package version
https://react.carbondesignsystem.com/?path=/story/components-containedlist--with-interactive-items-and-actions
React version
@carbon/react@1.33.2
Automated testing tool and ruleset
n/a
Assistive technology
No response
Description
The Interactive items and actions implementation on Storbyook takes two separate tab stops per row.
I'm concerned about this, since I don't understand what the two different outcomes are when activating the control at each of these tab stops (and of course in Storybook, there is no outcome I can test).
A very related but separate issue is that the first focus indicator encompasses both tab stops on the row both the list item, and its 'dismiss' icon:
Then the user can advanced the focus so that the 'dismiss' icon takes its own separate tabstop as well.
That is definitely wrong.
I'm unclear about how these two actions can co-exist, and what that means.
WCAG 2.1 Violation
No response
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-containedlist--with-interactive-items-and-actions
Steps to reproduce
Code of Conduct
The text was updated successfully, but these errors were encountered: