[a11y]: AccordionItem - Prevent keyboard navigation from reaching closed AccordionItem's clickable content

[2nikhiltom]

Package

@carbon/react

Browser

Firefox

Operating System

No response

Package version

v1.56.0

React version

18.02

Automated testing tool and ruleset

Manual QA

Assistive technology

No response

Description

keyboard navigation reaches an AccordionItem with clickable content even when it's closed

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-8xbgyj?file=src%2FApp.jsx

Steps to reproduce

<AccordionItem title="Section 1 title">
     <Button>Clickable</Button>
   </AccordionItem>
   <AccordionItem title="Section 2 title">
     <p>
       TestContent
     </p>
   </AccordionItem>

Make a accordion with clickable
Navigate the via keyboard , do not open the accordion
Focus still reaches the clickable inside

Screen.Recording.2024-05-10.at.12.35.25.mov

Code of Conduct

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