GAUD-10314 - Add legacy browser mode that creates scroll containers for browsers that don't support popover

[svanherk]

POC for a "Legacy Browser Mode" that could handle the issue with using position: sticky and the stacking context it creates, mixed with our dialogs and toasts (that don't use the top layer).

Our current d2l-page implementation relies on position: sticky to get the body scroll behaviour we want. Rather than abandon body scroll, or force all dialogs and toasts to be at the top-level/body, we could move our dialogs and toasts to the top layer. Then, for old browsers, we could render an alternative layout that uses scrolling containers instead of body scroll, that could be removed in a few years when we hard-block those browsers.

It means supporting (and running axe and vdiff tests for) two versions, but I've worked that second mode to be as css-based as possible. It's pretty clean, although it's hard to be totally confident with so much of d2l-page left to implement. But it may be worth it to unlock the future we want - we could even lean into stacking contexts and simplify the z-indexes there, as well as in all our other components if they detect they're in a d2l-page.

[github-actions]

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL	https://live.d2l.dev/prs/BrightspaceUI/core/pr-7235/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

[dlockhart]

I'm shocked at how few changes this required, and it's awesome that they're (mostly) just CSS. 🎉

[svanherk]

Yeah, I'm worried it'll get messier once all functionality is in, but it's for super old browsers anyways - we could degrade that stuff gracefully too and not support everything one-on-one.