[Bug]: Dialog focus is broken after a nested Popover is opened and closed

[tvandalovsky]

Component

Dialog

Package version

9.55.1

React version

18.3.12

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.55.1 => 9.55.1
@types/react: ^18.3.12 => 18.3.12
@types/react-dom: ^18.3.1 => 18.3.1
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1

Current Behavior

Unable to re-focus the Dialog SearchBox after the nested Popover is opened and closed (by clicking the mouse outside of the Popover).

Expected Behavior

Be able to re-focus and engage with the Dialog SearchBox after the nested Popover is opened and closed (by clicking the mouse outside of the Popover).

Reproduction

https://stackblitz.com/edit/vitejs-vite-dvqcpm?file=src%2FApp.tsx

Steps to reproduce

1. Press the "Open" button to open the Dialog
2. Press the "Popover" button to open the Popover
3. Click empty space outside of the Popover
4. Try to click into the Dialog SearchBox
5. Observe that the Dialog SearchBox cannot be focused, and the focus is "stuck" on the Dialog Open button.

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

PowerScribe One

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.

[miroslavstastny]

Perhaps the same root cause as #33017.
fyi @mshoho

[bsunderhus]

Here's a reproduction using react@17 and adding a FluentProvider wrapper to ensure proper styling https://stackblitz.com/edit/vitejs-vite-ztxunm?file=src%2FApp.tsx

[bsunderhus]

I believe this issue and #33017 are the same. In this example provided by @tvandalovsky the Popover is with trapFocus attribute and the logic behind PopoverSurface includes aria-modal=true and role=dialog to the popover once trapFocus is true.

fluentui/packages/react-components/react-popover/library/src/components/PopoverSurface/usePopoverSurface.ts

Lines 53 to 54 in fc7240b

	role: trapFocus ? 'dialog' : 'group',
	'aria-modal': trapFocus ? true : undefined,

This is only reproducible with trapFocus attribute on. This leads me to believe it might be related to some modalizer logic on tabster. Even after adding inline to the Popover the problem remains also 🤔

@mshoho is this a known issue on tabster?

[15MariamS]

What's the workaround for this? I have a drawer that opens a dialog; when I close the dialog, the drawer loses focus.