Modals
A modal appears in an overlay on top of the main content in order to focus content and draw attention. Modals can be used to request more information in order to complete the current interaction or to break up an interaction into simpler steps. Typically modals are used for confirmation dialogs.
Default modal
Used to display simple information. This may only be a heading and text, but it may also include a button.
modal--default
List modal
Used for choosing a list in the people section. From this modal, users can create a new list or add people to a list.
modal--list
Form modal
Used when there is a modal that submits a form. One place this is used is for inviting people to be admins on the control panel.
modal--add-control-panel-user
Add Remove Modal
Used simply for adding or removing people from a list.
modal--add-remove
Answer
Best practices
Accessibility
- Focus
- When a dialog opens, focus should move to an element inside the dialog
- When the dialog closes, focus should return to the last focused element
- While the dialog is open, prevent tabular focus outside of the dialog
- The element that serves as the dialog container has a role of dialog
- The dialog container element has aria-modal set to true
- The dialog should have a value set for the `aria-labelledby` property that refers to a visible dialog title or a label specified by `aria-label`
- Optionally the `aria-describedby` can be used to provide a description for the dialog
- Users should be able to use the ESC key to close the dialog