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

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>

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,
       },
     };

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');
   });