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