Focus visibility

* Checkboxes
contao-thememanager · Oct 31, 2024 · c77d167 · c77d167
1 parent e1084c7
commit c77d167
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/public/framework/scss/ctm_base/_vars.scss b/public/framework/scss/ctm_base/_vars.scss
@@ -185,6 +185,11 @@
 
   --cbx-bdr-clr:#{$form-checkbox-radio-border-color};
   --cbx-bdr-clr-hvr:#{$form-checkbox-radio-border-color-hover};
+
+  // A11y
+  --focus-clr: var(--clr-primary);
+  --focus-style: 3px dotted var(--focus-clr);
+  --focus-offset: 2px;
 }
 
 // Typography

diff --git a/public/framework/scss/ctm_components/_form.scss b/public/framework/scss/ctm_components/_form.scss
@@ -348,6 +348,14 @@ $form-checkbox-radio-label-min-height: $form-checkbox-radio-size;
       background-color: $form-checkbox-radio-background-focus;
     }
   }
+
+  &:focus-visible + label {
+
+    &:before {
+      outline: var(--focus-style);
+      outline-offset: var(--focus-offset);
+    }
+  }
 }
 
 // Checkbox radio container