button to show off axe re-running feature

Author: MechJosh0

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/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>
@@ -13,6 +13,9 @@
     </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>
 
@@ -27,7 +30,8 @@
     data () {
       return {
         msg: 'Welcome - Open your console',
-        num: 0
+        num: 0,
+        showAlt: false
       }
     },
     mounted()
@@ -41,6 +45,11 @@
           this.num += 1;
           this.updateNumber();
         }, 500);
+      },
+      toggleLogoAltTag()
+      {
+        this.showAlt = !this.showAlt
+        console.log('Wait for Axe to run again in 5 seconds')
       }
     }
   }