[a11y]: Inconsistent Focus Behavior in Carbon's OverflowMenu Component

[2312323123]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.71.1, but also evident in newest one

React version

No response

Automated testing tool and ruleset

manual testing

Assistive technology

No response

Description

When navigating the OverflowMenu component using a keyboard, the focus management behaves inconsistently. Upon opening the OverflowMenu and pressing the Tab key, the entire menu is selected. Subsequently, pressing the Tab key again directs focus to the beginning of the webpage. This issue is observed i.e. in the 'Render Custom Icon' section of the Carbon React documentation: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--overview.

eb2ac7c8-5193-435f-bb13-e73f952e6463.1.mov

Issue is similar, but distinct from #18548

WCAG 2.1 Violation

No response

Reproduction/example

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

Steps to reproduce

Click OverflowMenu and then click Tab two times. When you tab again, focus starts from the beginning of the page.

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