modal

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. This plugin is fully WCAG 2.1 compliant, lightweight, has a robust API, no dependencies, and properly manages focus.

NOTE: Due to a current bug in Chrome , we recommend using <div role="dialog"> (or <div role="alertdialog"> to make it behave like a modal) rather than leveraging the native <dialog> element. The bug: when clicking outside the <dialog> in Chrome, it does not close as expected.

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

Usage

<div id="my-accessible-dialog">
  <div tabindex="-1" data-a11y-dialog-hide></div>
	<!-- Using <div role="dialog"> instead of <dialog> due to chrome a bug. -->
	<!-- https://github.com/edenspiekermann/a11y-dialog/issues/89#issuecomment-426983208 -->
  <div role="dialog" aria-labelledby="dialog-title">
    <button type="button" data-a11y-dialog-hide aria-label="Close this dialog window">
      &times;
    </button>
    <h1 id="dialog-title">Dialog Title</h1>
  </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 a11y dialog repository. This documentation should be enough to get you going.

npm install a11y-dialog --save

Browser Compatibility

Chrome Latest
Firefox Latest
Edge Latest
Safari Latest
IE IE 9+

Resources