Refactor ItCheckbox

client/src/components/learningPath/LearningSequence.vue

@@ -126,9 +126,9 @@ const learningSequenceBorderClass = computed(() => {
             </div>
             <ItCheckbox
               v-else
-              :model-value="learningContent.completion_status === 'success'"
-              :on-toggle="() => toggleCompleted(learningContent)"
+              :checked="learningContent.completion_status === 'success'"
               :data-cy="`${learningContent.slug}-checkbox`"
+              @toggle="toggleCompleted(learningContent)"
             />
             <div class="flex-auto pt-1 sm:pt-0">
               <span class="flex gap-4 items-center xl:h-10">

client/src/components/ui/ItCheckbox.vue

@@ -1,19 +1,30 @@
 <script setup lang="ts">
+import log from "loglevel";
 interface Props {
-  modelValue?: boolean;
+  checked?: boolean;
   disabled?: boolean;
-  onToggle?: () => void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
+  checked: false,
   disabled: false,
-  onToggle: () => {
-    // do nothing
-  },
 });
 
-defineEmits(["update:modelValue"]);
+const emit = defineEmits(["toggle"]);
+const toggle = () => {
+  emit("toggle");
+};
+const keydown = (e: KeyboardEvent) => {
+  log.debug("keydown", e.type, e.key);
+  if (e.key === " " && !props.disabled) {
+    e.preventDefault();
+    toggle();
+  }
+};
+const input = (e: Event) => {
+  log.debug("input", e.type, e.target.checked, e.target.value);
+  emit("toggle");
+};
 </script>
 
 <template>
@@ -23,17 +34,27 @@ defineEmits(["update:modelValue"]);
       'cursor-not-allowed': disabled,
     }"
     class="w-8 h-8 cursor-pointer"
-    @click="$emit('update:modelValue', !modelValue)"
   >
-    <button
-      v-if="modelValue"
-      class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-checked.svg')] hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')] disabled:opacity-50 cy-checkbox cy-checkbox-checked"
-      @click.stop="props.onToggle()"
-    ></button>
-    <button
-      v-else
-      class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-unchecked.svg')] hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')] cy-checkbox cy-checkbox-unchecked"
-      @click.stop="props.onToggle()"
-    ></button>
+    <label
+      class="w-8 h-8 block flex-none bg-contain disabled:opacity-50 cy-checkbox cy-checkbox-checked"
+      :class="
+        checked
+          ? 'bg-[url(\'/static/icons/icon-checkbox-checked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-checked-hover.svg\')]'
+          : 'bg-[url(\'/static/icons/icon-checkbox-unchecked.svg\')] hover:bg-[url(\'/static/icons/icon-checkbox-unchecked-hover.svg\')]'
+      "
+      tabindex="0"
+      @keydown.stop="keydown"
+    >
+      <input
+        ref="checkbox"
+        :checked="checked"
+        :value="checked"
+        :disabled="disabled"
+        class="sr-only"
+        type="checkbox"
+        @keydown="keydown"
+        @input="input"
+      />
+    </label>
   </div>
 </template>

client/src/pages/StyleGuidePage.vue

@@ -361,7 +361,11 @@ function log(data: any) {
 
     <h2 class="mt-8 mb-8">Checkbox</h2>
 
-    <ItCheckbox v-model="state.checkboxValue" :disabled="false" class="">
+    <ItCheckbox
+      :checked="state.checkboxValue"
+      :disabled="false"
+      @toggle="state.checkboxValue = !state.checkboxValue"
+    >
       Label
     </ItCheckbox>