Merge pull request #2 from MechJosh0/master

Debounce and do not clear console features + more minor changes

Author: ktquez

.gitignore

@@ -1,9 +1,10 @@
+.idea
 node_modules
-dist
 .editorconfig
 .DS_Store
 demo/vue-axe.js
 demo/node_modules
 demo/dist
 demo/CNAME
-demo/package-lock.json
+demo/package-lock.json
+cypress

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.
 
+<a name="1.0.6"></a>
+## [1.0.6](https://github.com/vue-a11y/vue-axe/compare/v1.0.5...v1.0.6) (2018-10-04)
+
+
+
+<a name="1.0.5"></a>
+## [1.0.5](https://github.com/vue-a11y/vue-axe/compare/v1.0.4...v1.0.5) (2018-10-04)
+
+
+
 <a name="1.0.4"></a>
 ## [1.0.4](https://github.com/vue-a11y/vue-axe/compare/v1.0.3...v1.0.4) (2018-05-23)
 

README.md

@@ -1,6 +1,6 @@
 # vue-axe
 
-Accessibility auditing for Vue.js applications (Inspired by [dequelabs/react-axe](https://github.com/dequelabs/react-axe))
+Accessibility auditing for Vue.js applications by running [dequelabs/axe-core](https://github.com/dequelabs/axe-core/) validation on the page your 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).
 
 ## Install package
 #### NPM
@@ -30,12 +30,13 @@ if (process.env.NODE_ENV !== 'production') {
       ]
     }
   })
-  Vue.config.productionTip = false
 }
 ```
-
-Optional: You can also pass settings through the second parameter at the time of installing the plugin, read about the object here:  
-https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure
+#### Configuration
+|Key|Description|Default|Required|
+|---|---|---|---|
+|`clearConsoleOnUpdate`|Clears the console each time `vue-axe` runs|`true`|`false`|
+|`config`|Provide your Axe-core configuration: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure| |`false`|
 
 ## Install in Nuxt.js
 Create plugin file `plugins/axe.js`
@@ -49,7 +50,6 @@ if (process.env.NODE_ENV !== 'production') {
       // your configuration data
     }
   })
-  Vue.config.productionTip = false
 }
 
 ```

demo/README.md

@@ -5,7 +5,16 @@
 ## Build Setup
 
 ``` bash
-# install dependencies
+# install vue-axe dependencies (root project / parent directory)
+npm install
+
+# build vue-axe
+npm run dist
+
+# switch to demo folder
+cd demo
+
+# install demo dependencies
 npm install
 
 # serve with hot reload at localhost:8080

demo/src/components/Logo.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
-    <img :src="src" role="oisduhuo">
+    <img v-if="showAlt" :src="src" role="oisduhuo" alt="VueJS Logo">
+    <img v-else :src="src" role="oisduhuo">
   </div>
 </template>
 
 <script>
   export default {
     name: 'Logo',
-    props: ['src']
+    props: ['src', 'showAlt']
   }
 </script>

demo/src/main.js

@@ -2,8 +2,8 @@ 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('../vue-axe')
+// Use this plugin only in development => if (process.env.NODE_ENV !== 'production')
+const VueAxe = require('../../dist/vue-axe')
 Vue.use(VueAxe, {
   config: {
     rules: [

demo/src/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <logo :src="require('@/assets/logo.png')" />
+    <logo :src="require('@/assets/logo.png')" :showAlt="showAlt" />
     <h1 data-va="main header">{{ msg }}</h1>
     <h2>Access Pages</h2>
     <ul>
@@ -11,25 +11,50 @@
         <router-link to="/contact">Contact</router-link>
       </li>
     </ul>
+    <!--<p>Number: {{num}}</p>-->
+    <!--<p>Each time the number updates it's running a debounce function to call `axe-core` again.<br />It will only run run the debounce once per 5 seconds or 1 second after the last call.</p>-->
+    <!--<p>Use this button to see the console update as you fix or break a11y rules.</p>-->
+    <button v-if="!showAlt" @click="toggleLogoAltTag">Add an alt tag to the logo</button>
+    <button v-else @click="toggleLogoAltTag">Remove the alt tag from the logo</button>
   </div>
 </template>
 
 <script>
   import Logo from '@/components/Logo'
-  
+
   export default {
     name: 'Home',
     components: {
       Logo
     },
     data () {
       return {
-        msg: 'Welcome - Open your console'
+        msg: 'Welcome - Open your console',
+        // num: 0,
+        showAlt: false
+      }
+    },
+    // mounted()
+    // {
+    //   this.updateNumber();
+    // },
+    methods: {
+      // updateNumber()
+      // {
+      //   setTimeout(() => {
+      //     this.num += 1;
+      //     this.updateNumber();
+      //   }, 500);
+      // },
+      toggleLogoAltTag()
+      {
+        this.showAlt = !this.showAlt
+        // console.log('Wait for Axe to run again in 5 seconds')
       }
     }
   }
 </script>
 
 <style scoped>
 
-</style>
+</style>