Skip to content

Commit 2f32681

Browse files
ktquezktquez
committed
feat: Add documentation
1 parent 0c59ff9 commit 2f32681

File tree

9 files changed

+18282
-6978
lines changed

9 files changed

+18282
-6978
lines changed

‎README.md

+1-143
Original file line numberDiff line numberDiff line change
@@ -3,151 +3,9 @@
33
Accessibility auditing for Vue.js applications by running [dequelabs/axe-core](https://github.com/dequelabs/axe-core/) validation on the page you're viewing, `axe-core` will run 1 second after the last VueJS update (with a 5 seconds debounce max wait). Package inspired by [dequelabs/react-axe](https://github.com/dequelabs/react-axe).
44

55
## Links
6+
- [Documentation](https://axe.vue-a11y.com)
67
- [Demo](https://vue-axe.surge.sh/)
78

8-
## Install package
9-
#### NPM
10-
```shell
11-
npm install -D axe-core vue-axe
12-
```
13-
14-
#### Yarn
15-
```shell
16-
yarn add -D axe-core vue-axe
17-
```
18-
---
19-
20-
## Install plugin
21-
```javascript
22-
import Vue from 'vue'
23-
24-
if (process.env.NODE_ENV !== 'production') {
25-
const VueAxe = require('vue-axe').default
26-
Vue.use(VueAxe)
27-
}
28-
```
29-
## Configuration
30-
| Key | Type | Description | Default
31-
| ---------------------- | -------- |-------------------------------------------------------------- | -----------
32-
| `auto` | Boolean | Disables automatic verification. Only checks with `$axe.run` | `true`
33-
| `clearConsoleOnUpdate` | Boolean | Clears the console each time `vue-axe` runs | `false`
34-
| `customResultHandler` | Function | Handle the results. (This may be needed for automated tests)
35-
| `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)
36-
| `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)
37-
| `delay` | Number | Used to delay the first check. - `Millisecond`
38-
| `style` | Object | Customize style for console logs. | [See default style](https://github.com/vue-a11y/vue-axe/blob/master/src/index.js#L22)
39-
| `plugins` | Array | Register Axe plugins. [Axe docs: Plugins](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
40-
41-
### Custom Result Handler
42-
43-
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()`.
44-
45-
```javascript
46-
import Vue from 'vue'
47-
48-
if (process.env.NODE_ENV !== 'production') {
49-
const VueAxe = require('vue-axe').default
50-
Vue.use(VueAxe, {
51-
customResultHandler: (error, results) => {
52-
results.violations.forEach(violation => console.log(violation))
53-
}
54-
// ...
55-
})
56-
}
57-
```
58-
59-
### Run axe manually
60-
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.
61-
62-
#### `$axe.run({ clearConsole: Boolean, element: Document | HTMLElement })`
63-
64-
```vue
65-
<script>
66-
//...
67-
methods: {
68-
axeRun() {
69-
this.$axe.run({
70-
clearConsole: false,
71-
element: this.$el // e.g. document, document.querySelector('.selector'), ...
72-
})
73-
}
74-
}
75-
</script>
76-
```
77-
78-
### Running custom axe plugins
79-
Learn more about [axe plugin](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
80-
81-
```vue
82-
<script>
83-
//...
84-
methods: {
85-
handle () {
86-
this.$axe.plugins.myPlugin.run()
87-
}
88-
}
89-
</script>
90-
```
91-
92-
## Install in Nuxt.js
93-
Create plugin file `plugins/axe.js`
94-
```javascript
95-
import Vue from 'vue'
96-
97-
if (process.env.NODE_ENV !== 'production') {
98-
const VueAxe = require('vue-axe').default
99-
Vue.use(VueAxe)
100-
}
101-
102-
```
103-
104-
In config file `nuxt.config.js`
105-
```javascript
106-
...
107-
plugins: [
108-
{ src: '~/plugins/axe.js', mode: 'client' }
109-
]
110-
```
111-
112-
## Using with HTML files
113-
#### CDN
114-
```html
115-
<script src="https://unpkg.com/vue"></script>
116-
<script src="https://unpkg.com/axe-core"></script>
117-
<script src="https://unpkg.com/vue-axe"></script>
118-
```
119-
120-
```javascript
121-
Vue.use(VueAxe)
122-
```
123-
## See demo
124-
https://vue-axe.surge.sh/
125-
126-
## Run the demo
127-
```shell
128-
git clone https://github.com/vue-a11y/vue-axe.git vue-axe
129-
cd vue-axe/demo
130-
npm install
131-
npm run dev
132-
```
133-
134-
It is a simple webpack template already installed and configured to run and check the logs in the browser console.
135-
After the commands just access the http://localhost:8080/
136-
137-
138-
## Run the tests
139-
```shell
140-
git clone https://github.com/vue-a11y/vue-axe.git vue-axe
141-
cd vue-axe
142-
npm install
143-
npm run test
144-
```
145-
146-
Or run Cypress on interactive mode
147-
```shell
148-
npm run test:open
149-
```
150-
1519
## Contributing
15210
- From typos in documentation to coding new features;
15311
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;

‎docs/.vuepress/config.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
module.exports = {
2+
theme: 'default-vue-a11y',
3+
title: 'Vue Axe',
4+
head: [
5+
['meta', { name: 'theme-color', content: '#fff' }],
6+
],
7+
themeConfig: {
8+
home: false,
9+
repo: 'vue-a11y/vue-axe',
10+
docsDir: 'docs',
11+
docsBranch: 'master',
12+
editLinks: true,
13+
locales: {
14+
'/': {
15+
editLinkText: 'Edit this page on GitHub',
16+
sidebar: [
17+
'/',
18+
{
19+
title: "Guide",
20+
collapsable: false,
21+
children: [
22+
'/guide/',
23+
'/guide/options.md',
24+
'/guide/api.md',
25+
'/guide/locales.md',
26+
]
27+
}
28+
]
29+
}
30+
}
31+
}
32+
}

‎docs/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Introduction
2+
3+
Accessibility auditing for Vue.js applications by running dequelabs/axe-core validation on the page you're viewing, axe-core will run 1 second after the last VueJS update (with a 5 seconds debounce max wait).
4+
- Package inspired by [dequelabs/react-axe](https://github.com/dequelabs/react-axe).
5+
6+
## Links
7+
- [Demo](https://vue-axe.surge.sh/)

‎docs/guide/README.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Setup
2+
3+
## Installation
4+
5+
```shell
6+
npm install -D axe-core vue-axe
7+
# or
8+
yarn add -D axe-core vue-axe
9+
```
10+
11+
## Usage
12+
13+
Add to your `src/main.js`
14+
15+
```javascript
16+
if (process.env.NODE_ENV === 'development') {
17+
const VueAxe = require('vue-axe').default
18+
Vue.use(VueAxe)
19+
}
20+
```
21+
22+
### Nuxt.js
23+
24+
Create plugin file `plugins/axe.js`
25+
26+
```javascript
27+
import Vue from 'vue'
28+
29+
if (process.env.NODE_ENV === 'development') {
30+
const VueAxe = require('vue-axe').default
31+
Vue.use(VueAxe)
32+
}
33+
34+
```
35+
36+
In config file `nuxt.config.js`
37+
38+
```javascript
39+
...
40+
plugins: [
41+
{ src: '~/plugins/axe.js', mode: 'client' }
42+
]
43+
```

‎docs/guide/api.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# API
2+
3+
The `$axe` is available on the property injected into the Vue instance, so it is available everywhere in your application.
4+
5+
## Run
6+
7+
To execute the `$axe.run` method to check manually your document or any desired HTMLElement.
8+
9+
### `$axe.run`
10+
11+
| Key | Type | Default
12+
| ------------- | ------------------------ | ----------------------------------
13+
| clearConsole | Boolean | The same as `clearConsoleOnUpdate`
14+
| element | Document or HTMLElement | `document`
15+
16+
```js
17+
methods: {
18+
axeRun() {
19+
this.$axe.run({
20+
clearConsole: true,
21+
element: this.$el // or document, document.querySelector('.selector'), ...
22+
})
23+
}
24+
}
25+
```
26+
27+
## Plugins
28+
29+
Use the `$axe.plugins` method to have access to registered plugins.
30+
31+
::: tip
32+
To see how to register your plugins [click here](/guide/options.html#plugins)
33+
:::
34+
35+
### `$axe.plugins`
36+
37+
<br>
38+
39+
```js
40+
methods: {
41+
handle () {
42+
this.$axe.plugins.myPlugin.run()
43+
}
44+
}
45+
```
46+
47+
::: tip
48+
Learn more about [Axe docs: Plugins](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
49+
:::
50+

‎docs/guide/locales.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Locales
2+
3+
It's possible easily through the settings, to define the language that will be used for the logs.
4+
5+
::: tip
6+
axe-core already has several languages ​​available.
7+
[See axe-core locales](https://github.com/dequelabs/axe-core/tree/develop/locales)
8+
:::
9+
10+
```js
11+
import ptBR from 'axe-core/locales/pt_BR.json'
12+
13+
Vue.use(VueAxe, {
14+
config: {
15+
locale: ptBR
16+
}
17+
})
18+
```

0 commit comments

Comments
 (0)