Skip to main content
Designsystemet logoDesignsystemet logo

What are you looking for?

Try searching for…

Components

Dialog

There are two types of dialogs: modal and non-modal. A modal dialog requires users to take action before they can continue using the page. A non-modal dialog allows users to continue using the page, even while the dialog is open.

OverviewCodeAccessibility

We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.

Non-modal dialogs

When using non-modal dialogs, you must ensure that elements receiving focus through keyboard navigation do not end up behind the dialog and become hidden. See criteria 2.4.11 (w3.org) (AA) and 2.4.12 (w3.org) (AAA).

For non-modal dialogs, this means you must:

  • Ensure that focusable elements are never completely covered by the dialog when users navigate the page using the Tab key.
  • Ensure that the focus order is logical and that focus is always visible, so users navigating with a keyboard or screen reader can understand where focus is located.

Keyboard navigation

  • Esc closes the dialog (focus returns to the trigger)
Edit this page on github.com (opens in a new tab)