Prevent scrolling while popovers are open

[devongovett]

🙋 Feature Request

We currently allow the page to scroll while popovers and menus are visible, and hide them when scrolling occurs to avoid janky repositioning. However, this leads to usability issues (e.g. #900, #1852, #2766). Instead, we should prevent scrolling from occurring outside the popover while it is visible similar to what we do for modals.

🤔 Expected Behavior

When a popover is visible, prevent the page from scrolling using the usePreventScroll hook. However, this does not prevent scrolling nested scrollable regions (e.g. tables and other collections), so we will also need a way to handle those somehow. The easiest way would probably be to render an underlay like we do for modals, except make it fully transparent.

We already prevent clicking on external elements while popovers are open, so this would extend that behavior so it also affects hover which I think makes sense as well.

Not sure if this is considered a breaking change. We will need to discuss whether it is behind an option for the useOverlay hook or just becomes the new default.

🧢 Your Company/Team

RSP

[majornista]

I think to prevent scrolling will be less desirable from an accessibility standpoint than repositioning the overlay on scroll. When a the full contents of an overlay cannot fit within the visible viewport, as will sometimes be the case when a user has zoomed the browser, a user will need to be able to scroll the overlay into view to read the content. With good support for Success Criterion 1.4.10 Reflow, the need for scroll can be mitigated, but there are still cases where some or all of an overlay's content might display outside the visible viewport and where scrolling without closing the overlay will be necessary. See: https://github.com/adobe/react-spectrum/pull/2842#issuecomment-1062169978

Related success criteria: https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus and https://www.w3.org/TR/WCAG21/#reflow

[LFDanLu]

To test: pinch zooming of dialogs other methods of zoom (CMD +, pinch zooming, other magnification tools)

EDIT: pinch zooming on Dialogs currently works w/ Android

[majornista]

For the record, while tangentially related because it involves the prevent scrolling behavior of focusSafely, this issue and the related PR #3475 do not resolve #2766, which has its own fix in PR #2767.