Add focus-visible style for NcCheckboxRadioSwitch

Improve accesibility by making focus indicator visible.

Resolves : nextcloud/photos#1671

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -270,17 +270,16 @@ export default {
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
-		<input :id="id"
-			:checked="isChecked"
+		<input :checked="isChecked"
 			:disabled="disabled"
 			:indeterminate="indeterminate"
 			:name="name"
 			:type="inputType"
 			:value="value"
 			class="checkbox-radio-switch__input"
 			@change="onToggle">
-		<label :for="id" class="checkbox-radio-switch__label">
-			<div class="checkbox-radio-switch__icon">
+		<button class="checkbox-radio-switch__button" @click="onToggle">
+			<span class="checkbox-radio-switch__icon">
 				<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant
 						@binding {bool} checked The input checked state
 						@binding {bool} loading The loading state
@@ -293,11 +292,11 @@ export default {
 						v-else-if="!buttonVariant"
 						:size="size" />
 				</slot>
-			</div>
+			</span>
 
 			<!-- @slot The checkbox/radio label -->
-			<span class="checkbox-radio-switch__label-text"><slot /></span>
-		</label>
+			<span class="checkbox-radio-switch__button-text"><slot /></span>
+		</button>
 	</component>
 </template>
 
@@ -583,7 +582,7 @@ export default {
 		height: var(--icon-size);
 	}
 
-	&__label {
+	&__button {
 		display: flex;
 		align-items: center;
 		flex-direction: row;
@@ -608,20 +607,20 @@ export default {
 		height: var(--icon-size);
 	}
 
-	&--disabled &__label {
+	&--disabled &__button {
 		opacity: $opacity_disabled;
 		.checkbox-radio-switch__icon > * {
 			color: var(--color-main-text)
 		}
 	}
 
-	&:not(&--disabled, &--checked):focus-within &__label,
-	&:not(&--disabled, &--checked) &__label:hover {
+	&:not(&--disabled, &--checked):focus-within &__button,
+	&:not(&--disabled, &--checked) &__button:hover {
 		background-color: var(--color-background-hover);
 	}
 
-	&--checked:not(&--disabled):focus-within &__label,
-	&--checked:not(&--disabled) &__label:hover {
+	&--checked:not(&--disabled):focus-within &__button,
+	&--checked:not(&--disabled) &__button:hover {
 		background-color: var(--color-primary-element-light-hover);
 	}
 
@@ -653,7 +652,7 @@ export default {
 	}
 
 	// Text overflow of button style
-	&--button-variant &__label-text {
+	&--button-variant &__button-text {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -671,12 +670,12 @@ export default {
 	}
 
 	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),
-	&--button-variant &__label {
+	&--button-variant &__button {
 		border-radius: $border-radius;
 	}
 
 	/* Special rules for vertical button groups */
-	&--button-variant-v-grouped &__label {
+	&--button-variant-v-grouped &__button {
 		flex-basis: 100%;
 		// vertically grouped buttons should all have the same width
 		max-width: unset;
@@ -694,7 +693,7 @@ export default {
 		// remove borders between elements
 		&:not(:last-of-type) {
 			border-bottom: 0!important;
-			.checkbox-radio-switch__label {
+			.checkbox-radio-switch__button {
 				margin-bottom: 2px;
 			}
 		}
@@ -717,18 +716,18 @@ export default {
 		// remove borders between elements
 		&:not(:last-of-type) {
 			border-right: 0!important;
-			.checkbox-radio-switch__label {
+			.checkbox-radio-switch__button {
 				margin-right: 2px;
 			}
 		}
 		&:not(:first-of-type) {
 			border-left: 0!important;
 		}
 	}
-	&--button-variant-h-grouped &__label-text {
+	&--button-variant-h-grouped &__button-text {
 		text-align: center;
 	}
-	&--button-variant-h-grouped &__label {
+	&--button-variant-h-grouped &__button {
 		flex-direction: column;
 		justify-content: center;
 		width: 100%;