Add missing aria attr, new gif

What:

1) Added aria attributes that were missing
2) Added new demo gif
3) Set getLocation to only happen on RegisterDialog

Why:

1) Audit recommendation
2) Made current
3) Audit recommendation

client/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="description" content="Stock and crypto trading simulator" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <link
       href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;700&family=Quicksand:wght@300;400;600&display=swap"

client/src/components/footer_nav_button/FooterNavButton.vue

@@ -6,39 +6,40 @@
       { 'footer-nav-button--dark': dark },
       { 'footer-nav-button--active': active }
     ]"
+    aria-label="{{`link to ${link}`}}"
   >
     <i :class="icon + ' footer-nav-button__icon'"></i>
   </v-btn>
 </template>
 
 <script>
-  export default {
-    name: 'FooterNavButton',
-    props: {
-      label: {
-        type: String,
-        default: 'fas fa-question'
-      },
-      dark: {
-        type: Boolean,
-        default: false
-      },
-      icon: {
-        type: String,
-        default: 'fas fa-question'
-      },
-      link: {
-        type: String,
-        default: '/'
-      },
-      active: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: 'FooterNavButton',
+  props: {
+    label: {
+      type: String,
+      default: 'fas fa-question'
+    },
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: 'fas fa-question'
+    },
+    link: {
+      type: String,
+      default: '/'
+    },
+    active: {
+      type: Boolean,
+      default: false
     }
-  };
+  }
+};
 </script>
 
 <style scoped lang="scss">
-  @import 'footer_nav_button';
+@import 'footer_nav_button';
 </style>

client/src/components/info-list/InfoList.vue

@@ -1,43 +1,46 @@
 <template>
-  <v-list
-    v-bind:class="['info-list', { 'info-list--dark': dark }]"
-    :dark="dark"
-  >
-    <v-card class="info-list__card">
-      <h2><i class="fas fa-user-plus"></i>Register for free</h2>
+  <v-list v-bind:class="['info-list', { 'info-list--dark': dark }]" :dark="dark">
+    <v-card role="note" class="info-list__card">
+      <h2>
+        <i class="fas fa-user-plus"></i>Register for free
+      </h2>
       <p>Create an account for free today and start trading instantly.</p>
     </v-card>
-    <v-card class="info-list__card">
-      <h2><i class="fa fa-chart-line"></i>Create a portfolio</h2>
+    <v-card role="note" class="info-list__card">
+      <h2>
+        <i class="fa fa-chart-line"></i>Create a portfolio
+      </h2>
       <p>Create one or more portfolios to see what could have been.</p>
     </v-card>
-    <v-card class="info-list__card">
-      <h2><i class="fas fa-balance-scale-left"></i>Trade assets</h2>
+    <v-card role="note" class="info-list__card">
+      <h2>
+        <i class="fas fa-balance-scale-left"></i>Trade assets
+      </h2>
       <p>
         Choose from over a hundred stocks and cryptocurrencies. With more on the
         way!
       </p>
     </v-card>
-    <v-card class="info-list__card">
-      <h2><i class="fas fa-trophy"></i>Compete with friends</h2>
-      <p>
-        Track your portfolios performance against others.
-      </p>
+    <v-card role="note" class="info-list__card">
+      <h2>
+        <i class="fas fa-trophy"></i>Compete with friends
+      </h2>
+      <p>Track your portfolios performance against others.</p>
     </v-card>
   </v-list>
 </template>
 
 <script>
-  export default {
-    name: 'InfoList',
-    computed: {
-      dark() {
-        return this.$store.state.ui.dark;
-      }
+export default {
+  name: 'InfoList',
+  computed: {
+    dark() {
+      return this.$store.state.ui.dark;
     }
-  };
+  }
+};
 </script>
 
 <style scoped lang="scss">
-  @import 'info_list';
+@import 'info_list';
 </style>

client/src/components/info_slider/InfoSlider.vue

@@ -61,17 +61,17 @@
     </v-window>
 
     <v-card-actions class="slide-controls">
-      <v-btn text @click="prev">
+      <v-btn aria-label="previous" text @click="prev">
         <v-icon>mdi-chevron-left</v-icon>
       </v-btn>
       <v-item-group v-model="onboarding" class="text-center" mandatory>
         <v-item v-for="n in length" :key="`btn-${n}`" v-slot:default="{ active, toggle }">
-          <v-btn :input-value="active" icon @click="toggle">
+          <v-btn aria-label="{{`slide-photo-${n}`}}" :input-value="active" icon @click="toggle">
             <v-icon>mdi-record</v-icon>
           </v-btn>
         </v-item>
       </v-item-group>
-      <v-btn text @click="next">
+      <v-btn aria-label="next" text @click="next">
         <v-icon>mdi-chevron-right</v-icon>
       </v-btn>
     </v-card-actions>

client/src/components/navbar/Navbar.vue

@@ -7,37 +7,38 @@
       :active="dark"
       :options="{ left: 'fas fa-moon', right: 'fas fa-sun' }"
     ></VuemorphicToggle>
-    <img class="brand" v-if="!dark" src="@/assets/logo.png" />
-    <img class="brand" v-if="dark" src="@/assets/logo--dark-mode.png" />
+    <img class="brand" alt="traderu" v-if="!dark" src="@/assets/logo.png" />
+    <img class="brand" alt="traderu" v-if="dark" src="@/assets/logo--dark-mode.png" />
     <v-app-bar-nav-icon
       @click="this.toggleDrawer"
       v-bind:class="{ 'v-btn--icon--active': pressed }"
+      aria-label="navigation-drawer"
     ></v-app-bar-nav-icon>
   </nav>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import VuemorphicToggle from '@/components/vuemorphic_toggle/VuemorphicToggle.vue';
-  import { mapMutations } from 'vuex';
+import Vue from 'vue';
+import VuemorphicToggle from '@/components/vuemorphic_toggle/VuemorphicToggle.vue';
+import { mapMutations } from 'vuex';
 
-  export default Vue.extend({
-    name: 'Navbar',
-    components: { VuemorphicToggle },
-    computed: {
-      pressed() {
-        return this.$store.state.ui.showDrawer;
-      },
-      dark() {
-        return this.$store.state.ui.dark;
-      }
+export default Vue.extend({
+  name: 'Navbar',
+  components: { VuemorphicToggle },
+  computed: {
+    pressed() {
+      return this.$store.state.ui.showDrawer;
     },
-    methods: {
-      ...mapMutations(['toggleDrawer', 'toggleDarkMode'])
+    dark() {
+      return this.$store.state.ui.dark;
     }
-  });
+  },
+  methods: {
+    ...mapMutations(['toggleDrawer', 'toggleDarkMode'])
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-  @import 'navbar';
+@import 'navbar';
 </style>

client/src/components/register_dialog/RegisterDialog.vue

@@ -176,8 +176,10 @@ export default Vue.extend({
         });
     }
   },
-  mounted() {
-    this.getLocation();
+  watch: {
+    registerDialog: function() {
+      if (this.registerDialog) this.getLocation();
+    }
   }
 });
 </script>