Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Fill 25% of the screen when viewing on desktop. This size should be increased on smaller viewportsDisable When viewed in smaller viewports, modals should take up the full screen to ensure they are visible and readable

  • Disable and apply a translucent overlay to background content to draw the user's attention to the modal

  • Keep the content in modals concise, clear, and action-oriented so users can quickly understand the action they need to take

  • Set the keyboard focus to the modal when it appears, ensuring that keyboard or assistive technology users can easily interact with the modal's content. When the modal is closed, ensure that focus is returned to its original location from before the modal was activated

...