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