Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renatodeleao/a11y-vue-dialog
An accessibility-first renderless (headless) dialog component made for Vue https://renatodeleao.github.io/a11y-vue-dialog/
https://github.com/renatodeleao/a11y-vue-dialog
a11y headless portal renderless vue
Last synced: about 2 months ago
JSON representation
An accessibility-first renderless (headless) dialog component made for Vue https://renatodeleao.github.io/a11y-vue-dialog/
- Host: GitHub
- URL: https://github.com/renatodeleao/a11y-vue-dialog
- Owner: renatodeleao
- License: mit
- Created: 2019-01-25T14:46:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-08T14:10:53.000Z (about 1 year ago)
- Last Synced: 2024-07-28T00:36:15.015Z (about 2 months ago)
- Topics: a11y, headless, portal, renderless, vue
- Language: Vue
- Homepage:
- Size: 2.91 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-a11y-vue - a11y-vue-dialog - An accessible dialog component made for Vue. (Components and plugins / Courses)
- awesome-access - a11y-vue-dialog - An accessible dialog component made for Vue. (Components and plugins / Courses)
README
## Why another modal/dialog plugin
- ✅ Universal: works in `vue@2` and `vue@3` 🚧
- ✅ Renderless/headless: no assumptions about styles or markup. You have full control.
- ✅ Accessibility first — Focus trap[1] + keyboard navigation + aria-attributes
- ✅ Fully controlled component
- ✅ Pure vue, no wrapping.
- ✅ Simplicity + size
- 🕸 Nested dialogs ([questionable pattern](https://github.com/edenspiekermann/a11y-dialog#nested-dialogs), not recommended, but possible because [it happens](https://cl.ly/be43f69393f7)) and it's actually in WAI-ARIA [examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html) so...
Detailed documentation and additional info is available [at documentation site](https://renatodeleao.github.io/a11y-vue-dialog/)
## Install
```
npm i a11y-vue-dialog
# or
yarn add a11y-dialog
```
## Usage
A renderless/headless component provides all the functionality required to build a proper `Dialog`, but gives zero f*cks about your styles. As such you have full control over it and have to DYI. Here's a basic example on how to do it:
```vue
{{ title }}
...
import { A11yDialog } from 'a11y-dialog'
export default {
name: 'AppBaseDialog',
components: { A11yDialog },
props: {
title: {
type: String,
required: true
}
}
}
```
```vue
My markup, my rules.
```
Voilá, checkout a [working example on CodeSandbox](https://codesandbox.io/s/renderless-a11y-vue-dialog-demo-0-8-0-beta-1-3igsm9).
## Docs
Detailed documentation and additional info is available [at documentation site](https://renatodeleao.github.io/a11y-vue-dialog/)
## Play
A playground is used to test the component locally. It uses [`vue/cli` instant prototyping feature](https://cli.vuejs.org/guide/prototyping.html), so the downside is that you have to install it globally.
- Clone this repo
- `yarn install`
- Then, just run `yarn play`
## Colophon
Thanks to all this packages for inspiration and guidance.
- `portal-vue|vue-simple-portal` from [@LinusBorg](https://github.com/LinusBorg) which makes escaping overflow traps easy peasy
- `a11y-dialog` (vanilla) from `@KittyGiraudel` to lead the path that ended here
- `vue-a11y-dialog` (wrapper around ^) from `@morkro` for the motivation to build a pure vue alternative to it.
- All build tools used to make this a reality!
## License
MIT © Renato de Leão