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

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: () => ({})
}

Preview:

Changelog:

v0.11.1 (08/08/2023)

• Update

v0.9.0beta (03/07/2023)

• Update

v0.8.0beta (08/08/2022)

• fix: explicit compatConfig for overriding potential consumer custom one

07/30/2022

• fix: make it work when paired with @vue3 + @vue/compat

Download Details:

Author: renatodeleao

Live Demo: https://renatodeleao.github.io/a11y-vue-dialog/guide/advanced-usage.html

Download Link: https://github.com/renatodeleao/a11y-vue-dialog/archive/refs/heads/master.zip

Official Website: https://github.com/renatodeleao/a11y-vue-dialog

Install & Download:

# Yarn
$ yarn add a11y-dialog

# NPM
$ npm i a11y-dialog