Merge pull request #4999 from nextcloud-libraries/fix/checkbox-label-…

…shift-click-FF

src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue

@@ -21,8 +21,11 @@
 -->
 
 <template>
-	<component :is="wrapperElement"
-		:for="!isButtonType ? id : null"
+	<!--
+		label can't be used here because of shift+click firefox bug
+		https://bugzilla.mozilla.org/show_bug.cgi?id=559506
+	-->
+	<span :id="!isButtonType ? `${id}-label` : null"
 		class="checkbox-content"
 		:class="{
 			['checkbox-content-' + type]: true,
@@ -52,7 +55,7 @@
 			<!-- @slot The checkbox/radio label -->
 			<slot />
 		</span>
-	</component>
+	</span>
 </template>
 
 <script>
@@ -166,13 +169,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
 		 *

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -277,6 +277,7 @@ export default {
 		v-on="isButtonType ? listeners : null">
 		<input v-if="!isButtonType"
 			:id="id"
+			:aria-labelledby="!isButtonType && !ariaLabel ? `${id}-label` : null"
 			:aria-label="ariaLabel || undefined"
 			class="checkbox-radio-switch__input"
 			:disabled="disabled"
@@ -293,7 +294,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" />