├── .editorconfig
├── .eslintrc.js
├── .github
    └── workflows
    │   └── ci.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── cypress.json
├── cypress
    ├── fixtures
    │   └── example.json
    ├── plugins
    │   └── index.js
    └── support
    │   └── index.js
├── dist
    ├── vue-a11y-dialog.esm.js
    └── vue-a11y-dialog.umd.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── A11yDialog.vue
    ├── Demo.spec.ct.js
    ├── Demo.vue
    ├── demo.css
    ├── demo.js
    └── index.js
└── vite.config.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2021: true,
 5 |     node: true,
 6 |     'cypress/globals': true,
 7 |   },
 8 |   parser: 'vue-eslint-parser',
 9 |   parserOptions: {
10 |     ecmaVersion: 2020,
11 |   },
12 |   plugins: ['vue', 'cypress'],
13 |   extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17 |     'vue/script-indent': 'off',
18 |     'vue/html-indent': 'off',
19 |     'vue/no-unused-vars': 'error',
20 |     'vue/require-default-prop': 'off',
21 |     indent: 'off',
22 |     semi: [2, 'never'],
23 |     quotes: [2, 'single'],
24 |     'cypress/no-assigning-return-values': 'error',
25 |     'cypress/no-unnecessary-waiting': 'error',
26 |     'cypress/assertion-before-screenshot': 'warn',
27 |     'cypress/no-force': 'warn',
28 |     'cypress/no-async-tests': 'error',
29 |     'cypress/no-pause': 'error',
30 |   },
31 | }
32 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: Lint and tests
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 |   pull_request:
 7 |     branches:
 8 |       - main
 9 | jobs:
