[a11y]: focus loses when pressing tab from MultiSelect in ComposedModal

[makafsal]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.75.0

React version

v17.0.1

Automated testing tool and ruleset

Storybook

Assistive technology

No response

Description

Please refer to the following:

Screen.Recording.2025-02-03.at.3.33.34.PM.mov

In the above video, you can observe that when I press the Tab key from the MultiSelect component, the focus loses from the ComposedModal. When I checked the active element by logging into the console document.activeElement it appeared as the body element.

I suspect this issue is related to the MultiSelect component because pressing the Tab tab key closes the Menu and it fails to retain its focus again in the parent element like the Esc key press does.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-modal--default

Steps to reproduce

1. Goto https://react.carbondesignsystem.com/?path=/story/components-modal--default
2. Press the Tab key to select the MultiSelect control
3. Press Down Arrow to focus on the first element
4. Then press the Tab key
5. You can observe that now the focus is lost from ComposedModal

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

[JuanMacias153]

Hey Afsal,

could you please assign this issue to me, my team would really appreciate volunteering in order to fix this bug