mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-01 21:15:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Update using keyboard controls to toggle checkboxes and show outline when buttons are focused #4140
Some checks are pending
CodeQL / Analyze (push) Waiting to run
Details
Build and Push Docker Image / build (push) Waiting to run
Details
Integration Test / build and test (push) Waiting to run
Details
Run Unit Tests / Run Unit Tests (push) Waiting to run
Details

Browse source
This commit is contained in:
advplyr 2025-03-20 18:02:33 -05:00
parent 92bb3527de
commit 89d0257a76
2 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/components/ui/Checkbox.vue
View file

@ -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>