Skip to content

Commit 35abeff

Browse files
ktquezktquez
authored
Merge pull request #17 from vue-a11y/next
Version 2
2 parents ed28113 + ee8588f commit 35abeff

31 files changed

+24692
-7576
lines changed

‎.eslintrc.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,22 @@ module.exports = {
22
root: true,
33
env: {
44
"cypress/globals": true,
5-
browser: true,
6-
node: true
5+
node: true,
6+
browser: true
77
},
88
extends: [
9-
'standard',
10-
'plugin:vue/essential'
9+
'plugin:vue/recommended',
10+
'@vue/standard',
11+
'plugin:vuejs-accessibility/recommended'
1112
],
1213
plugins: [
13-
"cypress"
14+
'cypress',
15+
'vuejs-accessibility'
1416
],
15-
// add your custom rules here
16-
rules: {},
17-
globals: {}
17+
parserOptions: {
18+
parser: 'babel-eslint'
19+
},
20+
rules: {
21+
'no-console': 'off'
22+
}
1823
}

‎CHANGELOG.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
# Change Log
1+
# Changelog
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5+
## [2.0.0](https://github.com/vue-a11y/vue-announcer/compare/v1.0.6...v2.0.0) (2020-05-01)
6+
57
<a name="1.0.6"></a>
68
## [1.0.6](https://github.com/vue-a11y/vue-announcer/compare/v1.0.5...v1.0.6) (2020-01-08)
79

‎README.md‎

Lines changed: 15 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,36 @@
1-
# vue-announcer
1+
# Introduction
22

3-
Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar or a loading, among others. Now imagine all this happening to people who have visual disabilities and who use screen readers.
3+
Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers.
44

5-
The idea of this plugin is to tell the screen reader what is happening and primarily if you use single-page application.
6-
Inspired by others in the community like:
7-
https://haltersweb.github.io/Accessibility/spa.html *(Example of how creating an accessible single-page application)*
8-
https://github.com/ember-a11y/a11y-announcer *(Ember A11y community)*
9-
10-
11-
## Install package
12-
#### NPM
13-
```shell
14-
npm install -S vue-announcer
15-
```
16-
17-
#### Yarn
18-
```shell
19-
yarn add vue-announcer
20-
```
21-
---
22-
23-
## How to use
24-
In your `main.js`
25-
```javascript
26-
import Vue from 'vue'
27-
import VueAnnouncer from 'vue-announcer'
28-
29-
Vue.use(VueAnnouncer)
30-
```
31-
32-
In your `App.vue`
33-
Example using `vue-toasted`
34-
```vue
35-
<template>
36-
<div id="app">
37-
<vue-announcer />
38-
39-
<h2>App page</h2>
40-
41-
<button type="button" data-va="toasted" @click="notify">
42-
trigger notification
43-
</button>
44-
</div>
45-
</template>
46-
<script>
47-
export default {
48-
name: 'app'
49-
methods: {
50-
notify () {
51-
let message = `Hi, it's a toasted notification`
52-
this.$toasted.success(message)
53-
this.$announcer.set(message) // Sets the message that will be read by the screen reader automatically.
54-
}
55-
}
56-
}
57-
</script>
58-
```
59-
See this example:
60-
[Example link](https://github.com/vue-a11y/vue-announcer/blob/master/example/src/pages/About.vue)
61-
62-
## Announce route changes
63-
For page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.
64-
65-
```javascript
66-
import Vue from 'vue'
67-
import router from './router'
68-
import VueAnnouncer from 'vue-announcer'
69-
70-
Vue.use(VueAnnouncer, {}, router)
71-
```
72-
73-
### Options
74-
Key | Data Type | default |
75-
------------------ | ---------- | ------------ |
76-
`complementRoute` | String | `has loaded` |
77-
78-
79-
Example:
80-
```javascript
81-
Vue.use(VueAnnouncer, {
82-
complementRoute: 'ha cargado' // e.g. in spanish
83-
}, router)
84-
```
85-
86-
### Methods
87-
**Note: These methods are registered on the `$announcer` property injected into the Vue instance**
88-
89-
#### `$announcer.setComplementRoute(complementRoute)`
90-
91-
If you need to set the `complementRoute` option dynamically without reloading the application, for example if you're
92-
dynamically loading translations, you can use this method to update it.
93-
94-
```javascript
95-
export default {
96-
onTranslationsUpdated (translations) {
97-
this.$announcer.setComplementRoute(translations.complementRouteKey /* = 'ha cargado' */)
98-
}
99-
}
100-
```
101-
102-
### Custom message to each page (optional)
103-
You can set a property on the meta object, which will serve as information to get the message that will be announced to the screen reader on each page. e.g.:
104-
```javascript
105-
{
106-
name: 'home',
107-
path: '/',
108-
component: Home,
109-
meta: {
110-
announcer: 'Página de inicio'
111-
}
112-
}
113-
```
114-
115-
When the page loads, the screen reader user will hear:
116-
```shell
117-
Página de inicio ha cargado
118-
```
5+
The [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer) (v2) provides an easy way to really tell what’s going on in your application to people using screen readers.
1196

7+
> For vue-announcer version 1.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/v1.0.6)
1208
9+
Inspired by others in the community like:
10+
- [Example of how creating an accessible single-page application](https://haltersweb.github.io/Accessibility/spa.html)
11+
- [Ember A11y community](https://github.com/ember-a11y/a11y-announcer)
12112

122-
**Note:**
123-
- The plugin checks whether it was defined in the meta object, otherwise, without any problems, the title of the page being loaded will be used.
124-
- The vue-announcer uses the global after hooks `router.afterEach` to announce the route changes.
13+
## Links
12514

126-
## Check live demo
127-
https://vue-announcer.surge.sh/
15+
- [Documentation](https://vue-announcer-v2.surge.sh)
16+
- [Demos](https://vue-announcer-v2.surge.sh/demos/)
12817

12918
## Run the tests
13019
```shell
13120
git clone https://github.com/vue-a11y/vue-announcer.git vue-announcer
13221

