inclusive-dialog

A modern accessible dialog utility.

Usage

Install

Using NPM, install inclusive-dialog, and save it to your package.json dependencies.

$ npm install inclusive-dialog --save-dev

Import

import Dialog from 'inclusive-dialog'

Initialize

const dialog = new Dialog ()

Options

const dialog = new Dialog ({
  activeClass: 'c-dialog--active'
})

Recommended DOM structure

<main>
  <button data-show-dialog="my-dialog" class="js-dialog">Show my dialog</button>
</main>

<div id="my-dialog" class="c-dialog" aria-hidden="true">
  <div role="dialog" aria-labelledby="dialog-title" class="c-dialog__content">
    <h1 id="dialog-title" tabindex="0">Dialog Title</h1>
    <button type="button" data-hide-dialog aria-label="Close this dialog window">Hide my dialog</button>
  </div>
  <div class="c-dialog__overlay" data-hide-dialog tabindex="-1"></div>
</div>

Recommended styling

.c-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-dialog[aria-hidden="true"] {
  pointer-events: none;
}

.c-dialog[aria-hidden="false"] {
  pointer-events: auto;
}

.c-dialog__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}

.c-dialog--active .c-dialog__overlay {
  opacity: 1;
}

.c-dialog__content {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
  z-index: 10;
  transform: translateY(50px);
}

.c-dialog--active .c-dialog__content {
  opacity: 1;
  transform: none;
}