Accessible Modal Dialog Component In Vanilla JavaScript – a11y-dialog

Category: Javascript , Modal & Popup | September 24, 2018
Author: jonathanlevaillant
Views Total: 279
Official Page: Go to website
Last Update: September 24, 2018
License: MIT

Preview:

Accessible Modal Dialog Component In Vanilla JavaScript – a11y-dialog

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);

Changelog:

v4.4.3 (09/24/2018)

  • fix ios issues

v4.3.9 (09/08/2018)

  • increased focus timeout

Leave a Reply