Component

Dialog

Package version

9.0.0

React version

18

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.61.4 
    @types/react: ^17 => 17.0.85 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

Tabbing is not trapped inside of the dialog, which is opened from within Menu component.

Expected Behavior

Tabbing should be trapped inside of the modal dialog. Dialog has explicitly set modalType="modal", which has the description: "The tab sequence is kept within the dialog". This is not happenning

Reproduction

https://stackblitz.com/edit/csmohdj7-nf3deanr?file=src%2Fexample.tsx

Steps to reproduce

1. Open: https://stackblitz.com/edit/csmohdj7-nf3deanr?file=src%2Fexample.tsx
2. Click Trigger menu
3. Click Dialog trigger
4. Try to Tab.
5. Focus goes outside of dialog..

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

  The provided reproduction is a minimal reproducible example of the bug.
  To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.