modal

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

Browser Compatibility

Resources