fix account menu accessibility

bcgov · Apr 16, 2024 · c18f601 · c18f601
1 parent 215013e
commit c18f601
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -10,16 +10,14 @@
     }"
   >
     <!-- Navbar content -->
-    <a tabindex="-1" href="/">
+    <a tabindex="-1" href="/" class="d-flex align-center">
       <img
         tabindex="-1"
         src="../assets/images/bc-gov-logo-light.png"
         width="155"
         class="logo"
         alt="B.C. Government Logo"
       />
-    </a>
-    <a tabindex="-1" href="/">
       <v-toolbar-title
         ><h3
           data-testid="header-title"
@@ -45,22 +43,26 @@
           <v-btn
             color="rgb(32, 31, 30)"
             v-bind="props"
+            arial-label="User profile"
             icon="mdi-account"
             data-testid="header-account-button"
+            title="User profile"
           ></v-btn>
         </template>
         <v-card min-width="250">
           <template v-slot:prepend>
-            <v-list aria-label="Profile">
-              <v-list-item>
+            <v-list>
+              <v-list-item :link="false" :arial-label="userInfo?.displayName">
                 <v-list-item-title
                   data-testid="header-display-name"
                   class="styles-override"
+                  :aria-label="userInfo?.displayName"
                   >{{ userInfo?.displayName }}</v-list-item-title
                 >
                 <v-list-item-subtitle
                   data-testid="header-legal-name"
                   class="styles-override"
+                  :aria-label="userInfo?.legalName"
                   >{{ userInfo?.legalName }}</v-list-item-subtitle
                 >
               </v-list-item>
@@ -78,6 +80,8 @@
                   icon="mdi-logout"
                   data-testid="header-logout-button"
                   @click="redirectToLogout"
+                  title="Logout"
+                  aria-label="Logout"
                 ></v-btn>
               </template>
             </v-tooltip>