Resolve welcome page a11y violations (#119)

Co-authored-by: David Paquette <[email protected]>

Author: David Paquette

2wr-app/package.json

@@ -10,7 +10,8 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "api": "func start --prefix ..\\api\\TwoWeeksReady\\",
-    "azurite": "azurite --silent --location c:\\temp\\azurite"
+    "azurite": "azurite --silent --location c:\\temp\\azurite",
+    "e2etest": "playwright test"
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "^1.13.6",

2wr-app/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app :style="{background: $vuetify.theme.themes[theme].background}">
-    <div v-if="isBusy" class="loading-line"></div>
+    <div v-if="isBusy" class="loading-line" role="progressbar"></div>
     <v-main>
       <router-view></router-view>
       <v-dialog persistent :value="error">
@@ -17,33 +17,32 @@
       </v-dialog>
     </v-main>
     <!-- Check that the SDK client is not currently loading before accessing is methods -->
-    <div>
       <!-- show login when not authenticated -->
 
-      <!-- show logout when authenticated -->
-      <v-bottom-navigation app fixed background-color="secondary">
-        <v-btn v-if="!$auth.isAuthenticated" height="100%" @click="login" color="secondary">
-          <span>login</span>
-          <v-icon>mdi-login-variant</v-icon>
-        </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" to="/prepare" height="100%" color="secondary">
-          <span>Prepare</span>
-          <v-icon>mdi-clipboard-list-outline</v-icon>
-        </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" to="/recent" height="100%" color="secondary">
-          <span>Recent Events</span>
-          <v-icon>mdi-calendar-star</v-icon>
-        </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" to="/settings" height="100%" color="secondary">
-          <span>Settings</span>
-          <v-icon>mdi-cog</v-icon>
-        </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" @click="logout" height="100%" color="secondary">
-          <span>Logout</span>
-          <v-icon>mdi-logout-variant</v-icon>
-        </v-btn>
-      </v-bottom-navigation>
-    </div>
+    <!-- show logout when authenticated -->
+    <v-bottom-navigation background-color="secondary" dark role="navigation">
+      <v-btn v-if="!$auth.isAuthenticated" height="100%" @click="login" color="secondary">
+        <span>Login</span>
+        <v-icon>mdi-login-variant</v-icon>
+      </v-btn>
+      <v-btn v-if="$auth.isAuthenticated" to="/prepare" height="100%" color="secondary">
+        <span>Prepare</span>
+        <v-icon>mdi-clipboard-list-outline</v-icon>
+      </v-btn>
+      <v-btn v-if="$auth.isAuthenticated" to="/recent" height="100%" color="secondary">
+        <span>Recent Events</span>
+        <v-icon>mdi-calendar-star</v-icon>
+      </v-btn>
+      <v-btn v-if="$auth.isAuthenticated" to="/settings" height="100%" color="secondary">
+        <span>Settings</span>
+        <v-icon>mdi-cog</v-icon>
+      </v-btn>
+      <v-btn v-if="$auth.isAuthenticated" @click="logout" height="100%" color="secondary">
+        <span>Logout</span>
+        <v-icon>mdi-logout-variant</v-icon>
+      </v-btn>
+    </v-bottom-navigation>
+  
   </v-app>
 </template>
 
@@ -79,6 +78,12 @@ export default {
 </script>
 
 <style scoped>
+
+.theme--dark.v-bottom-navigation .v-btn:not(.v-btn--active)
+{
+  color: rgba(255, 255, 255, .95) !important;
+}
+
 .loading-line {
   height: 3px;
   position: absolute;

2wr-app/src/components/welcome/welcome-landing.vue

@@ -2,11 +2,11 @@
   <v-container>
     <v-row class="text-center">
       <v-col cols="12">
-        <img src="/img/icons/safari-pinned-tab.svg" width="350" />
+        <img src="/img/icons/safari-pinned-tab.svg" width="350" alt="2 Weeks Ready Backpack Logo"/>
       </v-col>
 
       <v-col v-if="stage === 1" cols="12" md="6" offset-md="3" class="text-left pa-6">
-        <h2 class="text-center text-uppercase">Welcome to 2 weeks ready</h2>
+        <h1 class="text-center text-uppercase text-h2">Welcome to 2 weeks ready</h1>
         <p>
           <strong>2 Weeks Ready</strong> is a mobile application that makes
           emergency preparedness a <strong>simple</strong>,
@@ -49,6 +49,7 @@
         fab
         class="mb-12"
         @click="next()"
+        aria-label="Next"
       >
         <v-icon>mdi-chevron-right</v-icon>
       </v-btn>

2wr-app/src/plugins/vuetify.js

@@ -6,7 +6,7 @@ import VueRouter from 'vue-router'
 
 const themeColors = {
     lightOrange: "#f99b2c",
-    darkOrange: "#d75727",
+    darkOrange: "#c14d23",
     background: "#f8f1c7"
 }