modal / dialog

The modal / dialog component is one that is frequently used in UI design and popular enough to where we don’t feel like we need to reinvent the wheel. After an exhaustive search for a third party plugin that met all of our accessibility and implementation requirements, we were able to settle on using A11yDialog by Kitty Giraudel. This plugin is fully WCAG 2.1 compliant, lightweight, has a robust API, no dependencies, and properly manages focus.

NOTE:

In early 2021, A11yDialog 7.0 was released and introduced breaking changes. A summary of those changes include:

• No more support for the <dialog> HTML element
• No more usage of the open HTML attribute
• Different expected markup
• More flexible position in the DOM

Documentation for Migraging to v7.

A11yDialog also has React and Vue versions we can leverage for projects in those environments.

Usage

<!-- 1. The dialog container -->
<div
  id="your-dialog-id"
  aria-labelledby="your-dialog-title-id"
  aria-hidden="true"
>
  <!-- 2. The dialog overlay -->
  <div data-a11y-dialog-hide></div>
  <!-- 3. The actual dialog -->
  <div role="document">
    <!-- 4. The close button -->
    <button type="button" data-a11y-dialog-hide aria-label="Close dialog">
      &times;
    </button>
    <!-- 5. The dialog title -->
    <h2 id="your-dialog-title-id">Your dialog title</h2>
    <!-- 6. Dialog content -->
    <p>Dialog content here</p>
  </div>
</div>

					

[data-a11y-dialog-native] > :first-child {
  display: none;
}

dialog[open] {
  display: block;
}

.dialog-container[aria-hidden='true'] {
  display: none;
}

						

// Get the dialog element (with the accessor method you want)
const el = document.getElementById('my-accessible-dialog');

// Instantiate a new A11yDialog module
const dialog = new A11yDialog(el);

						

Documentation

Browser Compatibility

Resources