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>
nextcloud-libraries · Jun 2, 2023 · d82a8da · d82a8da
1 parent 7344337
commit d82a8da
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -625,6 +625,10 @@ export default {
 		background-color: var(--color-primary-element-light-hover);
 	}
 
+	&:not(&--disabled) &__label:focus-visible {
+		outline: 2px solid var(--color-main-text) !important;
+	}
+
 	// Switch specific rules
 	&-switch:not(&--checked) &__icon > * {
 		color: var(--color-text-maxcontrast);