Krafters UI 1.4.7

Modal dialog pattern

"A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close."

Source: ARIA Design Patterns

Dialog

Mobile Menu

Accessibility Requirements

  • The dialog has a label, either visible or for screen readers.
  • When a dialog opens, focus moves to an element contained in the dialog. Generally, focus is initially set on the first focusable element. However, the most appropriate focus placement will depend on the nature and size of the content.
    • Note that an immediate focus change can prevent screen readers from announcing the dialog label. You can use aria-describedby on the first focusable element to add context for the user.
  • Keyboard focus is trapped inside the dialog.
  • The dialog can be closed with the Escape key.
  • When the dialog is closed, the trigger button that opened the dialog receives focus.
  • By default, the dialog is closed when clicking on the backdrop. Set clickOutside prop to false to disable this behaviour.
  • If your dialog should divert users' attention to a brief, important message, you can set role="alertdialog". Its usage is described in the ARIA Design Patterns.