butane-show-hide

An accessible show/hide JS library.

View modal and sidenav examples for usage.

Features

Traps focus via the inert attribute Hide via the ESC key or an optional overlay Assumes no styling layer

Install

$ npm install butane-show-hide --save-dev

Usage

import ButaneShowHide from 'butane-show-hide'

ButaneShowHide.init()

Options

ButaneShowHide.init({
  showTrigger: 'data-custom-show',
  hideTrigger: 'data-custom-hide',
  onShow: (trigger, target) => console.log('Show ' + target.getAttribute('id')),
  onHide: (trigger, target) => console.log('Hide ' + target.getAttribute('id'))
})

Acknowledgements

This project was heavily inspired by the work of Indrashish Ghoshs micromodal and Hugo Giraudel's work on A11y Dialog.

License

MIT. 2018 Alex Carpenter