From 9a2dbace3078a803070de88f09343d27e1f95dbe Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Tue, 13 Nov 2018 22:26:55 +0000
Subject: [PATCH 1/7] Add aria-label to Gems and Gold icons

Add `aria-label` attributes to the gems and gold icons in the menu.

Make the gems icon a link, with a href set to `#buy-gems`, which is the element
that contains the gems dialog.
---
 website/client/components/header/menu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index ed0fe4986e..3bb0e88652 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -62,10 +62,10 @@ 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')")

From 4718e5e5ea774cb836e0cb700531307126cb5c68 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Fri, 23 Nov 2018 20:38:06 +0000
Subject: [PATCH 2/7] Improve a11y for the sync links

Add `role="link"` so it shows up as a link in VoiceOver.

Add `tabindex="0" so it can receive keyboard focus, and a keyup handler
for the enter key so it will respond to `<Enter>` keypresses.

Add `aria-label="$t('sync')"` to add text for non-visual users.

Add aria-label to mobile sync icon link.
---
 website/client/components/header/menu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index 3bb0e88652..4c861709a2 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -9,7 +9,7 @@ div
       .svg-icon.gryphon.d-xs-block.d-xl-none
     b-nav-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
@@ -68,7 +68,7 @@ div
           .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

From 5753d3e648a44e43cb29abf3f924cc7a21bbf09b Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Fri, 23 Nov 2018 22:20:37 +0000
Subject: [PATCH 3/7] Improve a11y for the dropdown menu

Add role="button" to make the component report itself as a button.

Add tabindex so the menu toggle can receive keyboard focus.

Add keydown handlers for `<Enter>` and `<Space>` so the dropdown menu
toggle responds to keyboard input.

Set the aria-pressed attribute to true if the menu is open, or false if
it is closed.
---
 website/client/components/ui/customMenuDropdown.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index ddbf549e59..669f2a3c92 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/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}")
@@ -66,6 +66,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);

From cf847cd1d86ea5f151b190fe5ca60f653c468ee4 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Fri, 23 Nov 2018 22:18:02 +0000
Subject: [PATCH 4/7] Add aria-label to notifaction and user menus

Add aria-label to give a text equivalent for non-visual users.
---
 website/client/components/header/notificationsDropdown.vue | 2 +-
 website/client/components/header/userDropdown.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/client/components/header/notificationsDropdown.vue b/website/client/components/header/notificationsDropdown.vue
index 3132f9e9b9..c32c31bb9b 100644
--- a/website/client/components/header/notificationsDropdown.vue
+++ b/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",
diff --git a/website/client/components/header/userDropdown.vue b/website/client/components/header/userDropdown.vue
index bcbfcfd077..c6985f16d1 100644
--- a/website/client/components/header/userDropdown.vue
+++ b/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")

From 5a30b0cf1f34b278398c7b5e069abcced3636689 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Fri, 23 Nov 2018 22:41:17 +0000
Subject: [PATCH 5/7] Add aria-label to Habitica logo

---
 website/client/components/header/menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index 4c861709a2..7bda584a05 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -4,7 +4,7 @@ div
   creator-intro
   profile
   b-navbar.topbar.navbar-inverse.static-top.navbar-expand-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-nav-toggle(target='menu_collapse').menu-toggle

From 08c6e8298c47d803121349787803c246c0ae433c Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Sat, 24 Nov 2018 17:12:12 +0000
Subject: [PATCH 6/7] Fix linting errors

Remove parentheses and add trailing comma.
---
 website/client/components/ui/customMenuDropdown.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index 669f2a3c92..87c3dbc1f9 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -67,8 +67,8 @@ export default {
       return this.isDropdownOpen;
     },
     isPressed () {
-      return (this.isOpen ? 'true' : 'false');
-    }
+      return this.isOpen ? 'true' : 'false';
+    },
   },
   mounted () {
     document.documentElement.addEventListener('click', this._clickOutListener);

From 6fba71ea2c613381645d896220131dc3c7fb32a4 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Thu, 28 Mar 2019 20:38:17 +0000
Subject: [PATCH 7/7] Add :focus styles to match :hover styles

Add :focus styles to the .habitica-menu-dropdown.
These match the existing :hover styles.
---
 website/client/components/header/menu.vue           |  1 +
 website/client/components/ui/customMenuDropdown.vue | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index cf519a7ee2..d89011ca15 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -290,6 +290,7 @@ div
       margin-right: 24px;
     }
 
+    &:focus /deep/ .top-menu-icon.svg-icon,
     &:hover /deep/ .top-menu-icon.svg-icon {
       color: $white;
     }
diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index 87c3dbc1f9..2671c3ecca 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -12,10 +12,16 @@ 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 {
-  .habitica-menu-dropdown-toggle .svg-icon {
-    color: $white !important;
+  &.open {
+    .habitica-menu-dropdown-toggle .svg-icon {
+      color: $white !important;
+    }
   }
 }
 </style>