Notes on Implementation
We implement Bootstrap’s Modal component, with some tweaks to the visual appearance. The documentation for Bootstrap Modals is applicable.
Modal dialogs will have a
role="alertdialog" on their container div element. The dialog’s name must be designated by an aria-labelledby reference to the first heading in the dialog or an aria-label. An aria-describedby attribute can also be used if more information is needed to be conveyed.
- A regular dialog (
role="dialog") should be used for form-like content in a dialog.
- An alert dialog (
role="alertdialog") should be brief, and all text should be associated with the dialog, using aria-labelledby and/or aria-describedby.