Swap to the double chevron we use elsewhere, use a link-variant butto…

…n. The click bubbles up to the parent, so the header is fully clickable and the button is tab navigable for accessibility.
dannon · Nov 10, 2023 · 47212d7 · 47212d7
1 parent 23c0090
commit 47212d7
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
@@ -53,7 +53,10 @@ const element = computed(() => {
             :is="element"
             :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '']"
             @click="$emit('click')">
-            <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
+            <b-button v-if="collapsible" variant="link" size="sm">
+                <icon v-if="collapsed" fixed-width icon="angle-double-down" />
+                <icon v-else fixed-width icon="angle-double-up" />
+            </b-button>
             <slot />
         </component>
         <div class="stripe"></div>
@@ -69,8 +72,11 @@ const element = computed(() => {
             collapsible ? 'collapsible' : '',
         ]"
         @click="$emit('click')">
+        <b-button v-if="collapsible" variant="link" size="sm">
+            <icon v-if="collapsed" fixed-width icon="angle-double-down" />
+            <icon v-else fixed-width icon="angle-double-up" />
+        </b-button>
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
-        <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
         <slot />
     </component>
 </template>