THEMETRIAL

Accessible Modal Dialog Component In Vanilla JavaScript – a11y-dialog

Author:jonathanlevaillant
Views Total:4 views
Official Page:Go to website
Last Update:August 1, 2020
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="https://www.cssscript.com/./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.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)

v5.2.1 (03/09/2019)

v5.1.0 (12/29/2018)

v4.4.4 (11/18/2018)

  • remove prevent default for the tooltip dialogs

v4.4.3 (09/24/2018)

v4.3.9 (09/08/2018)


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.