From 9f58657855d266d0ac535b4a29e99b2b58c359a1 Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Mon, 13 Nov 2023 19:07:29 +0100
Subject: [PATCH] Make Checkbox keyboard-accessible

---
 client/src/components/input/CheckBox.vue | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/client/src/components/input/CheckBox.vue b/client/src/components/input/CheckBox.vue
index 8738759..7acf78a 100644
--- a/client/src/components/input/CheckBox.vue
+++ b/client/src/components/input/CheckBox.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  modelValue: boolean
-}>(), {
-  modelValue: false,
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void,
-}>();
+const props = withDefaults(defineProps<{ modelValue: boolean}>(), { modelValue: false });
+const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void}>();
 
 let modelValue = $ref(false);
 watch(() => props.modelValue, (val) => { if (val !== modelValue) modelValue = val; });
@@ -15,14 +8,12 @@ watch($$(modelValue), (val) => emit('update:modelValue', val));
 </script>
 
 <template>
-  <div @click="() => modelValue = !modelValue">
+  <div @click="() => modelValue = !modelValue" @keypress="() => modelValue = !modelValue" tabindex="0">
     <i-material-symbols-check-box-outline v-if="modelValue"/>
     <i-material-symbols-check-box-outline-blank v-else/>
   </div>
-</template>
+</template>  
 
 <style scoped>
-div {
-  cursor: pointer;
-}
+div { cursor: pointer; }
 </style>
\ No newline at end of file