[a11y]: Tab focus in accordion items incorrect, focusing on hidden items

[KevinCamelo]

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

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

[mbgower]

This is a failure of Focus Order

I suspect it's due to the children only being hidden visually, not programmatically

[mbgower]

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>