fix(NcCheckboxRadioSwitch): fix shift+click on firefox

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
nextcloud-libraries · Dec 27, 2023 · 218637b · 218637b
1 parent 7d1831a
commit 218637b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 12 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -21,8 +21,7 @@
 -->
 
 <template>
-	<component :is="wrapperElement"
-		:for="!isButtonType ? id : null"
+	<span :id="!isButtonType ? id : null"
 		class="checkbox-content"
 		:class="{
 			['checkbox-content-' + type]: true,
@@ -52,7 +51,7 @@
 			<!-- @slot The checkbox/radio label -->
 			<slot />
 		</span>
-	</component>
+	</span>
 </template>
 
 <script>
@@ -166,13 +165,6 @@ export default {
 			return this.type === TYPE_BUTTON
 		},
 
-		wrapperElement() {
-			if (this.isButtonType) {
-				return 'span'
-			}
-			return 'label'
-		},
-
 		/**
 		 * Returns the proper Material icon depending on the select case
 		 *

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -276,7 +276,7 @@ export default {
 		:type="isButtonType ? 'button' : null"
 		v-on="isButtonType ? listeners : null">
 		<input v-if="!isButtonType"
-			:id="id"
+			:aria-labelledby="!isButtonType ? id : null"
 			:aria-label="ariaLabel || undefined"
 			class="checkbox-radio-switch__input"
 			:disabled="disabled"
@@ -293,7 +293,8 @@ export default {
 			:button-variant="buttonVariant"
 			:is-checked="isChecked"
 			:loading="loading"
-			:size="size">
+			:size="size"
+			@click.native="onToggle">
 			<template #icon>
 				<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant -->
 				<slot name="icon" />