Merge pull request #24 from vue-a11y/next

New version - v1.2.0

Author: ktquez

.babelrc

@@ -5,11 +5,17 @@ module.exports = {
     browser: true,
     node: true
   },
-  extends: 'standard',
+  extends: [
+    'plugin:vue/recommended',
+    '@vue/standard',
+  ],
   plugins: [
     "cypress"
   ],
-  // add your custom rules here
-  rules: {},
-  globals: {}
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': 'off'
+  }  
 }

.eslintrc.js

@@ -5,12 +5,12 @@ Accessibility auditing for Vue.js applications by running [dequelabs/axe-core](h
 ## Install package
 #### NPM
 ```shell
-npm install -D vue-axe
+npm install -D axe-core vue-axe
 ```
 
 #### Yarn
 ```shell
-yarn add -D vue-axe
+yarn add -D axe-core vue-axe
 ```
 ---
 
@@ -20,27 +20,21 @@ import Vue from 'vue'
 
 if (process.env.NODE_ENV !== 'production') {
   const VueAxe = require('vue-axe')
-  Vue.use(VueAxe, {
-    config: {
-      // ...
-      rules: [
-        { id: 'heading-order', enabled: true },
-        { id: 'label-title-only', enabled: true },
-        // and more
-      ]
-    }
-  })
+  Vue.use(VueAxe)
 }
 ```
-#### Configuration
-|Key|Description|Default|Required|
-|---|---|---|---|
-|`clearConsoleOnUpdate`|Clears the console each time `vue-axe` runs|`true`|`false`|
-|`customResultHandler`|Handle the results from an `axe.run()`. This may be needed for automated tests.|`undefined`|`false`|
-|`config`|Provide your Axe-core configuration: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure| |`false`|
-|`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`|
-
-#### Custom Result Handler
+## Configuration
+| Key                    | Type     | Description                                                   | Default    
+| ---------------------- | -------- |-------------------------------------------------------------- | -----------
+| `clearConsoleOnUpdate` | Boolean  | Clears the console each time `vue-axe` runs                   | `false`    
+| `customResultHandler`  | Function | Handle the results. (This may be needed for automated tests)
+| `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) 
+| `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) 
+| `delay`                | Number   | Used to delay the first check. - `Millisecond`
+| `style`                | Object   | Customize style for console logs. | [See default style](https://github.com/vue-a11y/vue-axe/blob/master/src/index.js#L22) 
+| `plugins`              | Array    | Register Axe plugins. [Axe docs: Plugins](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
+
+### Custom Result Handler
 
 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()`. 
 
@@ -58,18 +52,45 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ``` 
 
+### Run axe manually `$axe.run({ clearConsole: Boolean, element: Document | HTMLElement })`
+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.
+
+```vue
+<script>
+//...
+  methods: {
+    axeRun() {
+      this.$axe.run({
+        clearConsole: false,
+        element: this.$el     // e.g. document, document.querySelector('.selector'), ...
+      })
+    }
+  }
+</script>
+```
+
+### Running custom axe plugins
+Learn more about [axe plugin](https://github.com/dequelabs/axe-core/blob/master/doc/plugins.md)
+
+```vue
+<script>
+//...
+  methods: {
+    handle () {
+      this.$axe.plugins.myPlugin.run()
+    }
+  }
+</script>
+```
+
 ## Install in Nuxt.js
 Create plugin file `plugins/axe.js`
 ```javascript
 import Vue from 'vue'
 
 if (process.env.NODE_ENV !== 'production') {
   const VueAxe = require('vue-axe')
-  Vue.use(VueAxe, {
-    config: {
-      // your configuration data
-    }
-  })
+  Vue.use(VueAxe)
 }
 
 ```
@@ -78,32 +99,27 @@ In config file `nuxt.config.js`
 ```javascript
 ...
 plugins: [
-  { src: '~/plugins/axe', ssr: false }
+  { src: '~/plugins/axe.js', mode: 'client' }
 ]
 ```
 
 ## Using with HTML files
 #### CDN 
 ```html
-<!-- Required Javascript -->
 <script src="https://unpkg.com/vue"></script>
 <script src="https://unpkg.com/vue-axe"></script>
 ```
 
 ```javascript
-Vue.use(VueAxe, {
-  config: {
-    // your configuration data
-  }
-})
+Vue.use(VueAxe)
 ```
 ## See demo
 https://vue-axe.surge.sh/
 
 ## Run the demo
 ```shell
-git clone https://github.com/vue-a11y/vue-axe.git vue-axe-demo
-cd vue-axe-demo/demo
+git clone https://github.com/vue-a11y/vue-axe.git vue-axe
+cd vue-axe/demo
 npm install
 npm run dev
 ```
@@ -115,6 +131,7 @@ After the commands just access the http://localhost:8080/
 ## Run the tests
 ```shell
 git clone https://github.com/vue-a11y/vue-axe.git vue-axe
+cd vue-axe
 npm install
 npm run test 
 ```
@@ -125,11 +142,11 @@ npm run test:open
 ```
 
 ## Contributing
+- From typos in documentation to coding new features;
 - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
 - Fork repository, make changes and send a pull request;
 
-If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)
-And follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
+Follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
 
 **thank you**
 

README.md

@@ -1,12 +1,12 @@
 <template>
-  <div id="app" role="main">
+  <div id="app">
     <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'app'
+  name: 'App'
 }
 </script>
 
@@ -17,6 +17,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  max-width: 600px;
+  margin: 0 auto;
   margin-top: 60px;
 }
 
@@ -33,8 +35,4 @@ li {
   display: inline-block;
   margin: 0 10px;
 }
-
-a {
-  color: #42b983;
-}
 </style>

demo/src/App.vue

@@ -2,20 +2,12 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router.js'
 
-// Use this plugin only in development => if (process.env.NODE_ENV !== 'production')
-const VueAxe = require('../../dist/vue-axe')
-Vue.use(VueAxe, {
-  config: {
-    rules: [
-      { id: 'heading-order', enabled: true },
-      { id: 'label-title-only', enabled: true },
-      { id: 'link-in-text-block', enabled: true },
-      { id: 'region', enabled: true },
-      { id: 'skip-link', enabled: true },
-      { id: 'help-same-as-label', enabled: true }
-    ]
-  }
-})
+if (process.env.NODE_ENV !== 'production') {
+  const VueAxe = require('../vue-axe').default
+  Vue.use(VueAxe, {
+    clearConsoleOnUpdate: true
+  })
+}
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */