butane-dialog
v1.0.0-alpha.10 accessibility dialog
butane-dialog
Accessible dialog JS library.
Install
Install butane-dialog, and add it to your package.json
dev dependencies.
$ npm install butane-dialog --save-dev
Then import
it into the file where you'll use it.
import ButaneDialog from 'butane-dialog'
Instantiate
// using the default options
ButaneDialog.init()
// using custom options, default options listed
ButaneDialog.init({
bodyActiveClass: 'dialog-isOpen',
dialogActiveClass: 'is-active',
contentContainer: '#main'
})
Expected DOM structure
<main id="main">
<button data-butane-dialog-controls="dialog">Show Dialog</button>
</main>
<div class="c-dialog" id="dialog" aria-hidden="true">
<div class="c-dialog__content" role="dialog" aria-labelledby="dialog-title" aria-modal="true">
<header class="c-dialog__header">
<h2 id="dialog-title">Dialog</h2>
<button data-butane-dialog-hide>Close</button>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, molestiae ad assumenda aliquam error aspernatur id consequatur architecto distinctio odit. Veritatis, dolorem rerum obcaecati quas velit quaerat saepe veniam sint?</p>
</div>
<div class="c-dialog__overlay" data-butane-dialog-hide></div>
</div>
License
MIT. © 2017 Alex Carpenter