[Bug]: Tab focus goes to higher level trap when the first focusable element is removed in a nested tab focus trap.

[blueset]

Component

Utilities (utilities we provide besides Components, e.g. apis from react-utilities)

Package version

9.57.0

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.27768
    CPU: (12) x64 Intel(R) Xeon(R) W-2235 CPU @ 3.80GHz
    Memory: 23.74 GB / 63.59 GB
  Browsers:
    Edge: Spartan (Updated NPM Auth), Chromium (132.0.2957.93), ChromiumDev (Updated NPM Auth)
    Internet Explorer: 11.0.27768.1000
  npmPackages:
    @fluentui/fluent2-theme: ^8.107.98 => 8.107.98
    @fluentui/react: ^8.120.6 => 8.120.6
    @fluentui/react-brand-icons: ^1.0.146 => 1.0.146
    @fluentui/react-calendar-compat: ^0.1.16 => 0.1.16
    @fluentui/react-components: ^9.57.0 => 9.57.0
    @fluentui/react-portal-compat: ^9.0.161 => 9.0.161
    @types/react: ^18.0.33 => 18.0.33
    @types/react-dom: ^18.0.11 => 18.0.11
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Current Behavior

When the first focusable element is removed in an inner focus trap, tab focus goes to the outer focus trap instead of inner focus trap.

Expected Behavior

Tab focus should remain in the inner focus trap.

Reproduction

https://stackblitz.com/edit/mprexcs7

Steps to reproduce

Complete the following steps with keyboard navigation using Tab and Space.

1. Click “Open drawer”
2. Click “Open dialog in drawer”
3. Click “×”
4. Observe that the focus is now on the drawer instead of the dialog, and the dialog is no longer reachable through keyboard navigation.

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

Microsoft product for internal use

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.