10 |   run-lint-and-tests:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout
14 |         uses: actions/checkout@v2
15 | 
16 |       - name: Install npm dependencies
17 |         run: npm ci
18 | 
19 |       - name: Run lint
20 |         run: npm run lint
21 | 
22 |       - name: Run tests
23 |         run: npm run test:ci
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | .DS_Store
4 | *.log
5 | .vscode
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file.
  4 | 
  5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
  6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
  7 | 
  8 | ## Unreleased
  9 | 
 10 | - tbd
 11 | 
 12 | ## [1.1.2] 2022-04-02
 13 | 
 14 | ### Changed
 15 | 
 16 | - Updates `alertdialog` to be conditionally applied [#39](https://github.com/morkro/vue-a11y-dialog/pull/39) (Thanks to [@roblevintennis](https://github.com/roblevintennis))
 17 | 
 18 | ## [1.1.1] 2022-01-24
 19 | 
 20 | ### Removed
 21 | 
 22 | - Remove obsolete concept of app root [#37](https://github.com/morkro/vue-a11y-dialog/pull/37) (Thanks to [@KittyGiraudel](https://github.com/KittyGiraudel))
 23 | 
 24 | ## [1.1.0] 2022-01-24
 25 | 
 26 | ### Added
 27 | 
 28 | - Build setup now done with Vite [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis))
 29 | - Demo configuration to run locally
 30 | - Added ESM build output
 31 | 
 32 | ### Changed
 33 | 
 34 | - Updated `a11y-dialog` to latest version [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis))
 35 | - Updated development dependencies
 36 | 
 37 | ## [1.1.0] 2022-01-24
 38 | 
 39 | ### Added
 40 | 
 41 | - Build setup now done with Vite [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis))
 42 | - Demo configuration to run locally
 43 | - Added ESM build output
 44 | 
 45 | ### Changed
 46 | 
 47 | - Updated `a11y-dialog` to latest version [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis))
 48 | - Updated development dependencies
 49 | - Tests now done with Cypress [#31](https://github.com/morkro/vue-a11y-dialog/pull/31) (Thanks to [@roblevintennis](https://github.com/roblevintennis))
 50 | - More updates to Vue 3 setup (e.g. `emits`) (Note to [#30](https://github.com/morkro/vue-a11y-dialog/pull/30))
 51 | 
 52 | ### Removed
 53 | 
 54 | - Jest
 55 | - Rollup (now under-the-hood configuration via Vite)
 56 | 
 57 | ## [1.0.0] - 2021-02-21
 58 | 
 59 | This is the first major release that introduces breaking changes. From `1.0.0` onwards the API will support Vue 3.
 60 | 
 61 | ### Changed
 62 | 
 63 | - Updated API to support Vue 3 syntax [#25](https://github.com/morkro/vue-a11y-dialog/pull/25) (Thanks to [@marcus-herrmann](https://github.com/marcus-herrmann))
 64 | 
 65 | ### Removed
 66 | 
 67 | - Removed dependency to `portal-vue`
 68 | 
 69 | ## [0.5.2] - 2020-04-14
 70 | 
 71 | ### Changed
 72 | 
 73 | - Updated `a11y-dialog` to latest version
 74 | 
 75 | ### Fixed
 76 | 
 77 | - Fixes mistakenly used `titleId` in `aria-labelledby` with `fullTitleId` ([#23](https://github.com/morkro/vue-a11y-dialog/pull/23))
 78 | 
 79 | ## [0.5.1] - 2020-02-12
 80 | 
 81 | ### Changed
 82 | 
 83 | - Changed three minor occurences of arrow functions with normal functions to allow support for IE11.
 84 | - Updated a few dependencies, including latest `portal-vue` release
 85 | 
 86 | ### Security
 87 | 
 88 | - Ran `npm audit` and fixed a couple vulneribility warnings.
 89 | 
 90 | ## [0.5.0] - 2019-04-16
 91 | 
 92 | ### Changed
 93 | 
 94 | - Upgraded to `portal-vue@2.1.0` which required refactoring parts of the implementation.
 95 | - Upgraded development dependencies.
 96 | 
 97 | ## [0.4.2] - 2019-02-21
 98 | 
 99 | ### Fixed
100 | 
101 | - Vue.js library from being included to the bundle.
102 | 
103 | ## [0.4.1] - 2019-02-20
104 | 
105 | ### Added
106 | 
107 | - This CHANGELOG.
108 | - Some basic component tests.
109 | 
110 | ### Changed
111 | 
112 | - Upgraded dependencies which resulted in a new bundle.
113 | - Updated README to use new `v-slot` syntax.
114 | 
115 | ### Fixed
116 | 
117 | - Mistake in API documentation of `title` slot.
118 | 
119 | ## [0.4.0] - 2018-12-14
120 | 
121 | ## Added
122 | 
123 | - [PortalVue](https://github.com/LinusBorg/portal-vue) to render the dialog outside of the application container, addressing [#5](https://github.com/morkro/vue-a11y-dialog/issues/5).
124 | 
125 | ## [0.3.1] - 2018-06-03
126 | 
127 | ### Security
128 | 
129 | - Removes full component file path from development environment in bundled output.
130 | 
131 | ## [0.3.0] - 2018-06-03
132 | 
133 | ### Added
134 | 
135 | - Adds possibility to use `alertdialog` role.
136 | 
137 | ## [0.2.0] - 2018-06-16
138 | 
139 | ### Added
140 | 
141 | - New API to disable the native `<dialog>` element.
142 | 
143 | ### Changed
144 | 
145 | - Upgrades to `a11y-dialog@5.1.0`.
146 | 
147 | ## [0.1.0] - 2018-06-13
148 | 
149 | ### Added
150 | 
151 | - Everything.
152 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Moritz Kröger
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue A11yDialog [![Build Status](https://travis-ci.org/morkro/vue-a11y-dialog.svg?branch=master)](https://travis-ci.org/morkro/vue-a11y-dialog)
  2 | 
  3 | This is a Vue.js wrapper component for [`a11y-dialog@7.3.0`](https://github.com/KittyGiraudel/a11y-dialog) ([**Demo on CodeSandbox**](https://codesandbox.io/s/rj20wr1kpp)).
  4 | 
  5 | - [Installation](#installation)
  6 | - [Usage](#usage)
  7 |   - [Multiple dialogs](#multiple-dialogs)
  8 | - [API](#api)
  9 | - [Events](#events)
 10 | - [Slots](#slots)
 11 | - [Server-side Rendering](#server-side-rendering)
 12 | 
 13 | ## Installation
 14 | 
 15 | This library supports both Vue 3 and Vue 2. However, active maintenance is focused on Vue 3. If you still need to support Vue 2, you can stay on version [`0.5.2`](https://github.com/morkro/vue-a11y-dialog/tree/0.5.2).
 16 | 
 17 | **Vue 3**
 18 | 
 19 | ```bash
 20 | npm install vue-a11y-dialog
 21 | ```
 22 | 
 23 | **Vue 2**
 24 | 
 25 | ```bash
 26 | npm install vue-a11y-dialog@0.5.2
 27 | ```
 28 | 
 29 | ## Usage
 30 | 
 31 | In your `main.js` application file, install the component:
 32 | 
 33 | ```js
 34 | import { createApp } from 'vue'
 35 | import A11yDialog from 'vue-a11y-dialog'
 36 | import App from './App.vue'
 37 | 
 38 | createApp(App).use(A11yDialog).mount('#app')
 39 | ```
 40 | 
 41 | Then use it as follows:
 42 | 
 43 | ```html
 44 | <template>
 45 |   <div id="app">
 46 |     <!-- ... -->
 47 |     <button type="button" @click="openDialog">
 48 |       Open dialog
 49 |     </button>
 50 | 
 51 |     <a11y-dialog
 52 |       id="app-dialog"
 53 |       @dialog-ref="assignDialogRef"
 54 |     >
 55 |       <template v-slot:title>
 56 |         <span>Your dialog title</span>
 57 |       </template>
 58 |       <div>
 59 |         <p>Your content</p>
 60 |       </div>
 61 |     </a11y-dialog>
 62 |   </div>
 63 | </template>
 64 | ```
 65 | 
 66 | ```js
 67 | export default {
 68 |   name: 'YourComponent',
 69 | 
 70 |   data: () => ({
 71 |     dialog: null
 72 |   }),
 73 | 
 74 |   methods: {
 75 |     openDialog() {
 76 |       if (this.dialog) {
 77 |         this.dialog.show()
 78 |       }
 79 |     },
 80 | 
 81 |     assignDialogRef(dialog) {
 82 |       this.dialog = dialog
 83 |     }
 84 |   }
 85 | }
 86 | ```
 87 | 
 88 | It's important to assign the direct reference to the dialog instance via `@dialog-ref`, otherwise there is no way to call its methods.
 89 | 
 90 | Alternatively, you can also import the component directly into your file without installing it first:
 91 | 
 92 | ```js
 93 | import { A11yDialog } from 'vue-a11y-dialog'
 94 | export default {
 95 |   name: 'YourComponent',
 96 | 
 97 |   components: {
 98 |     'a11y-dialog': A11yDialog
 99 |   },
100 | 
101 |   methods: {
102 |     // ...
103 |   }
104 | }
105 | ```
106 | 
107 | ### Multiple dialogs
108 | 
109 | It's possible to use multiple dialogs in the same component, just make sure to assign the different `dialog` instances separately.
110 | 
111 | In your `<template>`:
112 | 
113 | ```html
114 | <template>
115 |   <div id="app">
116 |     <!-- First dialog -->
117 |     <a11y-dialog
118 |       id="first-dialog"
119 |       @dialog-ref="dialog => assignDialogRef('first', dialog)"
120 |     >
121 |       <template v-slot:title>
122 |         <span>First dialog title</span>
123 |       </template>
124 |       <div>
125 |         <p>Your content</p>
126 |       </div>
127 |     </a11y-dialog>
128 | 
129 |     <!-- Second dialog -->
130 |     <a11y-dialog
131 |       id="second-dialog"
132 |       @dialog-ref="dialog => assignDialogRef('second', dialog)"
133 |     >
134 |       <template v-slot:title>
135 |         <span>Second dialog title</span>
136 |       </template>
137 |       <div>
138 |         <p>Your content</p>
139 |       </div>
140 |     </a11y-dialog>
141 |   </div>
142 | </template>
143 | ```
144 | 
145 | In your `<script>`:
146 | 
147 | ```js
148 | import { A11yDialog } from 'vue-a11y-dialog';
149 | export default {
150 |   name: 'YourComponent',
151 | 
152 |   data: () => ({
153 |     dialogs: {}
154 |   }),
155 | 
156 |   methods: {
157 |     assignDialogRef(type, dialog) {
158 |       this.dialogs[type] = dialog
159 |     }
160 |   }
161 | }
162 | ```
163 | 
164 | ## API
165 | 
166 | > All `a11y-dialog` instance methods are available, for further documentation see [here](https://a11y-dialog.netlify.app/).
167 | 
168 | ### `id`
169 | 
170 | - **Property**: `id`
171 | - **Type**: `String`
172 | - **Required**: `true`
173 | - **Description**: The unique HTML `id` attribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog.
174 | - **Usage**:
175 | 
176 | ```html
177 | <a11y-dialog id="main-dialog">
178 |   <!-- ... -->
179 | </a11y-dialog>
180 | ```
181 | 
182 | ### `dialog-root`
183 | 
184 | - **Property**: `dialog-root`
185 | - **Type**: `String` — CSS Selector string.
186 | - **Required**: `false`
187 | - **Default**: `'body'`
188 | - **Description**: The container for the dialog to be rendered into.
189 | - **Usage**:
190 | 
191 | ```html
192 | <a11y-dialog dialog-root="#dialog-root">
193 |   <!-- ... -->
194 | </a11y-dialog>
195 | ```
196 | 
197 | ### `class-names`
198 | 
199 | - **Property**: `class-names`
200 | - **Type**: `Object`
201 | - **Required**: `false`
202 | - **Default**: `{}`
203 | - **Description**: Object of classes for each HTML element of the dialog element. Keys are: `container`, `overlay`, `document`, `title`, `closeButton`. See [a11y-dialog docs](https://a11y-dialog.netlify.app/usage/markup) for reference.
204 | - **Usage**:
205 | 
206 | ```html
207 | <a11y-dialog :class-names="{ container: 'container-class', overlay: 'overlay-class' }">
208 |   <!-- ... -->
209 | </a11y-dialog>
210 | ```
211 | 
212 | ### `title-id`
213 | 
214 | - **Property**: `title-id`
215 | - **Type**: `String`
216 | - **Required**: `false`
217 | - **Default**: Defaults to `id + '-title'`.
218 | - **Description**: The HTML `id` attribute of the dialog’s title element, used by assistive technologies to provide context and meaning to the dialog window.
219 | - **Usage**:
220 | 
221 | ```html
222 | <a11y-dialog title-id="main-title">
223 |   <!-- ... -->
224 | </a11y-dialog>
225 | ```
226 | 
227 | ### `close-button-label`
228 | 
229 | - **Property**: `close-button-label`
230 | - **Type**: `String`
231 | - **Required**: `false`
232 | - **Default**: `'Close this dialog window'`
233 | - **Description**: The HTML `aria-label` attribute of the close button, used by assistive technologies to provide extra meaning to the usual cross-mark.
234 | - **Usage**:
235 | 
236 | ```html
237 | <a11y-dialog close-button-label="Close dialog">
238 |   <!-- ... -->
239 | </a11y-dialog>
240 | ```
241 | 
242 | ### `role`
243 | 
244 | - **Property**: `role`
245 | - **Type**: `String`
246 | - **Required**: `false`
247 | - **Default**: `dialog`
248 | - **Description**: The `role` attribute of the dialog element, either `dialog` (default) or `alertdialog` to make it a modal (preventing closing on click outside of <kbd>ESC</kbd> key).
249 | - **Usage**:
250 | 
251 | ```html
252 | <a11y-dialog role="alertdialog">
253 |   <!-- ... -->
254 | </a11y-dialog>
255 | ```
256 | 
257 | ## Events
258 | 
259 | ### `dialog-ref`
260 | 
261 | - **Returns**: An `a11y-dialog` instance or `undefined`.
262 | - **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()`.
263 | - **Usage**:
264 | 
265 | ```html
266 | <a11y-dialog @dialog-ref="assignDialogRef">
267 |   <!-- ... -->
268 | </a11y-dialog>
269 | ```
270 | 
271 | ```js
272 | export default {
273 |   // ...
274 |   methods: {
275 |     assignDialogRef(dialog) {
276 |       this.dialog = dialog
277 |     }
278 |   }
279 | }
280 | ```
281 | 
282 | ## Slots
283 | 
284 | ### `title`
285 | 
286 | - **Name**: `title`
287 | - **Description**: The title of the dialog, mandatory in the document to provide context to assistive technology. Could be [hidden with CSS](https://hugogiraudel.com/2016/10/13/css-hide-and-seek/) (while remaining accessible).
288 | - **Usage**:
289 | 
290 | ```html
291 | <a11y-dialog>
292 |   <template v-slot:title>
293 |     <span>Your dialog title</span>
294 |   </template>
295 |   <!-- ... -->
296 | </a11y-dialog>
297 | ```
298 | 
299 | ### `closeButtonContent`
300 | 
301 | - **Name**: `closeButtonContent`
302 | - **Default**: `\u00D7` (×)
303 | - **Description**: The string that is the inner HTML of the close button.
304 | - **Usage**:
305 | 
306 | ```html
307 | <a11y-dialog>
308 |   <template v-slot:closeButtonContent>
309 |     <span>Close dialog</span>
310 |   </template>
311 |   <!-- ... -->
312 | </a11y-dialog>
313 | ```
314 | 
315 | 
316 | ### `closeButtonPosition`
317 | 
318 | - **Name**: `closeButtonPosition`
319 | - **Default**: `first`
320 | - **Description**: One of `first`, `last`, or `none`
321 | - **Usage**:
322 | 
323 | ```html
324 | <a11y-dialog close-button-position="last">
325 |   <template v-slot:closeButtonContent>
326 |     <span>Close dialog</span>
327 |   </template>
328 |   <!-- ... -->
329 | </a11y-dialog>
330 | ```
331 | 
332 | ## Server-side Rendering
333 | 
334 | 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.
335 | 


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "component": {
3 |     "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
4 |     "componentFolder": "src"
5 |   },
6 |   "video": false
7 | }


--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
6 | 


--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const { startDevServer } = require('@cypress/vite-dev-server')
 3 | 
 4 | module.exports = (on, config) => {
 5 |   on('dev-server:start', (options) => {
 6 |     return startDevServer({
 7 |       options,
 8 |       viteConfig: {
 9 |         configFile: path.resolve(__dirname, '../../vite.config.js'),
10 |       },
11 |     })
12 |   })
13 | 
14 |   return config
15 | }
16 | 


--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
1 | // Ensure global app styles are loaded:
2 | import '../../src/demo.css'
3 | 


--------------------------------------------------------------------------------
/dist/vue-a11y-dialog.esm.js:
--------------------------------------------------------------------------------
  1 | import { ref, computed, onMounted, onUnmounted, openBlock, createBlock, Teleport, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode, nextTick, createTextVNode, toDisplayString } from "vue";
  2 | var focusableSelectors = [
  3 |   'a[href]:not([tabindex^="-"])',
  4 |   'area[href]:not([tabindex^="-"])',
  5 |   'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
  6 |   'input[type="radio"]:not([disabled]):not([tabindex^="-"])',
  7 |   'select:not([disabled]):not([tabindex^="-"])',
  8 |   'textarea:not([disabled]):not([tabindex^="-"])',
  9 |   'button:not([disabled]):not([tabindex^="-"])',
 10 |   'iframe:not([tabindex^="-"])',
 11 |   'audio[controls]:not([tabindex^="-"])',
 12 |   'video[controls]:not([tabindex^="-"])',
 13 |   '[contenteditable]:not([tabindex^="-"])',
 14 |   '[tabindex]:not([tabindex^="-"])'
 15 | ];
 16 | var TAB_KEY = 9;
 17 | var ESCAPE_KEY = 27;
 18 | function A11yDialog$1(element) {
 19 |   this._show = this.show.bind(this);
 20 |   this._hide = this.hide.bind(this);
 21 |   this._maintainFocus = this._maintainFocus.bind(this);
 22 |   this._bindKeypress = this._bindKeypress.bind(this);
 23 |   this.$el = element;
 24 |   this.shown = false;
 25 |   this._id = this.$el.getAttribute("data-a11y-dialog") || this.$el.id;
 26 |   this._previouslyFocused = null;
 27 |   this._listeners = {};
 28 |   this.create();
 29 | }
 30 | A11yDialog$1.prototype.create = function() {
 31 |   this.$el.setAttribute("aria-hidden", true);
 32 |   this.$el.setAttribute("aria-modal", true);
 33 |   this.$el.setAttribute("tabindex", -1);
 34 |   if (!this.$el.hasAttribute("role")) {
 35 |     this.$el.setAttribute("role", "dialog");
 36 |   }
 37 |   this._openers = $$('[data-a11y-dialog-show="' + this._id + '"]');
 38 |   this._openers.forEach(function(opener) {
 39 |     opener.addEventListener("click", this._show);
 40 |   }.bind(this));
 41 |   this._closers = $$("[data-a11y-dialog-hide]", this.$el).concat($$('[data-a11y-dialog-hide="' + this._id + '"]'));
 42 |   this._closers.forEach(function(closer) {
 43 |     closer.addEventListener("click", this._hide);
 44 |   }.bind(this));
 45 |   this._fire("create");
 46 |   return this;
 47 | };
 48 | A11yDialog$1.prototype.show = function(event) {
 49 |   if (this.shown) {
 50 |     return this;
 51 |   }
 52 |   this._previouslyFocused = document.activeElement;
 53 |   this.$el.removeAttribute("aria-hidden");
 54 |   this.shown = true;
 55 |   moveFocusToDialog(this.$el);
 56 |   document.body.addEventListener("focus", this._maintainFocus, true);
 57 |   document.addEventListener("keydown", this._bindKeypress);
 58 |   this._fire("show", event);
 59 |   return this;
 60 | };
 61 | A11yDialog$1.prototype.hide = function(event) {
 62 |   if (!this.shown) {
 63 |     return this;
 64 |   }
 65 |   this.shown = false;
 66 |   this.$el.setAttribute("aria-hidden", "true");
 67 |   if (this._previouslyFocused && this._previouslyFocused.focus) {
 68 |     this._previouslyFocused.focus();
 69 |   }
 70 |   document.body.removeEventListener("focus", this._maintainFocus, true);
 71 |   document.removeEventListener("keydown", this._bindKeypress);
 72 |   this._fire("hide", event);
 73 |   return this;
 74 | };
 75 | A11yDialog$1.prototype.destroy = function() {
 76 |   this.hide();
 77 |   this._openers.forEach(function(opener) {
 78 |     opener.removeEventListener("click", this._show);
 79 |   }.bind(this));
 80 |   this._closers.forEach(function(closer) {
 81 |     closer.removeEventListener("click", this._hide);
 82 |   }.bind(this));
 83 |   this._fire("destroy");
 84 |   this._listeners = {};
 85 |   return this;
 86 | };
 87 | A11yDialog$1.prototype.on = function(type, handler) {
 88 |   if (typeof this._listeners[type] === "undefined") {
 89 |     this._listeners[type] = [];
 90 |   }
 91 |   this._listeners[type].push(handler);
 92 |   return this;
 93 | };
 94 | A11yDialog$1.prototype.off = function(type, handler) {
 95 |   var index2 = (this._listeners[type] || []).indexOf(handler);
 96 |   if (index2 > -1) {
 97 |     this._listeners[type].splice(index2, 1);
 98 |   }
 99 |   return this;
100 | };
101 | A11yDialog$1.prototype._fire = function(type, event) {
102 |   var listeners = this._listeners[type] || [];
103 |   var domEvent = new CustomEvent(type, { detail: event });
104 |   this.$el.dispatchEvent(domEvent);
105 |   listeners.forEach(function(listener) {
106 |     listener(this.$el, event);
107 |   }.bind(this));
108 | };
109 | A11yDialog$1.prototype._bindKeypress = function(event) {
110 |   if (!this.$el.contains(document.activeElement))
111 |     return;
112 |   if (this.shown && event.which === ESCAPE_KEY && this.$el.getAttribute("role") !== "alertdialog") {
113 |     event.preventDefault();
114 |     this.hide(event);
115 |   }
116 |   if (this.shown && event.which === TAB_KEY) {
117 |     trapTabKey(this.$el, event);
118 |   }
119 | };
120 | A11yDialog$1.prototype._maintainFocus = function(event) {
121 |   if (this.shown && !event.target.closest('[aria-modal="true"]') && !event.target.closest("[data-a11y-dialog-ignore-focus-trap]")) {
122 |     moveFocusToDialog(this.$el);
123 |   }
124 | };
125 | function toArray(collection) {
126 |   return Array.prototype.slice.call(collection);
127 | }
128 | function $$(selector, context) {
129 |   return toArray((context || document).querySelectorAll(selector));
130 | }
131 | function moveFocusToDialog(node) {
132 |   var focused = node.querySelector("[autofocus]") || node;
133 |   focused.focus();
134 | }
135 | function getFocusableChildren(node) {
136 |   return $$(focusableSelectors.join(","), node).filter(function(child) {
137 |     return !!(child.offsetWidth || child.offsetHeight || child.getClientRects().length);
138 |   });
139 | }
140 | function trapTabKey(node, event) {
141 |   var focusableChildren = getFocusableChildren(node);
142 |   var focusedItemIndex = focusableChildren.indexOf(document.activeElement);
143 |   if (event.shiftKey && focusedItemIndex === 0) {
144 |     focusableChildren[focusableChildren.length - 1].focus();
145 |     event.preventDefault();
146 |   } else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {
147 |     focusableChildren[0].focus();
148 |     event.preventDefault();
149 |   }
150 | }
151 | function instantiateDialogs() {
152 |   $$("[data-a11y-dialog]").forEach(function(node) {
153 |     new A11yDialog$1(node);
154 |   });
155 | }
156 | if (typeof document !== "undefined") {
157 |   if (document.readyState === "loading") {
158 |     document.addEventListener("DOMContentLoaded", instantiateDialogs);
159 |   } else {
160 |     if (window.requestAnimationFrame) {
161 |       window.requestAnimationFrame(instantiateDialogs);
162 |     } else {
163 |       window.setTimeout(instantiateDialogs, 16);
164 |     }
165 |   }
166 | }
167 | var _export_sfc = (sfc, props) => {
168 |   const target = sfc.__vccOpts || sfc;
169 |   for (const [key, val] of props) {
170 |     target[key] = val;
171 |   }
172 |   return target;
173 | };
174 | const _sfc_main = {
175 |   name: "A11yDialog",
176 |   props: {
177 |     id: {
178 |       type: String,
179 |       required: true
180 |     },
181 |     dialogRoot: {
182 |       type: String,
183 |       default: "body",
184 |       required: false
185 |     },
186 |     classNames: {
187 |       type: Object,
188 |       default() {
189 |         return {
190 |           container: "dialog-container",
191 |           document: "dialog-content",
192 |           overlay: "dialog-overlay",
193 |           title: "dialog-title",
194 |           closeButton: "dialog-close"
195 |         };
196 |       }
197 |     },
198 |     role: {
199 |       type: String,
200 |       required: false,
201 |       default: "dialog",
202 |       validator(value) {
203 |         return ["dialog", "alertdialog"].includes(value);
204 |       }
205 |     },
206 |     titleId: {
207 |       type: String,
208 |       default: ""
209 |     },
210 |     closeButtonLabel: {
211 |       type: String,
212 |       default: "Close this dialog window"
213 |     },
214 |     closeButtonPosition: {
215 |       type: String,
216 |       required: false,
217 |       default: "first",
218 |       validator(value) {
219 |         return ["first", "last", "none"].includes(value);
220 |       }
221 |     }
222 |   },
223 |   emits: ["dialog-ref"],
224 |   setup(props, { emit }) {
225 |     let dialog;
226 |     const rootElement = ref(null);
227 |     const portalTarget = computed(() => {
228 |       return props.dialogRoot || "body";
229 |     });
230 |     const fullTitleId = computed(() => {
231 |       return props.titleId || `${props.id}-title`;
232 |     });
233 |     const roleAttribute = computed(() => {
234 |       return ["dialog", "alertdialog"].includes(props.role) ? props.role : "dialog";
235 |     });
236 |     const instantiateDialog = async () => {
237 |       await nextTick();
238 |       dialog = new A11yDialog$1(rootElement.value);
239 |       emit("dialog-ref", dialog);
240 |     };
241 |     onMounted(() => {
242 |       instantiateDialog();
243 |     });
244 |     const close = () => {
245 |       dialog.hide();
246 |     };
247 |     onUnmounted(() => {
248 |       if (dialog) {
249 |         dialog.destroy();
250 |       }
251 |       emit("dialog-ref");
252 |     });
253 |     return {
254 |       dialog,
255 |       close,
256 |       portalTarget,
257 |       fullTitleId,
258 |       roleAttribute,
259 |       rootElement
260 |     };
261 |   }
262 | };
263 | const _hoisted_1 = ["id", "role", "aria-labelledby"];
264 | const _hoisted_2 = ["data-a11y-dialog-hide"];
265 | const _hoisted_3 = ["aria-label"];
266 | const _hoisted_4 = /* @__PURE__ */ createTextVNode(/* @__PURE__ */ toDisplayString("\xD7"));
267 | const _hoisted_5 = ["id"];
268 | const _hoisted_6 = ["aria-label"];
269 | const _hoisted_7 = /* @__PURE__ */ createTextVNode(/* @__PURE__ */ toDisplayString("\xD7"));
270 | function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
271 |   return openBlock(), createBlock(Teleport, { to: $setup.portalTarget }, [
272 |     createElementVNode("div", {
273 |       ref: "rootElement",
274 |       id: $props.id,
275 |       class: normalizeClass($props.classNames.container),
276 |       role: $setup.roleAttribute,
277 |       "aria-hidden": "true",
278 |       "aria-labelledby": $setup.fullTitleId
279 |     }, [
280 |       createElementVNode("div", {
281 |         "data-a11y-dialog-hide": $props.role === "alertdialog" ? void 0 : true,
282 |         tabIndex: "-1",
283 |         class: normalizeClass($props.classNames.overlay),
284 |         onClick: _cache[0] || (_cache[0] = ($event) => $props.role === "alertdialog" ? void 0 : $setup.close)
285 |       }, null, 10, _hoisted_2),
286 |       createElementVNode("div", {
287 |         role: "document",
288 |         class: normalizeClass($props.classNames.document)
289 |       }, [
290 |         $props.closeButtonPosition == "first" ? (openBlock(), createElementBlock("button", {
291 |           key: 0,
292 |           "data-a11y-dialog-hide": "",
293 |           type: "button",
294 |           "aria-label": $props.closeButtonLabel,
295 |           class: normalizeClass($props.classNames.closeButton),
296 |           onClick: _cache[1] || (_cache[1] = (...args) => $setup.close && $setup.close(...args))
297 |         }, [
298 |           renderSlot(_ctx.$slots, "closeButtonContent", {}, () => [
299 |             _hoisted_4
300 |           ])
301 |         ], 10, _hoisted_3)) : createCommentVNode("", true),
302 |         createElementVNode("p", {
303 |           id: $setup.fullTitleId,
304 |           class: normalizeClass($props.classNames.title)
305 |         }, [
306 |           renderSlot(_ctx.$slots, "title")
307 |         ], 10, _hoisted_5),
308 |         renderSlot(_ctx.$slots, "default"),
309 |         $props.closeButtonPosition == "last" ? (openBlock(), createElementBlock("button", {
310 |           key: 1,
311 |           "data-a11y-dialog-hide": "",
312 |           type: "button",
313 |           "aria-label": $props.closeButtonLabel,
314 |           class: normalizeClass($props.classNames.closeButton),
315 |           onClick: _cache[2] || (_cache[2] = (...args) => $setup.close && $setup.close(...args))
316 |         }, [
317 |           renderSlot(_ctx.$slots, "closeButtonContent", {}, () => [
318 |             _hoisted_7
319 |           ])
320 |         ], 10, _hoisted_6)) : createCommentVNode("", true)
321 |       ], 2)
322 |     ], 10, _hoisted_1)
323 |   ], 8, ["to"]);
324 | }
325 | var A11yDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
326 | var index = {
327 |   install: (app) => {
328 |     app.component("a11y-dialog", A11yDialog);
329 |   }
330 | };
331 | export { A11yDialog, index as default };
332 | 


--------------------------------------------------------------------------------
/dist/vue-a11y-dialog.umd.js:
--------------------------------------------------------------------------------
1 | (function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a["vue-a11y-dialog"]={},a.Vue))})(this,function(a,e){"use strict";var y=['a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])','input[type="radio"]:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','audio[controls]:not([tabindex^="-"])','video[controls]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])'],m=9,b=27;function s(t){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this.$el=t,this.shown=!1,this._id=this.$el.getAttribute("data-a11y-dialog")||this.$el.id,this._previouslyFocused=null,this._listeners={},this.create()}s.prototype.create=function(){return this.$el.setAttribute("aria-hidden",!0),this.$el.setAttribute("aria-modal",!0),this.$el.setAttribute("tabindex",-1),this.$el.hasAttribute("role")||this.$el.setAttribute("role","dialog"),this._openers=d('[data-a11y-dialog-show="'+this._id+'"]'),this._openers.forEach(function(t){t.addEventListener("click",this._show)}.bind(this)),this._closers=d("[data-a11y-dialog-hide]",this.$el).concat(d('[data-a11y-dialog-hide="'+this._id+'"]')),this._closers.forEach(function(t){t.addEventListener("click",this._hide)}.bind(this)),this._fire("create"),this},s.prototype.show=function(t){return this.shown?this:(this._previouslyFocused=document.activeElement,this.$el.removeAttribute("aria-hidden"),this.shown=!0,u(this.$el),document.body.addEventListener("focus",this._maintainFocus,!0),document.addEventListener("keydown",this._bindKeypress),this._fire("show",t),this)},s.prototype.hide=function(t){return this.shown?(this.shown=!1,this.$el.setAttribute("aria-hidden","true"),this._previouslyFocused&&this._previouslyFocused.focus&&this._previouslyFocused.focus(),document.body.removeEventListener("focus",this._maintainFocus,!0),document.removeEventListener("keydown",this._bindKeypress),this._fire("hide",t),this):this},s.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(t){t.removeEventListener("click",this._show)}.bind(this)),this._closers.forEach(function(t){t.removeEventListener("click",this._hide)}.bind(this)),this._fire("destroy"),this._listeners={},this},s.prototype.on=function(t,o){return typeof this._listeners[t]=="undefined"&&(this._listeners[t]=[]),this._listeners[t].push(o),this},s.prototype.off=function(t,o){var i=(this._listeners[t]||[]).indexOf(o);return i>-1&&this._listeners[t].splice(i,1),this},s.prototype._fire=function(t,o){var i=this._listeners[t]||[],n=new CustomEvent(t,{detail:o});this.$el.dispatchEvent(n),i.forEach(function(l){l(this.$el,o)}.bind(this))},s.prototype._bindKeypress=function(t){!this.$el.contains(document.activeElement)||(this.shown&&t.which===b&&this.$el.getAttribute("role")!=="alertdialog"&&(t.preventDefault(),this.hide(t)),this.shown&&t.which===m&&p(this.$el,t))},s.prototype._maintainFocus=function(t){this.shown&&!t.target.closest('[aria-modal="true"]')&&!t.target.closest("[data-a11y-dialog-ignore-focus-trap]")&&u(this.$el)};function g(t){return Array.prototype.slice.call(t)}function d(t,o){return g((o||document).querySelectorAll(t))}function u(t){var o=t.querySelector("[autofocus]")||t;o.focus()}function _(t){return d(y.join(","),t).filter(function(o){return!!(o.offsetWidth||o.offsetHeight||o.getClientRects().length)})}function p(t,o){var i=_(t),n=i.indexOf(document.activeElement);o.shiftKey&&n===0?(i[i.length-1].focus(),o.preventDefault()):!o.shiftKey&&n===i.length-1&&(i[0].focus(),o.preventDefault())}function c(){d("[data-a11y-dialog]").forEach(function(t){new s(t)})}typeof document!="undefined"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",c):window.requestAnimationFrame?window.requestAnimationFrame(c):window.setTimeout(c,16));var E=(t,o)=>{const i=t.__vccOpts||t;for(const[n,l]of o)i[n]=l;return i};const w={name:"A11yDialog",props:{id:{type:String,required:!0},dialogRoot:{type:String,default:"body",required:!1},classNames:{type:Object,default(){return{container:"dialog-container",document:"dialog-content",overlay:"dialog-overlay",title:"dialog-title",closeButton:"dialog-close"}}},role:{type:String,required:!1,default:"dialog",validator(t){return["dialog","alertdialog"].includes(t)}},titleId:{type:String,default:""},closeButtonLabel:{type:String,default:"Close this dialog window"},closeButtonPosition:{type:String,required:!1,default:"first",validator(t){return["first","last","none"].includes(t)}}},emits:["dialog-ref"],setup(t,{emit:o}){let i;const n=e.ref(null),l=e.computed(()=>t.dialogRoot||"body"),f=e.computed(()=>t.titleId||`${t.id}-title`),r=e.computed(()=>["dialog","alertdialog"].includes(t.role)?t.role:"dialog"),N=async()=>{await e.nextTick(),i=new s(n.value),o("dialog-ref",i)};e.onMounted(()=>{N()});const F=()=>{i.hide()};return e.onUnmounted(()=>{i&&i.destroy(),o("dialog-ref")}),{dialog:i,close:F,portalTarget:l,fullTitleId:f,roleAttribute:r,rootElement:n}}},x=["id","role","aria-labelledby"],A=["data-a11y-dialog-hide"],C=["aria-label"],k=e.createTextVNode(e.toDisplayString("\xD7")),S=["id"],B=["aria-label"],v=e.createTextVNode(e.toDisplayString("\xD7"));function T(t,o,i,n,l,f){return e.openBlock(),e.createBlock(e.Teleport,{to:n.portalTarget},[e.createElementVNode("div",{ref:"rootElement",id:i.id,class:e.normalizeClass(i.classNames.container),role:n.roleAttribute,"aria-hidden":"true","aria-labelledby":n.fullTitleId},[e.createElementVNode("div",{"data-a11y-dialog-hide":i.role==="alertdialog"?void 0:!0,tabIndex:"-1",class:e.normalizeClass(i.classNames.overlay),onClick:o[0]||(o[0]=r=>i.role==="alertdialog"?void 0:n.close)},null,10,A),e.createElementVNode("div",{role:"document",class:e.normalizeClass(i.classNames.document)},[i.closeButtonPosition=="first"?(e.openBlock(),e.createElementBlock("button",{key:0,"data-a11y-dialog-hide":"",type:"button","aria-label":i.closeButtonLabel,class:e.normalizeClass(i.classNames.closeButton),onClick:o[1]||(o[1]=(...r)=>n.close&&n.close(...r))},[e.renderSlot(t.$slots,"closeButtonContent",{},()=>[k])],10,C)):e.createCommentVNode("",!0),e.createElementVNode("p",{id:n.fullTitleId,class:e.normalizeClass(i.classNames.title)},[e.renderSlot(t.$slots,"title")],10,S),e.renderSlot(t.$slots,"default"),i.closeButtonPosition=="last"?(e.openBlock(),e.createElementBlock("button",{key:1,"data-a11y-dialog-hide":"",type:"button","aria-label":i.closeButtonLabel,class:e.normalizeClass(i.classNames.closeButton),onClick:o[2]||(o[2]=(...r)=>n.close&&n.close(...r))},[e.renderSlot(t.$slots,"closeButtonContent",{},()=>[v])],10,B)):e.createCommentVNode("",!0)],2)],10,x)],8,["to"])}var h=E(w,[["render",T]]),D={install:t=>{t.component("a11y-dialog",h)}};a.A11yDialog=h,a.default=D,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vue A11yDialog</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="./src/demo.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-a11y-dialog",
 3 |   "description": "Vue.js component wrapping for a11y-dialog",
 4 |   "version": "1.1.2",
 5 |   "homepage": "https://github.com/morkro/vue-a11y-dialog",
 6 |   "license": "MIT",
 7 |   "author": "Moritz Kröger (https://moritz.berlin)",
 8 |   "private": false,
 9 |   "files": [
10 |     "dist"
11 |   ],
12 |   "main": "dist/vue-a11y-dialog.umd.js",
13 |   "module": "dist/vue-a11y-dialog.esm.js",
14 |   "browser": "dist/vue-a11y-dialog.umd.js",
15 |   "exports": {
16 |     ".": {
17 |       "import": "./dist/vue-a11y-dialog.esm.js",
18 |       "require": "./dist/vue-a11y-dialog.umd.js"
19 |     }
20 |   },
21 |   "keywords": [
22 |     "modal",
23 |     "dialog",
24 |     "accessibility",
25 |     "a11y",
26 |     "focus",
27 |     "vue",
28 |     "component"
29 |   ],
30 |   "scripts": {
31 |     "dev": "vite dev",
32 |     "build": "vite build",
33 |     "serve": "vite preview",
34 |     "test": "npx cypress open-ct",
35 |     "test:ci": "npx cypress run-ct",
36 |     "lint": "eslint --ext .js,.vue src",
37 |     "lint:fix": "npm run lint --fix"
38 |   },
39 |   "repository": {
40 |     "type": "git",
41 |     "url": "https://github.com/morkro/vue-a11y-dialog"
42 |   },
43 |   "dependencies": {
44 |     "a11y-dialog": "^7.3.0",
45 |     "vue": "^3.2.26"
46 |   },
47 |   "peerDependencies": {
48 |     "vue": "^3.2.26"
49 |   },
50 |   "devDependencies": {
51 |     "@cypress/vite-dev-server": "^2.0.5",
52 |     "@cypress/vue": "3",
53 |     "@vitejs/plugin-vue": "^1.3.0",
54 |     "@vue/compiler-sfc": "^3.0.5",
55 |     "cypress": "8.2.0",
56 |     "eslint": "^8.6.0",
57 |     "eslint-plugin-cypress": "^2.12.1",
58 |     "eslint-plugin-vue": "^8.2.0",
59 |     "vite": "^2.4.4"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/A11yDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <teleport :to="portalTarget">
  3 |     <div
  4 |       ref="rootElement"
  5 |       :id="id"
  6 |       :class="classNames.container"
  7 |       :role="roleAttribute"
  8 |       aria-hidden="true"
  9 |       :aria-labelledby="fullTitleId"
 10 |     >
 11 |       <div
 12 |         :data-a11y-dialog-hide="role === 'alertdialog' ? undefined : true"
 13 |         tabIndex="-1"
 14 |         :class="classNames.overlay"
 15 |         @click="role === 'alertdialog' ? undefined : close"
 16 |       />
 17 |       <div role="document" :class="classNames.document">
 18 |         <button
 19 |           v-if="closeButtonPosition == 'first'"
 20 |           data-a11y-dialog-hide
 21 |           type="button"
 22 |           :aria-label="closeButtonLabel"
 23 |           :class="classNames.closeButton"
 24 |           @click="close"
 25 |         >
 26 |           <slot name="closeButtonContent">
 27 |             {{ "\u00D7" }}
 28 |           </slot>
 29 |         </button>
 30 |         <p :id="fullTitleId" :class="classNames.title">
 31 |           <slot name="title" />
 32 |         </p>
 33 |         <slot />
 34 |         <button
 35 |           v-if="closeButtonPosition == 'last'"
 36 |           data-a11y-dialog-hide
 37 |           type="button"
 38 |           :aria-label="closeButtonLabel"
 39 |           :class="classNames.closeButton"
 40 |           @click="close"
 41 |         >
 42 |           <slot name="closeButtonContent">
 43 |             {{ "\u00D7" }}
 44 |           </slot>
 45 |         </button>
 46 |       </div>
 47 |     </div>
 48 |   </teleport>
 49 | </template>
 50 | 
 51 | <script>
 52 |   import A11yDialog from 'a11y-dialog'
 53 |   import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'
 54 | 
 55 |   export default {
 56 |     name: 'A11yDialog',
 57 |     props: {
 58 |       id: {
 59 |         type: String,
 60 |         required: true,
 61 |       },
 62 |       dialogRoot: {
 63 |         type: String,
 64 |         default: 'body',
 65 |         required: false,
 66 |       },
 67 |       /**
 68 |        * Object representing the classes for each HTML element of the dialog
 69 |        * element. See: https://a11y-dialog.netlify.app/usage/markup
 70 |        */
 71 |       classNames: {
 72 |         type: Object,
 73 |         default() {
 74 |           return {
 75 |             container: 'dialog-container',
 76 |             document: 'dialog-content',
 77 |             overlay: 'dialog-overlay',
 78 |             title: 'dialog-title',
 79 |             closeButton: 'dialog-close',
 80 |           }
 81 |         },
 82 |       },
 83 |       role: {
 84 |         type: String,
 85 |         required: false,
 86 |         default: 'dialog',
 87 |         validator(value) {
 88 |           return ['dialog', 'alertdialog'].includes(value)
 89 |         },
 90 |       },
 91 |       titleId: {
 92 |         type: String,
 93 |         default: '',
 94 |       },
 95 |       closeButtonLabel: {
 96 |         type: String,
 97 |         default: 'Close this dialog window',
 98 |       },
 99 |       closeButtonPosition: {
100 |         type: String,
101 |         required: false,
102 |         default: 'first',
103 |         validator(value) {
104 |           return ['first', 'last', 'none'].includes(value)
105 |         },
106 |       },
107 |     },
108 | 
109 |     emits: ['dialog-ref'],
110 | 
111 |     setup(props, { emit }) {
112 |       let dialog
113 |       const rootElement = ref(null)
114 | 
115 |       const portalTarget = computed(() => {
116 |         return props.dialogRoot || 'body'
117 |       })
118 | 
119 |       const fullTitleId = computed(() => {
120 |         return props.titleId || `${props.id}-title`
121 |       })
122 | 
123 |       const roleAttribute = computed(() => {
124 |         return ['dialog', 'alertdialog'].includes(props.role)
125 |           ? props.role
126 |           : 'dialog'
127 |       })
128 | 
129 |       const instantiateDialog = async () => {
130 |         await nextTick()
131 |         dialog = new A11yDialog(rootElement.value)
132 |         emit('dialog-ref', dialog)
133 |       }
134 | 
135 |       onMounted(() => {
136 |         instantiateDialog()
137 |       })
138 | 
139 |       const close = () => {
140 |         dialog.hide()
141 |       }
142 | 
143 |       onUnmounted(() => {
144 |         if (dialog) {
145 |           dialog.destroy()
146 |         }
147 |         emit('dialog-ref')
148 |       })
149 | 
150 |       return {
151 |         dialog,
152 |         close,
153 |         portalTarget,
154 |         fullTitleId,
155 |         roleAttribute,
156 |         rootElement,
157 |       }
158 |     },
159 |   }
160 | </script>
161 | 


--------------------------------------------------------------------------------
/src/Demo.spec.ct.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@cypress/vue'
 2 | import Demo from './Demo.vue'
 3 | 
 4 | describe('Demo', () => {
 5 |   it('shows Demo with trigger buttons', () => {
 6 |     mount(Demo)
 7 |       .get('header h1')
 8 |       .contains('A11yDialog Demo')
 9 |       .get('[data-a11y-dialog-show="a11y-dialog"]')
10 |       .get('[data-test-id="dialogRefBtn"]')
11 |       .get('[data-test-id="dataA11yBtn"]')
12 |   })
13 | })
14 | 
15 | describe('dialog', () => {
16 |   it('should focus the first element in the dialog on open', () => {
17 |     mount(Demo)
18 |       .get('[data-test-id="dialogRefBtn"]')
19 |       .click()
20 |       .get('[role="dialog"]')
21 |       .should('have.focus')
22 |   })
23 | 
24 |   it('should open and close dialog via data-a11y-dialog-show trigger', () => {
25 |     mount(Demo)
26 |       .get('[data-test-id="dialogRefBtn"]')
27 |       .click()
28 |       .get('[role="document"]')
29 |       .should('be.visible')
30 |       .get('[data-test-id="dialogTitle"]')
31 |       .contains('A11yDialog Demo')
32 |       .get('.dialog-close')
33 |       .click()
34 |       .get('[role="document"]')
35 |       .should('not.be.visible')
36 |   })
37 | 
38 |   it('should open dialog via dialogRefBtn trigger', () => {
39 |     mount(Demo)
40 |       .get('[data-test-id="dialogRefBtn"]')
41 |       .click()
42 |       .get('.dialog-overlay')
43 |       .get('[role="document"]')
44 |       .should('be.visible')
45 |   })
46 | 
47 |   it('should restore focus to previously focused element', () => {
48 |     mount(Demo)
49 |       .get('[data-test-id="dialogRefBtn"]')
50 |       .click()
51 |       .get('[role="document"]')
52 |       .should('be.visible')
53 |       .get('.dialog-close')
54 |       .click()
55 |       .get('[data-test-id="dialogRefBtn"]')
56 |       .should('have.focus')
57 |   })
58 | 
59 |   it('should take close position', () => {
60 |     mount(Demo)
61 |       .get('[data-test-id="useClosePositionFirst"]')
62 |       .click()
63 |       .get('[role="document"]')
64 |       .should('be.visible')
65 |   })
66 | })
67 | 
68 | describe('aria', () => {
69 |   it('should have container with aria labelledby of title id', () => {
70 |     mount(Demo)
71 |       .get('[data-test-id="dialogRefBtn"]')
72 |       .click()
73 |       .get('[role="dialog"][aria-labelledby="uniqueTitleId"]')
74 |   })
75 | 
76 |   it('should have close button aria label', () => {
77 |     mount(Demo)
78 |       .get('[data-test-id="dialogRefBtn"]')
79 |       .click()
80 |       .get('.dialog-close[aria-label="My close button label"]')
81 |   })
82 | 
83 |   it('should set aria-hidden to false when opened', () => {
84 |     mount(Demo)
85 |       .get('[role="dialog"][aria-modal]')
86 |       .should('exist')
87 |       .get('[role="dialog"][aria-hidden]')
88 |       .should('exist')
89 |       .get('[data-test-id="dialogRefBtn"]')
90 |       .click()
91 |       .get('[role="dialog"][aria-hidden]')
92 |       .should('not.exist')
93 |   })
94 | })
95 | 


--------------------------------------------------------------------------------
/src/Demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <h1>A11yDialog Demo</h1>
 4 |   </header>
 5 | 
 6 |   <main>
 7 |     <p>The following opens because we've assigned a dialog <code>ref</code>:</p>
 8 | 
 9 |     <button type="button" data-test-id="dialogRefBtn" @click="openDialog">
10 |       Open dialog via <code>dialogRef</code>
11 |     </button>
12 | 
13 |     <p>
14 |       The following opens because a11y-dialog uses the
15 |       <code>data-a11y-dialog-show</code> data attribute:
16 |     </p>
17 | 
18 |     <button
19 |       type="button"
20 |       data-test-id="dataA11yBtn"
21 |       data-a11y-dialog-show="a11y-dialog"
22 |     >
23 |       Open dialog via <code>data-*</code> attribute
24 |     </button>
25 | 
26 |     <button
27 |       type="button"
28 |       data-test-id="useClosePositionFirst"
29 |       @click="testClosePositionFirst"
30 |     >
31 |       Use <code>closePositionFirst</code>
32 |     </button>
33 |   </main>
34 | 
35 |   <a11y-dialog
36 |     id="a11y-dialog"
37 |     close-button-label="My close button label"
38 |     :close-button-position="closePosition"
39 |     title-id="uniqueTitleId"
40 |     :role="role"
41 |     @dialog-ref="assignDialogRef"
42 |   >
43 |     <template #closeButtonContent>
44 |       <span>Close</span>
45 |     </template>
46 |     <template #title>
47 |       <span data-test-id="dialogTitle">A11yDialog Demo</span>
48 |     </template>
49 |     <div>
50 |       <p>This is some content</p>
51 |     </div>
52 |   </a11y-dialog>
53 | </template>
54 | 
55 | <script>
56 |   import { A11yDialog } from '../dist/vue-a11y-dialog.esm'
57 |   export default {
58 |     name: 'DialogDemo',
59 |     components: {
60 |       A11yDialog
61 |     },
62 |     data: () => ({
63 |       dialog: null,
64 |       role: 'dialog',
65 |       closePosition: 'last',
66 |     }),
67 |     methods: {
68 |       openDialog() {
69 |         if (this.dialog) {
70 |           this.dialog.show()
71 |         }
72 |       },
73 |       assignDialogRef(dialog) {
74 |         this.dialog = dialog
75 |       },
76 |       // Tests using close position of first
77 |       testClosePositionFirst() {
78 |         this.closePosition = 'first'
79 |         this.openDialog()
80 |       },
81 |     },
82 |   }
83 | </script>
84 | 
85 | <style>
86 |   #app {
87 |     margin-block-start: 3rem;
88 |   }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/demo.css:
--------------------------------------------------------------------------------
 1 | /** Demo-only **/
 2 | :root {
 3 |   --text-color: #2c3e50;
 4 |   --background-color: white;
 5 |   --overlay-color: rgba(43, 46, 56, 0.9);
 6 | }
 7 | 
 8 | body {
 9 |   font-family: Avenir, Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   text-align: center;
13 |   color: var(--text-color);
14 | }
15 | 
16 | /** ⚠️ a11y-dialog related **/
17 | .dialog-container {
18 |   display: flex;
19 |   z-index: 2;
20 | }
21 | 
22 | .dialog-overlay {
23 |   background-color: var(--overlay-color);
24 |   animation: fade-in 200ms both;
25 | }
26 | 
27 | .dialog-overlay,
28 | .dialog-container {
29 |   position: fixed;
30 |   top: 0;
31 |   left: 0;
32 |   bottom: 0;
33 |   right: 0;
34 | }
35 | 
36 | /* Crucial—dialog w/not hide visually without this rule */
37 | .dialog-container[aria-hidden="true"] {
38 |   display: none;
39 | }
40 | 
41 | .dialog-content {
42 |   background-color: var(--background-color);
43 |   margin: auto;
44 |   z-index: 2;
45 |   position: relative;
46 |   padding: 1em;
47 |   max-width: 90%;
48 |   width: 600px;
49 |   border-radius: 2px;
50 | }
51 | 


--------------------------------------------------------------------------------
/src/demo.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import Demo from './Demo.vue'
3 | import A11yDialog from '../dist/vue-a11y-dialog.esm.js'
4 | import './demo.css'
5 | 
6 | createApp(Demo).use(A11yDialog).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import A11yDialog from './A11yDialog.vue'
 2 | 
 3 | export { A11yDialog }
 4 | 
 5 | export default {
 6 |   install: (app) => {
 7 |     app.component('a11y-dialog', A11yDialog)
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import path from 'path'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   build: {
 9 |     lib: {
10 |       entry: path.resolve(__dirname, 'src/index.js'),
11 |       name: 'vue-a11y-dialog',
12 |       fileName: (format) => `vue-a11y-dialog.${format}.js`,
13 |     },
14 |     rollupOptions: {
15 |       // make sure to externalize deps that shouldn't be bundled
16 |       // into your library
17 |       external: ['vue'],
18 |       output: [
19 |         {
20 |           format: 'esm',
21 |           esModule: true,
22 |           exports: 'named',
23 |           globals: {
24 |             vue: 'Vue'
25 |           }
26 |         },
27 |         {
28 |           format: 'umd',
29 |           interop: 'esModule',
30 |           exports: 'named',
31 |           sourcemap: false,
32 |           globals: {
33 |             vue: 'Vue',
34 |           },
35 |         },
36 |       ],
37 |     },
38 |   },
39 | })
40 | 


--------------------------------------------------------------------------------