Merge pull request #10865 from ianoxley/navbar-a11y-alt-text

Add text alternatives for navbar items

website/client/components/header/menu.vue

@@ -6,12 +6,12 @@ div
   report-flag-modal
   send-gems-modal
   b-navbar.topbar.navbar-inverse.static-top(toggleable="lg", type="dark", :class="navbarZIndexClass")
-    b-navbar-brand.brand
+    b-navbar-brand.brand(aria-label="Habitica")
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
       .svg-icon.gryphon.d-xs-block.d-xl-none
     b-navbar-toggle(target='menu_collapse').menu-toggle
     .quick-menu.mobile-only.form-inline
-      a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')")
+      a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')", :aria-label="$t('sync')")
         .top-menu-icon.svg-icon(v-html="icons.sync")
       notification-menu.item-with-icon
       user-dropdown.item-with-icon
@@ -64,13 +64,13 @@ div
           .top-menu-icon.svg-icon(v-html="icons.hourglasses", v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')")
           span {{ userHourglasses }}
         .item-with-icon
-          .top-menu-icon.svg-icon.gem(v-html="icons.gem", @click='showBuyGemsModal("gems")', v-b-tooltip.hover.bottom="$t('gems')")
+          a.top-menu-icon.svg-icon.gem(:aria-label="$t('gems')", href="#buy-gems" v-html="icons.gem", @click.prevent='showBuyGemsModal("gems")', v-b-tooltip.hover.bottom="$t('gems')")
           span {{userGems}}
         .item-with-icon.gold
-          .top-menu-icon.svg-icon(v-html="icons.gold", v-b-tooltip.hover.bottom="$t('gold')")
+          .top-menu-icon.svg-icon(:aria-label="$t('gold')", v-html="icons.gold", v-b-tooltip.hover.bottom="$t('gold')")
           span {{Math.floor(user.stats.gp * 100) / 100}}
       .form-inline.desktop-only
-        a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')")
+        a.item-with-icon(@click="sync", @keyup.enter="sync", role="link", :aria-label="$t('sync')", tabindex="0", v-b-tooltip.hover.bottom="$t('sync')")
           .top-menu-icon.svg-icon(v-html="icons.sync")
         notification-menu.item-with-icon
         user-dropdown.item-with-icon
@@ -290,6 +290,7 @@ div
       margin-right: 24px;
     }
 
+    &:focus /deep/ .top-menu-icon.svg-icon,
     &:hover /deep/ .top-menu-icon.svg-icon {
       color: $white;
     }

website/client/components/header/notificationsDropdown.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 menu-dropdown.item-notifications(:right="true", @toggled="handleOpenStatusChange", :openStatus="openStatus")
   div(slot="dropdown-toggle")
-    div(v-b-tooltip.hover.bottom="$t('notifications')")
+    div(:aria-label="$t('notifications')", v-b-tooltip.hover.bottom="$t('notifications')")
       message-count(
         v-if='notificationsCount > 0',
         :count="notificationsCount",

website/client/components/header/userDropdown.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 menu-dropdown.item-user(:right="true")
   div(slot="dropdown-toggle")
-    div(v-b-tooltip.hover.bottom="$t('user')")
+    div(:aria-label="$t('user')", v-b-tooltip.hover.bottom="$t('user')")
       message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages", :top="true")
       .top-menu-icon.svg-icon.user(v-html="icons.user")
   .user-dropdown(slot="dropdown-content")

website/client/components/ui/customMenuDropdown.vue

@@ -3,7 +3,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 -->
 
 <template lang="pug">
-.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
+.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
   .habitica-menu-dropdown-toggle
     slot(name="dropdown-toggle")
   .dropdown-menu(:class="{'dropdown-menu-right': right}")
@@ -12,11 +12,17 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 
 <style lang="scss">
 @import '~client/assets/scss/colors.scss';
+.habitica-menu-dropdown {
+  &:hover,
+  &:focus { // NB focus styles match the hover styles for .svg-icon
+    outline: none;
+  }
 
-.habitica-menu-dropdown.open {
+  &.open {
     .habitica-menu-dropdown-toggle .svg-icon {
       color: $white !important;
     }
+  }
 }
 </style>
 <style lang='scss' scoped>
@@ -66,6 +72,9 @@ export default {
       if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
       return this.isDropdownOpen;
     },
+    isPressed () {
+      return this.isOpen ? 'true' : 'false';
+    },
   },
   mounted () {
     document.documentElement.addEventListener('click', this._clickOutListener);