Author: | jonathanlevaillant |
---|---|
Views Total: | 543 views |
Official Page: | Go to website |
Last Update: | October 3, 2020 |
License: | MIT |
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