Add focus-visible style for NcCheckboxRadioSwitch

Improve accesibility by making focus indicator visible. Resolves : nextcloud/photos#1671 Signed-off-by: fenn-cs <[email protected]>
nextcloud-libraries · Jun 9, 2023 · 5ef76b3 · 5ef76b3
1 parent 7344337
commit 5ef76b3
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -583,6 +583,10 @@ export default {
 		height: var(--icon-size);
 	}
 
+	&__input:focus-visible + label {
+		outline: 2px solid var(--color-primary-element) !important;
+	}
+
 	&__label {
 		display: flex;
 		align-items: center;