Should Popover be focus trapped?

[msdrigg]

I noticed that modal is focus trapped by default, but Popover isn't. Is there a good reason to not focus-trap Popover? I see that this random website says that popovers should be focus trapped (https://paste.twilio.design/components/popover/#accessibility) which is what made me wonder.

I also verified empirically that the popover's in google calendar are focus trapped.

Should headlessui's popover's be focus trapped by default? If not, what makes you say that? I'm not trying to be confrontational--I am just curious about accessibility and not sure what guidelines to follow.

[ng-hai]

I think it should be. Currently facing with webview problem, I cannot make the inner TextField autoFocus even using useRef to programmatically control focus.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Popovers should not be focus trapped, once you tab out of a Popover it will close, it allows you to implement (large) navigation menu's at the top of your page without taking up too much space initially and hiding the contents inside Popover.Panel.

If you want to, you can put a FocusTrap component inside the Popover.Panel.

"I also verified empirically that the popover's in google calendar are focus trapped."

Do you mean these popovers?

If so, that's implemented as a Dialog, not as a Popover and is likely what you want in this case.

[msdrigg]

Thats exactly what I was talking about. Interesting. I need to read up on dialog vs popover vs modal

[msdrigg]

Wait I see now a dialog is a modal. I think I assumed modals had to consume the whole screen, which was the source of my confusion.

[vincerubinetti]

In v2, the docs say you can add the modal prop to focus trap, but it doesn't work. Tabbing through just closes the popover.