search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.59k stars 1.09k forks source link

Popover: isNonModal does not disable focus trapping #5564

Open thorbde opened 9 months ago

thorbde commented 9 months ago

Provide a general summary of the issue here

The isNonModal prop is described as follows: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.

However, when using the prop, only scrolling is enabled. Tabbing outside of the popover is not possible (it traps the focus), since the focus trapping seems to be handled by the Dialog component, which we use inside the Popover.

Either the prop description is vague, or the behavior should be changed (isNonModal should perhaps disable the focus trapping of the child Dialog)

🤔 Expected Behavior?

explained in description

😯 Current Behavior

explained in description

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Create a Popover, add a Dialog in it, and use isNonModal prop. Try tabbing outside the element

Version

1.0.0-rc.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macos sonoma

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

LFDanLu commented 9 months ago

Mind expanding on your use case here? I think having the popover's isNonModal setting turn off focus containment for child components could make sense in very specific use cases but typically Dialogs should contain focus except when using a global keyboard shortcut in non-modal Dialogs.