How to use a11y-dialog - 3 common examples

// @flow

import { describe, it } from "flow-typed-test";
import A11yDialog from "a11y-dialog";

let el = document.getElementById("my-accessible-dialog");
let containers = document.querySelectorAll("container");
let dialog;
if (el instanceof HTMLElement) {
  dialog = new A11yDialog(el);
}

describe("The `dialog` property", () => {
  it("should validate on default usage", () => {
    if (dialog.dialog instanceof HTMLDialogElement) {
      (dialog.dialog.open: boolean);
      (dialog.dialog.returnValue: string);
      (dialog.dialog.show: Function);
      (dialog.dialog.showModal: Function);
      (dialog.dialog.close: Function);
    }
  });
});

connect: function($el) {
      this.dialog = new A11yDialog($el);
      this.dialog.on('hide', () => this.onclose({ target: $el }));
      this.dialog.on('show', () => this.onopen({ target: $el }));
    },
    disconnect: function($el) {

init: () => {
    const dialogEl = document.querySelector('.js-dialog')

    if (!dialogEl) return

    a11ydialog = new A11yDialog(dialogEl)

    a11ydialog.on('show', (dialogEl) => {
      dialogEl.classList.remove('is-hidden')
    })

    a11ydialog.on('hide', (dialogEl) => {
      dialogEl.classList.add('is-hidden')
    })
  }
}