[Dialog] Accessibility Issues with modal={false} Behavior

[luiz504]

Hi Radix community! 👋 I’m working on a component that needs to:

• Be static section (non-modal) on large screens (with open/hidden state).

• Switch to a modal on small screens.

I’m using <Dialog.Root> with modal={false} for large screens, but running into two accessibility issues:

Problems

1. Focus Trap Persists

• Even with modal={false}, Radix injects focus-guard elements, and keyboard navigation gets "trapped" inside the content.

• Expected: Tab navigation should escape the dialog when modal={false}.

2. Unwanted Outside Interaction

• Clicking outside closes the dialog (even with Dialog.Overlay hidden).

• Workaround: Used onInteractOutside={(e) => e.preventDefault()} on <Dialog.Content>, but this feels hacky.

Questions

1. Is the right component for this hybrid (static/modal) use case?

2. How can I disable focus traps when modal={false}?

3. Is there a cleaner way to prevent outside clicks in non-modal mode?

Code Sample