From 89d0257a766fa4fa64bb35fa5050595246f09f90 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 20 Mar 2025 18:02:33 -0500
Subject: [PATCH] Update using keyboard controls to toggle checkboxes and show
 outline when buttons are focused #4140

---
 client/components/ui/Btn.vue      |  4 ++--
 client/components/ui/Checkbox.vue | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/components/ui/Btn.vue b/client/components/ui/Btn.vue
index b4a2df01..8d8fb69d 100644
--- a/client/components/ui/Btn.vue
+++ b/client/components/ui/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link v-if="to" :to="to" class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList" @click.native="click">
+  <nuxt-link v-if="to" :to="to" class="abs-btn rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList" @click.native="click">
     <slot />
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
@@ -7,7 +7,7 @@
       </svg>
     </div>
   </nuxt-link>
-  <button v-else class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
+  <button v-else class="abs-btn rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
     <slot />
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <span v-if="progress">{{ progress }}</span>
diff --git a/client/components/ui/Checkbox.vue b/client/components/ui/Checkbox.vue
index bcc7b4fe..c6d2f3d4 100644
--- a/client/components/ui/Checkbox.vue
+++ b/client/components/ui/Checkbox.vue
@@ -1,7 +1,7 @@
 <template>
-  <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
+  <label tabindex="0" ref="labelRef" class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''" @keydown.enter="enterKeydown">
     <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
-      <input v-model="selected" :disabled="disabled" type="checkbox" :aria-label="ariaLabel" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
+      <input v-model="selected" tabindex="-1" :disabled="disabled" type="checkbox" :aria-label="ariaLabel" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
       <span v-if="partial" class="material-symbols text-base leading-none text-gray-400">remove</span>
       <svg v-else-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
@@ -76,7 +76,17 @@ export default {
       return classes.join(' ')
     }
   },
-  methods: {},
+  methods: {
+    enterKeydown() {
+      // Only toggle checkbox if label is focused (from tabbing)
+      if (document.activeElement === this.$refs.labelRef) {
+        this.toggleCheckbox()
+      }
+    },
+    toggleCheckbox() {
+      if (!this.disabled) this.selected = !this.selected
+    }
+  },
   mounted() {}
 }
 </script>