WAI-ARIA Compliant Dialog Box In JavaScript – a11y-dialog

Preview:

Description:

a11y-dialog is a pure JavaScript plugin to create fully accessible dialog boxes with custom styling and event handling.

Based on the native <dialog> element.

Installation:

# NPM
$ npm install a11y-dialog --save

How to use it:

Import the a11y-dialog.js script into the html file.

<script src="a11y-dialog.js"></script>

Create the dialog box following the html structure as follows:

<div class="dialog" aria-hidden="true" id="myDialog">
  <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
  <div class="dialog-content" aria-labelledby="dialogTitle" aria-describedby="dialogDescription" role="dialog">
    <div role="document">
      <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
      <h1 id="dialogTitle">Dialog Title</h1>
      <p id="dialogDescription">Dialog Content</p>
    </div>
  </div>
</div>

Create an element to toggle the dialog box. Note that the ‘data-a11y-dialog-show’ has to match the dialog ID.

<button data-a11y-dialog-show="myDialog">open the dialog</button>

The necessary styling for the dialog to work.

.dialog[aria-hidden="true"] {
  display: none;
}

The extra dialog styling to make it shiny.

.dialog-overlay {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.66);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.dialog-content {
  background-color: rgb(255, 255, 255);
  z-index: 3;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.dialog-content {
  padding: 1em;
  max-width: 90%;
  width: 600px;
  border-radius: 2px;
}
@media screen and (min-width: 700px) {
  .dialog-content {
    padding: 2em;
  }
}
.dialog-overlay {
  background-color: rgba(43, 46, 56, 0.9);
}
.dialog h1 {
  margin: 0;
  font-size: 1.25em;
}
.dialog-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  border: 0;
  padding: 0;
  background-color: transparent;
  font-weight: bold;
  font-size: 1.25em;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
}
@media screen and (min-width: 700px) {
  .dialog-close {
    top: 1em;
    right: 1em;
  }
}

Initialize the a11y-dialog via JavaScript.

const myDialog = new A11yDialog(el, containers);

API methods.

// Show the dialog
myDialog.show();
// Hide the dialog
myDialog.hide();
// Unbind click listeners from dialog openers and closers and remove all bound
// custom event listeners registered with `.on()`
myDialog.destroy();
// Bind click listeners to dialog openers and closers
myDialog.create();

Event handlers.

myDialogon('show', function (dialogEl, event) {
  // Do something when dialog gets shown
  // Note: opener is `event.currentTarget`
});
myDialogon('hide', function (dialogEl, event) {
  // Do something when dialog gets hidden
  // Note: closer is `event.currentTarget`
});
myDialogon('destroy', function (dialogEl) {
  // Do something when dialog gets destroyed
});
myDialogon('create', function (dialogEl) {
  // Do something when dialog gets created
  // Note: because the initial `create()` call is made from the constructor, it
  // is not possible to react to this particular one (as registering will be
  // done after instantiation)
});

Changelog:

v7.5.2 (12/20/2020)

• Updated to the latest version