Describe the bug

This is a UI bug happening when our users' code in preview attempts to grab focus. Because preview code can come from a variety of frameworks, we'd want to handle this ourselves internally.

When we open a menu, popover, select in the UI, it implements a focus trap on the overlay content. That focus trap can cause preview components' own focus trap logic to enter into a battle for control of focus with our own react-aria components.

adobe/react-spectrum#8952 reports the issue upstream as we see this with RAC in manager and RAC in preview, but we also want a general solution.

Through some testing, I noticed that manager managed (!) to keep control of focus if we add inert to the iframe. So, to solve this issue, we want to add logic in our codebase to detect when any of the following (but not WithTooltip) is currently open:

• Modal
• Select
• WithPopover
• WithMenu (TBA)

And when they are open, we want to add inert to preview iframes to prevent focus wars.

Reproduction link

https://a11y-consolidation--635781f3500dd2c49e189caf.chromatic.com/?path=/story/overlay-modal--base

Reproduction steps

1. Go to https://a11y-consolidation--635781f3500dd2c49e189caf.chromatic.com/?path=/story/overlay-modal--base
2. Open the modal in the preview area
3. Click on the cog icon at the top-right of the sidebar, which opens a popover
4. Press Tab

System

SB 10.0 beta, Linux, Chrome 140

Additional context

No response