Accessible Modal Dialog Component In Vanilla JavaScript – a11y-dialog

Preview:

Description:

a11y-dialog is a Vanilla JavaScript (es6) component lets you create elegant, accessible modal windows & dialog boxes using WAI-ARIA.

Features:

• Auto set the focus to the first element of the modal window.
• Supports tab order.
• Close the modal window by pressing the ESC key.
• Clicking outside or on an element to close the modal window.
• Set the focus to the trigger button when the modal window is closed.
• Multiple modal windows on the same page.

How to  use it:

Download and import the a11y-dialog component into your document as a module.

<script type="module">
  import Dialogs from './src/a11y-dialog-component.js';
</script>

Import the stylesheet for the basic styling of the modal window.

<link rel="stylesheet" href="./src/main.css">

Initialize the a11y-dialog with options.

Dialogs.init({
  // options here
});

Create a modal window following the markup structure like this:

<div id="example" class="c-dialog">
  <div class="c-dialog__inner">
    <header>
      <h2 id="dialog-title">Dialog</h2>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non.</p>
  </div>
</div>

Show the modal window on the page.

Dialogs.create('example', {
  labelledbyId: 'dialog-title',
  describedbyId: 'dialog-desc'
});

Sometimes you might need a trigger button to toggle the modal window.

<button
  type="button"
  id="dialog-trigger"
  class="c-btn"
  data-component="dialog"
  data-target="example"
  data-labelledby="dialog-title"
  data-describedby="dialog-desc">
  Open Dialog
</button>

Customize the CSS selectors:

Dialogs.init({
  documentClass: 'js-document',
  documentDisabledClass: 'is-disabled',
  triggerActiveClass: 'is-active',
});

Open/close the modal window programmatically.

Dialogs.open(dialogID);
Dialogs.close(dialogID);

More API methods.

Dialogs.toggle(dialogID);
Dialogs.destroy(dialogID);
Dialogs.create();

Changelog:

v5.5.1 (10/03/2020)

• Pass the closing trigger to onClose

v5.5.0 (08/01/2020)

• add `enableAutoFocus` parameter

v5.4.1 (01/25/2020)

• add `isInitialized` parameter to prevent errors when the dialog is not found

v5.4.0 (09/29/2019)

• add `event.preventDefault()` on the toggle method

v5.3.1 (08/31/2019)

• add `event.preventDefault()` on opening & closing triggers

v5.3.0 (08/10/2019)

• remove clear screen
• add the opening trigger as second parameter for the `onOpen()` and `onClose()` functions

v5.2.3 (04/18/2019)

• update package

v5.2.1 (03/09/2019)

• add helper selector

v5.1.0 (12/29/2018)

• add create method

v4.4.4 (11/18/2018)

• remove prevent default for the tooltip dialogs

v4.4.3 (09/24/2018)

• fix ios issues

v4.3.9 (09/08/2018)

• increased focus timeout