[Dialog, Popover, Menu, Select] Modality changes

[vladmoroz]

Dialogs

• Tab keypresses loop focus regardless of the modal prop value
  • modal will only mean "pointer" modality going forwards, which includes preventing outside clicks and scroll locking
  • Tabbing out should never close the popup
  • Focus is not trapped per se, it should still be able to escape the non-modal non-dismissible popups (for example, in Figma's non-dismissible popups keyboard focus is looped, but can be moved outside of the popup via pointer interactions).
• Backdrop part becomes optional and is only for presentation
  • Outside clicks should be prevented regardless of whether Backdrop is present
• Expose reason argument in onOpenChange to make it possible to prevent close on interactions like Esc keypress

Popover

• modal prop is added, false by default. Modality should work exactly the same as in dialogs.
  • The final decision re. whether default is true/false is contingent on whether touch should be treated as always modal
  • Popovers that open on hover shouldn't steal current focus so that you can "unhover" the trigger; however, once focus is manually placed into such popover, keyboard focus is looped normally.
  • We need to explore/research how to make it work with touch screen readers if an explicit close button isn't rendered

Menu, Select

• modal prop is added, false by default
  • Same as popovers re. the final decision re. whether default is true/false
  • Menus should still close on the first Tab keypress
• Menus that open on hover also shouldn't steal focus until it's placed into the popup manually via hovering an item or arrow keypress

Context:
https://www.figma.com/design/Y6VArf17CAhMUc1DBWKHIi/Modality?node-id=0-1&t=kN6j5qsqKlWGNn1B-1
https://www.notion.so/mui-org/Vlad-James-modality-107cbfe7b66080f5a68cfd7450da9433?pvs=4