Skip to content

Commit 9bb2742

Browse files
ktquezktquez
authored
Merge pull request #24 from vue-a11y/next
New version - v1.2.0
2 parents 27b5fcd + 2b66eb0 commit 9bb2742

15 files changed

+5974
-5014
lines changed

Diff for: ‎.babelrc

-6
This file was deleted.

Diff for: ‎.eslintrc.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,17 @@ module.exports = {
55
browser: true,
66
node: true
77
},
8-
extends: 'standard',
8+
extends: [
9+
'plugin:vue/recommended',
10+
'@vue/standard',
11+
],
912
plugins: [
1013
"cypress"
1114
],
12-
// add your custom rules here
13-
rules: {},
14-
globals: {}
15+
parserOptions: {
16+
parser: 'babel-eslint'
17+
},
18+
rules: {
19+
'no-console': 'off'
20+
}
1521
}

Diff for: ‎README.md

+54-37
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ Accessibility auditing for Vue.js applications by running [dequelabs/axe-core](h
55
## Install package
66
#### NPM
77
```shell
8-
npm install -D vue-axe
8+
npm install -D axe-core vue-axe
99
```
1010

1111
#### Yarn
1212
```shell
13-
yarn add -D vue-axe
13+
yarn add -D axe-core vue-axe
1414
```
1515
---
1616

@@ -20,27 +20,21 @@ import Vue from 'vue'
2020

2121
if (process.env.NODE_ENV !== 'production') {
2222
const VueAxe = require('vue-axe')
23-
Vue.use(VueAxe, {
24-
config: {
25-
// ...
26-
rules: [
27-
{ id: 'heading-order', enabled: true },
28-
{ id: 'label-title-only', enabled: true },
29-
// and more
30-
]
31-
}
32-
})
23+
Vue.use(VueAxe)
3324
}
3425
```
35-
#### Configuration
36-
|Key|Description|Default|Required|
37-
|---|---|---|---|
38-
|`clearConsoleOnUpdate`|Clears the console each time `vue-axe` runs|`true`|`false`|
39-
|`customResultHandler`|Handle the results from an `axe.run()`. This may be needed for automated tests.|`undefined`|`false`|
40-
|`config`|Provide your Axe-core configuration: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure| |`false`|
41-
|`runOptions`|Provide your Axe-core runtime options: [API Name: axe.run](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter)|`{ reporter: 'v2', resultTypes: ['violations'] }`|`false`|
42-
43-
#### Custom Result Handler
26+
## Configuration
27+
| Key | Type | Description | Default
28+
| ---------------------- | -------- |-------------------------------------------------------------- | -----------
29+
| `clearConsoleOnUpdate` | Boolean | Clears the console each time `vue-axe` runs | `false`
30+
| `customResultHandler` | Function | Handle the results. (This may be needed for automated tests)
31+
| `config` | Object | Provide your [Axe-core configuration](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure) | [See default config](https://github.com/vue-a11y/vue-axe/blob/master/src/index.js#L13)
32+
| `runOptions` | Object | Provide your [Axe-core runtime options](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter) | [See default runOption](https://github.com/vue-a11y/vue-axe/blob/master/src/index.js#L18)
33+
| `delay` | Number | Used to delay the first check. - `Millisecond`
34+
| `style` | Object | Customize style for console logs. | [See default style](https://github.com/vue-a11y/vue-axe/blob/master/src/index.js#L22)
35+
| `plugins` | Array | Register Axe plugins. [Axe docs: Plugins](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
36+
37+
### Custom Result Handler
4438

4539
The `customResultHandler` config property expects a callback like the `axe.run()` callback ([see documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#parameters-axerun)). It will be triggered after each call to `axe.run()`.
4640

@@ -58,18 +52,45 @@ if (process.env.NODE_ENV !== 'production') {
5852
}
5953
```
6054

55+
### Run axe manually `$axe.run({ clearConsole: Boolean, element: Document | HTMLElement })`
56+
The `$axe` is available on the property injected into the Vue instance, so it is available everywhere in your application. With it it is possible to execute the `$axe.run` method to check manually your document or any desired HTMLElement.
57+
58+
```vue
59+
<script>
60+
//...
61+
methods: {
62+
axeRun() {
63+
this.$axe.run({
64+
clearConsole: false,
65+
element: this.$el // e.g. document, document.querySelector('.selector'), ...
66+
})
67+
}
68+
}
69+
</script>
70+
```
71+
72+
### Running custom axe plugins
73+
Learn more about [axe plugin](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
74+
75+
```vue
76+
<script>
77+
//...
78+
methods: {
79+
handle () {
80+
this.$axe.plugins.myPlugin.run()
81+
}
82+
}
83+
</script>
84+
```
85+
6186
## Install in Nuxt.js
6287
Create plugin file `plugins/axe.js`
6388
```javascript
6489
import Vue from 'vue'
6590

6691
if (process.env.NODE_ENV !== 'production') {
6792
const VueAxe = require('vue-axe')
68-
Vue.use(VueAxe, {
69-
config: {
70-
// your configuration data
71-
}
72-
})
93+
Vue.use(VueAxe)
7394
}
7495

7596
```
@@ -78,32 +99,27 @@ In config file `nuxt.config.js`
7899
```javascript
79100
...
80101
plugins: [
81-
{ src: '~/plugins/axe', ssr: false }
102+
{ src: '~/plugins/axe.js', mode: 'client' }
82103
]
83104
```
84105

85106
## Using with HTML files
86107
#### CDN
87108
```html
88-
<!-- Required Javascript -->
89109
<script src="https://unpkg.com/vue"></script>
90110
<script src="https://unpkg.com/vue-axe"></script>
91111
```
92112

93113
```javascript
94-
Vue.use(VueAxe, {
95-
config: {
96-
// your configuration data
97-
}
98-
})
114+
Vue.use(VueAxe)
99115
```
100116
## See demo
101117
https://vue-axe.surge.sh/
102118

103119
## Run the demo
104120
```shell
105-
git clone https://github.com/vue-a11y/vue-axe.git vue-axe-demo
106-
cd vue-axe-demo/demo
121+
git clone https://github.com/vue-a11y/vue-axe.git vue-axe
122+
cd vue-axe/demo
107123
npm install
108124
npm run dev
109125
```
@@ -115,6 +131,7 @@ After the commands just access the http://localhost:8080/
115131
## Run the tests
116132
```shell
117133
git clone https://github.com/vue-a11y/vue-axe.git vue-axe
134+
cd vue-axe
118135
npm install
119136
npm run test
120137
```
@@ -125,11 +142,11 @@ npm run test:open
125142
```
126143

127144
## Contributing
145+
- From typos in documentation to coding new features;
128146
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
129147
- Fork repository, make changes and send a pull request;
130148

131-
If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)
132-
And follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
149+
Follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
133150

134151
**thank you**
135152

Diff for: ‎demo/src/App.vue

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div id="app" role="main">
2+
<div id="app">
33
<router-view />
44
</div>
55
</template>
66

77
<script>
88
export default {
9-
name: 'app'
9+
name: 'App'
1010
}
1111
</script>
1212

@@ -17,6 +17,8 @@ export default {
1717
-moz-osx-font-smoothing: grayscale;
1818
text-align: center;
1919
color: #2c3e50;
20+
max-width: 600px;
21+
margin: 0 auto;
2022
margin-top: 60px;
2123
}
2224
@@ -33,8 +35,4 @@ li {
3335
display: inline-block;
3436
margin: 0 10px;
3537
}
36-
37-
a {
38-
color: #42b983;
39-
}
4038
</style>

Diff for: ‎demo/src/main.js

+6-14
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,12 @@ import Vue from 'vue'
22
import App from './App.vue'
33
import router from './router.js'
44

5-
// Use this plugin only in development => if (process.env.NODE_ENV !== 'production')
6-
const VueAxe = require('../../dist/vue-axe')
7-
Vue.use(VueAxe, {
8-
config: {
9-
rules: [
10-
{ id: 'heading-order', enabled: true },
11-
{ id: 'label-title-only', enabled: true },
12-
{ id: 'link-in-text-block', enabled: true },
13-
{ id: 'region', enabled: true },
14-
{ id: 'skip-link', enabled: true },
15-
{ id: 'help-same-as-label', enabled: true }
16-
]
17-
}
18-
})
5+
if (process.env.NODE_ENV !== 'production') {
6+
const VueAxe = require('../vue-axe').default
7+
Vue.use(VueAxe, {
8+
clearConsoleOnUpdate: true
9+
})
10+
}
1911
Vue.config.productionTip = false
2012

2113
/* eslint-disable no-new */

0 commit comments

Comments
 (0)