Accessibility-first Modal Dialog Component - a11y-vue-dialog

Install & Download:

# Yarn
$ yarn add a11y-dialog
# NPM
$ npm i a11y-dialog

Description:

A renderless/headless, accessibility-first modal dialog component for Vue apps.

How to use it:

1. Import and register the A11yDialog.

import { A11yDialog } from 'a11y-dialog'

export default {
  // ...
  components: { A11yDialog },
  // ...
}

2. Add your content to the modal dialog.

<template>
  <a11y-dialog 
    v-bind="$attrs" 
    v-on="$listeners"
    v-slot:default="{ titleRef, closeRef }"
  > 
    <h1 v-bind="titleRef.props">{{ title }}</h1>
    <button v-bind="closeRef.props" v-on="closeRef.listeners">
    ...
    <slot />
  </a11y-dialog>
</template>

export default {
  name: 'AppBaseDialog',
  components: { A11yDialog },
  props: {
    title: {
      type: String,
      required: true
    }
  }
}

3. Enable a button to toggle the modal dialog.

<button @click="isOpen = true">Open dialog</button>
<DialogConfirm :open="isOpen" @close="isOpen = false" @confirm="handleSubmit">
  <template v-slot:title>
    Your markup,
    <strong>your rules</strong>
  </template>
  <template
    v-slot:default
  >Are you sure you want to be overriding CSS or pass a thousand props again?</template>
</DialogConfirm>

4. Available component props.

/**
 * @desc control's dialog visibility
 */
open: {
  type: Boolean,
  default: false
},
/**
 * @desc accessibilty attribute: possible usage as modal. If "alertdialog"
 * will not close on backdrop click.
 * @see https://github.com/edenspiekermann/a11y-dialog#usage-as-a-modal
 */
role: {
  type: String,
  default: "dialog",
  validator: (role) => VALID_ROLES.indexOf(role) > -1
},
/**
 * @desc accessibilty attribute: hide content from screen readers
 * when dialog is open. if null, defaults to siblings of portal-target element
 */
contentRoot: {
  type: [String, null],
  default: null
},
/**
 * @desc focus-trap package configuration object
 * @see {@link https://github.com/focus-trap/focus-trap#usage}
 */
focusTrapCreateOptions: {
  type: Object,
  default: () => ({})
}