From e39d3e52e2d25505cd0f8df54c4e6a7da6ff197e Mon Sep 17 00:00:00 2001
From: J Sanderson <julia@parentscheme.com>
Date: Mon, 26 Oct 2020 14:41:40 +0000
Subject: [PATCH] Fix keyboard inaccessible accordion in guild/party page fixes
 #12653 (#12656)

* fix: replace clickable div with button

improve accessibility for keyboard users

* refactor: extract sidebar button to own component

* refactor: button to div

* fix: lint, update sidebarSection test
---
 .../client/src/components/sidebarButton.vue   | 60 +++++++++++++++++++
 .../client/src/components/sidebarSection.vue  | 30 ++--------
 .../unit/components/sidebarSection.spec.js    |  4 +-
 3 files changed, 68 insertions(+), 26 deletions(-)
 create mode 100644 website/client/src/components/sidebarButton.vue

diff --git a/website/client/src/components/sidebarButton.vue b/website/client/src/components/sidebarButton.vue
new file mode 100644
index 0000000000..52ac5a22c7
--- /dev/null
+++ b/website/client/src/components/sidebarButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="toggle ml-auto"
+    role="button"
+    :aria-expanded="visible"
+    tabindex="0"
+    @keyup.enter="$emit('click')"
+    @click="$emit('click')"
+  >
+    <span
+      v-if="visible"
+      class="svg-icon"
+      v-html="icons.upIcon"
+    ></span>
+    <span
+      v-else
+      class="svg-icon"
+      v-html="icons.downIcon"
+    ></span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+  .toggle {
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    &:focus {
+      outline: none;
+      border: $purple-400 solid 1px;
+    }
+  }
+
+  .svg-icon {
+    width: 16px;
+  }
+</style>
+
+<script>
+import upIcon from '@/assets/svg/up.svg';
+import downIcon from '@/assets/svg/down.svg';
+
+export default {
+  props: {
+    visible: {
+      required: true,
+    },
+  },
+  data () {
+    return {
+      icons: {
+        upIcon,
+        downIcon,
+      },
+    };
+  },
+};
+</script>
diff --git a/website/client/src/components/sidebarSection.vue b/website/client/src/components/sidebarSection.vue
index 04515aa50c..6a16d127e1 100644
--- a/website/client/src/components/sidebarSection.vue
+++ b/website/client/src/components/sidebarSection.vue
@@ -22,21 +22,10 @@
           :target="tooltipId"
         />
       </div>
-      <div
-        class="section-toggle ml-auto"
+      <SidebarButton
+        :visible="visible"
         @click="toggle"
-      >
-        <div
-          v-if="visible"
-          class="svg-icon"
-          v-html="icons.upIcon"
-        ></div>
-        <div
-          v-else
-          class="svg-icon"
-          v-html="icons.downIcon"
-        ></div>
-      </div>
+      />
     </div>
     <div
       v-show="visible"
@@ -64,27 +53,22 @@
     margin-top: 1em;
   }
 
-  .section-toggle {
-    cursor: pointer;
-  }
-
   .section-info {
     cursor: help;
   }
 
-  .section-info .svg-icon,
-  .section-toggle .svg-icon {
+  .section-info .svg-icon {
     width: 16px;
   }
 </style>
 
 <script>
 import { v4 as uuid } from 'uuid';
-import upIcon from '@/assets/svg/up.svg';
-import downIcon from '@/assets/svg/down.svg';
+import SidebarButton from './sidebarButton';
 import informationIcon from '@/assets/svg/information.svg';
 
 export default {
+  components: { SidebarButton },
   props: {
     title: {
       required: true,
@@ -101,8 +85,6 @@ export default {
       tooltipId: uuid(),
       visible: this.show,
       icons: {
-        upIcon,
-        downIcon,
         information: informationIcon,
       },
     };
diff --git a/website/client/tests/unit/components/sidebarSection.spec.js b/website/client/tests/unit/components/sidebarSection.spec.js
index 959da66f9b..72dccc0e95 100644
--- a/website/client/tests/unit/components/sidebarSection.spec.js
+++ b/website/client/tests/unit/components/sidebarSection.spec.js
@@ -32,9 +32,9 @@ describe('Sidebar Section', () => {
 
   it('hides contents', () => {
     expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
-    wrapper.find('.section-toggle').trigger('click');
+    wrapper.find('[role="button"').trigger('click');
     expect(wrapper.find('.section-body').element.style.display).to.eq('none');
-    wrapper.find('.section-toggle').trigger('click');
+    wrapper.find('[role="button"').trigger('click');
     expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
   });