Rework modal dialogs

Current modal implementation appears quirky in current browser/AT combinations, and has some known shortcomings:

• while the modal uses focus trapping and aria-modal, this is still not supported correctly in all browser/ATs. for instance, Firefox/JAWS still allows navigating/reading through the underlying page; similarly, iOS VO ignores it, see https://github.com/twbs/bootstrap/issues/26770
• when the dialog is opened and focus is moved, NVDA does not announce that we’re in a modal - see https://github.com/twbs/bootstrap/issues/33715
• JAWS seems to have a weird issue with the initially set focus - once the modal is opened, the next tab and reading key press all go to the last button in the dialog, rather than starting at the top of the modal

We should take closer inspiration from https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html (but that misses the fix for iOS/VO, so would still not be sufficient to copy the approach from there). as mentioned previously (though can’t quite find where, worth also looking at approaches like https://github.com/KittyGiraudel/a11y-dialog, and possibly https://github.com/WICG/inert

[mkurz]

With the recent release of Safari 15.4 all major browser now support the <dialog> element natively:

• https://caniuse.com/dialog
• https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes
• https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

[RyanBerliner]

Sounds like there’s enough interest in improving these dialogs (modal & off canvas bootstrap components) - I should be able to push a PR this week so you all can start testing something tangible.