Vue.js component for a11y-dialog
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Updated to a11y-dialog@5.1.0 and added way to disable native dialog… Jun 16, 2018
src Updated to a11y-dialog@5.1.0 and added way to disable native dialog… Jun 16, 2018
.babelrc.js 📦 Adds buildstep with Rollup Jun 13, 2018
.editorconfig
.eslintignore 📦 Adds buildstep with Rollup Jun 13, 2018
.eslintrc.js 📦 Adds buildstep with Rollup Jun 13, 2018
.gitignore 📦 Adds buildstep with Rollup Jun 13, 2018
LICENSE 🎉 (init) Project setup Jun 11, 2018
README.md Fix template example in readme Sep 20, 2018
package-lock.json 0.2.0 Jun 16, 2018
package.json 0.2.0 Jun 16, 2018
rollup.config.js 📦 Adds buildstep with Rollup Jun 13, 2018

README.md

Vue A11yDialog

This is a Vue.js wrapper component for a11y-dialog@5.1.0 (demo).

Install

npm install vue-a11y-dialog

Usage

In your main.js application file, install the component:

import VueA11yDialog from 'vue-a11y-dialog'

Vue.use(VueA11yDialog)

Then use it as follows:

<template>
  <div id="app">
    <!-- ... -->
    <button type="button" @click="openDialog">
      Open dialog
    </button>

    <a11y-dialog id="app-dialog" app-root="#app" @dialog-ref="assignDialogRef">
      <h1 slot="title">Your dialog title</h1>
      <div>
        <p>Your content</p>
      </div>
    </a11y-dialog>
  </div>
</template>
export default {
  name: 'YourComponent',

  data: () => ({
    dialog: null
  }),

  methods: {
    openDialog () {
      if (this.dialog) {
        this.dialog.show()
      }
    },

    assignDialogRef (dialog) {
      this.dialog = dialog
    }
  }
}

It's important to assign the direct reference to the dialog instance via @dialog-ref, otherwise there is no way to call its methods.

Alternatively, you can also import the component directly into your file without installing it first:

import { VueA11yDialog } from 'vue-a11y-dialog'
export default {
  name: 'YourComponent',

  components: {
    'a11y-dialog': VueA11yDialog
  },

  methods: {
    // ...
  }
}

API

All a11y-dialog instance methods are available, see their docs for more.

disable-native

  • Property: disable-native
  • Type: Boolean
  • Default: false
  • Description: Per default we're using the native <dialog> element. However, if you want to disable that and use a <div role="dialog"> instead, you can just do that by adding this attribute. This gives you full control (and responsibilites) over styling. Read the a11y-dialog Styling layer documentation for more information.
  • Usage:
<a11y-dialog disable-native>
  <!-- ... -->
</a11y-dialog>

id

  • Property: id
  • Type: String
  • Required: true
  • Description: The unique HTML id attribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog.
  • Usage:
<a11y-dialog id="main-dialog">
  <!-- ... -->
</a11y-dialog>

app-root

  • Property: appRoot
  • Type: String, Array<String> — CSS Selector string.
  • Required: true
  • Description: The selector(s) a11y-dialog needs to disable when the dialog is open.
  • Usage:
<a11y-dialog app-root="#app">
  <!-- ... -->
</a11y-dialog>

class-names

  • Property: class-names
  • Type: Object
  • Required: false
  • Default: {}
  • Description: Object of classes for each HTML element of the dialog element. Keys are: base, overlay, element, document, title, closeButton. See a11y-dialog docs for reference.
  • Usage:
<a11y-dialog :class-names="{ base: 'base-class', overlay: 'overlay-class' }">
  <!-- ... -->
</a11y-dialog>

title-id

  • Property: titleId
  • Type: String
  • Required: false
  • Default: Defaults to id + '-title'.
  • Description: The HTML id attribute of the dialog’s title element, used by assistive technologies to provide context and meaning to the dialog window.
  • Usage:
<a11y-dialog title-id="main-title">
  <!-- ... -->
</a11y-dialog>

close-button-label

  • Property: closeButtonLabel
  • Type: String
  • Required: false
  • Default: 'Close this dialog window'
  • Description: The HTML aria-label attribute of the close button, used by assistive technologies to provide extra meaning to the usual cross-mark.
  • Usage:
<a11y-dialog close-button-label="Close this super dialog">
  <!-- ... -->
</a11y-dialog>

Events

dialog-ref

  • Returns: An a11y-dialog instance or undefined.
  • Description: This event emits the a11y-dialog instance once the component has been initialised. When it gets destroyed, the event returns undefined. This is needed to call instance methods of the dialog, e.g. this.dialog.show().
  • Usage:
<a11y-dialog @dialog-ref="assignDialogRef">
  <!-- ... -->
</a11y-dialog>
export default {
  // ...
  methods: {
    assignDialogRef (dialog) {
      this.dialog = dialog
    }
  }
}

Slots

title

  • Name: title
  • Default: \u00D7 (×)
  • Description: The title of the dialog, mandatory in the document to provide context to assistive technology. Could be hidden with CSS (while remaining accessible).
  • Usage:
<a11y-dialog>
  <h1 slot="title">Your dialog title</h1>
  <!-- ... -->
</a11y-dialog>

closeButtonContent

  • Name: closeButtonLabel
  • Default: \u00D7 (×)
  • Description: The string that is the inner HTML of the close button.
  • Usage:
<a11y-dialog>
  <span slot="closeButtonContent">Close dialog</span>
  <!-- ... -->
</a11y-dialog>

Server-side Rendering

This is a client-only component; a11y-dialog won't render anything on the server and wait for your bundle to be executed on the client.