mbgower
commented
2 weeks ago This is a failure of Focus Order
I suspect it's due to the children only being hidden visually, not programmatically
Open KevinCamelo opened 2 weeks ago
mbgower
commented
2 weeks ago This is a failure of Focus Order
I suspect it's due to the children only being hidden visually, not programmatically
mbgower
commented
2 weeks ago Yep, as per this screenshot, all that is happening is that somone is setting aria-expanded to "false". The child div is still in the dom and contains a tabbable element.
Easily resolved by assigning "hidden" attribute on the wrapper div when collapsed
<div hidden="" class="cds--accordion__wrapper"><div id="accordion-item-:r1:" class="cds--accordion__content"><a href="#1">TEST</a></div></div>
Package
@carbon/react
Browser
Chrome
Operating System
MacOS
Package version
@carbon/themes": "11.36.0
React version
@carbon/react": "1.58.1
Automated testing tool and ruleset
Manual testing
Assistive technology
No response
Description
As the user tabs through a Carbon accordion component, the focus moves towards the items inside the accordion, even if the accordion is not expanded.
If there are many focusable items embedded within an expanded accordion, this could result in the focus being lost for quite awhile until the user finds the next focusable item.
WCAG 2.1 Violation
2.4.3 Focus Order
Reproduction/example
https://stackblitz.com/edit/github-rtptpp-wsfdvm?file=src%2FApp.jsx
Steps to reproduce
Tab through the accordion and notice how the focus gets unfocused as the user tabs through. As you tab, the focus moves to the "link" inside the accordion, even though the accordion is closed.
Video demo:
Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Code of Conduct