This is a Vue.js wrapper component for a11y-dialog@5.2.0 (demo) using portal-vue@2.1.0.
npm install vue-a11y-dialogIn 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-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: {
// ...
}
}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
}
}
}All
a11y-dialoginstance methods are available, see their docs for more.
- 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 thea11y-dialogStyling layer documentation for more information. - Usage:
<a11y-dialog disable-native>
<!-- ... -->
</a11y-dialog>- Property:
id - Type:
String - Required:
true - Description: The unique HTML
idattribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog. - Usage:
<a11y-dialog id="main-dialog">
<!-- ... -->
</a11y-dialog>- Property:
app-root - Type:
String,Array<String>— CSS Selector string. - Required:
true - Description: The selector(s)
a11y-dialogneeds to disable when the dialog is open. - Usage:
<a11y-dialog app-root="#app">
<!-- ... -->
</a11y-dialog>- 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>- 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>- Property:
title-id - Type:
String - Required:
false - Default: Defaults to
id + '-title'. - Description: The HTML
idattribute 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>- Property:
close-button-label - Type:
String - Required:
false - Default:
'Close this dialog window' - Description: The HTML
aria-labelattribute 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>- Property:
role - Type:
String - Required:
false - Default:
dialog - Description: The
roleattribute of the dialog element, eitherdialog(default) oralertdialogto make it a modal (preventing closing on click outside of ESC key). - Usage:
<a11y-dialog role="alertdialog">
<!-- ... -->
</a11y-dialog>- Returns: An
a11y-dialoginstance orundefined. - Description: This event emits the
a11y-dialoginstance once the component has been initialised. When it getsdestroyed, the event returnsundefined. 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
}
}
}- 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>- 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>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.