modal / dialog

A third party plugin we use to produce an accessible modal / dialog component.

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:

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

Installation

You can view full documentation for this component in the A11yDialog repository and the official A11yDialog Doucmentation Site. This documentation should be enough to get you going. There is also a demo on CodeSandbox.

npm install a11y-dialog --save

Browser Compatibility

List of Browser Support for this component
Chrome Latest
Firefox Latest
Edge Latest
Safari Latest
IE IE 11+

Resources