1. Home
  2. Components
  3. Modals

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