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.
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.
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