133-
// Run plugin
22+
# Run plugin
13423
cd vue-announcer
13524
npm install
13625
npm run dev
13726

138-
// Run example
27+
# Run example
13928
cd examples
14029
npm install
14130
npm run dev
14231
cd ..
14332

144-
// Run Cypress testing
33+
# Run Cypress testing
14534
npm run test
14635
```
14736

@@ -155,10 +44,10 @@ After the commands just access the http://localhost:8080/
15544

15645

15746
## Contributing
47+
- From typos in documentation to coding new features;
15848
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
15949
- Fork repository, make changes and send a pull request;
16050

161-
If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)
162-
And follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
51+
Follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
16352

16453
**Thank you**

‎cypress.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@
55
"integrationFolder": "tests/e2e/integration",
66
"fileServerFolder": "demo",
77
"pluginsFile": false,
8-
"supportFile": false,
9-
"videoRecording": false
8+
"supportFile": false
109
}

‎docs/.vuepress/config.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
module.exports = {
2+
title: 'Vue announcer',
3+
description: '',
4+
serviceWorker: true,
5+
themeConfig: {
6+
home: false,
7+
repo: 'vue-a11y/vue-announcer',
8+
docsDir: 'docs',
9+
locales: {
10+
'/': {
11+
editLinkText: 'Edit this page on GitHub',
12+
nav: [
13+
{
14+
text: 'Guide',
15+
link: '/guide/'
16+
},
17+
{
18+
text: 'Examples',
19+
link: '/demos/'
20+
}
21+
],
22+
sidebar: [
23+
'/',
24+
{
25+
title: 'Guide',
26+
collapsable: false,
27+
children: [
28+
'/guide/',
29+
'/guide/announcer.md',
30+
'/guide/announcer-router.md',
31+
'/guide/accessibility.md',
32+
'/guide/support.md',
33+
]
34+
},
35+
{
36+
title: 'Examples',
37+
collapsable: false,
38+
children: [
39+
'/demos/',
40+
'/demos/nuxt.md',
41+
'/demos/vuepress.md'
42+
]
43+
}
44+
]
45+
}
46+
}
47+
}
48+
}

‎docs/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Introduction
2+
3+
Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers.
4+
5+
The [vue-announcer](https://github.com/vue-a11y/vue-announcer) provides an easy way to really tell what’s going on in your application to people using screen readers.
6+
7+
Inspired by others in the community like:
8+
- [Example of how creating an accessible single-page application](https://haltersweb.github.io/Accessibility/spa.html)
9+
- [Ember A11y community](https://github.com/ember-a11y/a11y-announcer)

‎docs/demos/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Vue app
2+
3+
<iframe
4+
src="https://codesandbox.io/embed/vue-announcer-vue-project-z049t?fontsize=14&hidenavigation=1&theme=dark&view=editor"
5+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
6+
title="vue-announcer-vue-project"
7+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
8+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
9+
></iframe>
10+
11+
<a href="https://codesandbox.io/s/vue-announcer-vue-project-z049t" target="_blank" rel="noopener">Open Sandbox example</a>

‎docs/demos/nuxt.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Nuxt.js
2+
3+
### Coming soon

‎docs/demos/vuepress.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Vuepress
2+
3+
### Coming soon

‎docs/guide/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Installation
2+
3+
## Package
4+
5+
#### NPM
6+
```shell
7+
npm install -S vue-announcer
8+
```
9+
10+
#### Yarn
11+
```shell
12+
yarn add vue-announcer
13+
```
14+
15+
## Basic usage
16+
17+
```javascript
18+
import Vue from 'vue'
19+
import VueAnnouncer from 'vue-announcer'
20+
21+
Vue.use(VueAnnouncer)
22+
```
23+
24+
In your `App.vue`
25+
```vue
26+
<template>
27+
<div>
28+
<vue-announcer /> <!-- You can place it anywhere in your application -->
29+
...
30+
</div>
31+
</template>
32+
```
33+

0 commit comments

Comments
 (0)