From 6b5173ecbfcfe596de83996e1ee9a4f982190361 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Mon, 26 Nov 2018 22:34:15 +0000
Subject: [PATCH] Replace button tag with ARIA button role

Add `role`, `aria-pressed`, `tabindex`, and keypress handlers, and
remove the `<button>` tag.

Add `isPressed` computed function. Use this to set the value of
`aria-pressed`.
---
 website/client/components/ui/customMenuDropdown.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index d3edd76625..87c3dbc1f9 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -3,8 +3,8 @@ 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}")
-  button.habitica-menu-dropdown-toggle
+.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}")
     slot(name="dropdown-content")
@@ -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);