GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → morkro → Vue A11y Dialog

morkro / Vue A11y Dialog

Licence: mit
Vue.js component for a11y-dialog

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

vuedialogaccessibilitya11yportal

Projects that are alternatives of or similar to Vue A11y Dialog

A11y Dialog
A very lightweight and flexible accessible modal dialog script.
Stars: ✭ 1,768 (+2620%)
Mutual labels:  accessibility, a11y, dialog
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (+30.77%)
Mutual labels:  accessibility, a11y, dialog
Accessible modal window
Accessible modal dialogs
Stars: ✭ 196 (+201.54%)
Mutual labels:  accessibility, a11y, dialog
Launchy
Launchy: An Accessible Modal Window
Stars: ✭ 89 (+36.92%)
Mutual labels:  accessibility, a11y, dialog
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (-63.08%)
Mutual labels:  accessibility, a11y, dialog
Van11y Accessible Tab Panel Aria
ES2015 accessible tabs panel system, using ARIA
Stars: ✭ 58 (-10.77%)
Mutual labels:  accessibility, a11y
Accesslint.js
Keep accessibility errors in check.
Stars: ✭ 423 (+550.77%)
Mutual labels:  accessibility, a11y
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (+604.62%)
Mutual labels:  portal, dialog
React Useportal
🌀 React hook for Portals
Stars: ✭ 698 (+973.85%)
Mutual labels:  portal, dialog
A11y styled form controls
Various styled accessible form controls
Stars: ✭ 335 (+415.38%)
Mutual labels:  accessibility, a11y
A11y Style Guide
Accessibility (A11Y) Style Guide
Stars: ✭ 493 (+658.46%)
Mutual labels:  accessibility, a11y
Nextsimplestarter
🐳 Simple and Accessible PWA boilerplate with Nextjs 10 + React Hooks
Stars: ✭ 744 (+1044.62%)
Mutual labels:  accessibility, a11y
Koa11y
Easily check for website accessibility issues
Stars: ✭ 403 (+520%)
Mutual labels:  accessibility, a11y
Accessible components
Listing of accessible components & patterns
Stars: ✭ 393 (+504.62%)
Mutual labels:  accessibility, a11y
Construct.css
Focus on the content and structure of your HTML
Stars: ✭ 432 (+564.62%)
Mutual labels:  accessibility, a11y
Axe Core
Accessibility engine for automated Web UI testing
Stars: ✭ 4,293 (+6504.62%)
Mutual labels:  accessibility, a11y
Reakit
Toolkit for building accessible rich web apps with React
Stars: ✭ 5,265 (+8000%)
Mutual labels:  accessibility, a11y
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-63.08%)
Mutual labels:  accessibility, a11y
Playbook Ios
📘A library for isolated developing UI components and automatically taking snapshots of them.
Stars: ✭ 830 (+1176.92%)
Mutual labels:  accessibility, a11y
Axegrinder
Crawl websites for accessibility issues from the command line.
Stars: ✭ 12 (-81.54%)
Mutual labels:  accessibility, a11y
View All Similar Projects ➔

Vue A11yDialog Build Status

This is a Vue.js wrapper component for [email protected] (demo).

Vue 2 and 3

The newest major release of this package comes with Vue 3 support and removes the dependency to [email protected]. If you still need to support Vue 2, you can stay on version 0.5.2.

Install

npm install vue-a11y-dialog

Usage

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

Vue 2

import VueA11yDialog from 'vue-a11y-dialog'

Vue.use(VueA11yDialog)

Vue 3

import { createApp } from 'vue'
import VueA11yDialog from 'vue-a11y-dialog'
import App from './App.vue'

createApp(App).use(VueA11yDialog).mount('#app')

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-root="#dialog-root"
      @dialog-ref="assignDialogRef"
    >
      <template v-slot:title>
        <span>Your dialog title</span>
      </template>
      <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
    }
  }
}

In your index.html, add a container where your dialog will be rendered into.

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div id="dialog-root"></div>
  </body>
</html>

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 { A11yDialog } from 'vue-a11y-dialog'
export default {
  name: 'YourComponent',

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

  methods: {
    // ...
  }
}

Multiple dialogs

It's possible to use multiple dialogs in the same component, just make sure to assign the different dialog instances separately.

In your <template>:

<template>
  <div id="app">
    <!-- First dialog -->
    <a11y-dialog
      id="first-dialog"
      app-root="#app"
      dialog-root="#dialog-root"
      @dialog-ref="dialog => assignDialogRef('first', dialog)"
    >
      <template v-slot:title>
        <span>First dialog title</span>
      </template>
      <div>
        <p>Your content</p>
      </div>
    </a11y-dialog>

    <!-- Second dialog -->
    <a11y-dialog
      id="second-dialog"
      app-root="#app"
      dialog-root="#dialog-root"
      @dialog-ref="dialog => assignDialogRef('second', dialog)"
    >
      <template v-slot:title>
        <span>Second dialog title</span>
      </template>
      <div>
        <p>Your content</p>
      </div>
    </a11y-dialog>
  </div>
</template>

In your <script>:

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

  data: () => ({
    dialogs: {}
  }),

  methods: {
    assignDialogRef(type, dialog) {
      this.dialogs[type] = dialog
    }
  }
}

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: app-root
  • 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>

dialog-root

  • Property: dialog-root
  • Type: String — CSS Selector string.
  • Required: true
  • Description: The container for the dialog to be rendered into.
  • Usage:
<a11y-dialog dialog-root="#dialog-root">
  <!-- ... -->
</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: title-id
  • 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: close-button-label
  • 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>

role

  • Property: role
  • Type: String
  • Required: false
  • Default: dialog
  • Description: The role attribute of the dialog element, either dialog (default) or alertdialog to make it a modal (preventing closing on click outside of ESC key).
  • Usage:
<a11y-dialog role="alertdialog">
  <!-- ... -->
</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
  • 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>
  <template v-slot:title>
    <span>Your dialog title</span>
  </template>
  <!-- ... -->
</a11y-dialog>

closeButtonContent

  • Name: closeButtonLabel
  • Default: \u00D7 (×)
  • Description: The string that is the inner HTML of the close button.
  • Usage:
<a11y-dialog>
  <template v-slot:closeButtonContent>
    <span>Close dialog</span>
  </template>
  <!-- ... -->
</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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].