A11y: improve input and custom control focus indicator

epfl-si · May 30, 2024 · 1a5de18 · 1a5de18
1 parent d85a466
commit 1a5de18
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/assets/components/atoms/checkbox/checkbox.scss b/assets/components/atoms/checkbox/checkbox.scss
@@ -28,3 +28,13 @@
   align-items: center;
   margin-right: 1rem;
 }
+
+.custom-control-input:focus ~ .custom-control-label:before {
+  box-shadow: none;
+  outline: 2px solid $gray-600;
+  outline-offset: 1px;
+}
+
+.custom-control-input:checked:focus ~ .custom-control-label:before {
+  outline-color: $red-dark;
+}
diff --git a/assets/components/atoms/input/input.scss b/assets/components/atoms/input/input.scss
@@ -6,7 +6,6 @@
   transition:
     color 0.3s,
     border-color 0.3s,
-    outline 0.3s,
     box-shadow 0.3s;
 
   &:hover,
@@ -15,9 +14,12 @@
   }
 
   &:focus,
-  &.focus {
+  &.focus,
+  &:focus-visible {
     border-color: $input-focus-border-color !important;
-    box-shadow: $input-focus-box-shadow !important;
+    box-shadow: none !important;
+    outline: 2px solid $gray-600;
+    outline-offset: 2px;
   }
 
   &.is-invalid {