From 9463c7c1e2cea88f5beb8117973e0e47f97df85b Mon Sep 17 00:00:00 2001
From: Aline <aline.keller@gmail.com>
Date: Tue, 28 May 2024 19:32:49 +0200
Subject: [PATCH] A11y: improve input and custom control focus indicator

---
 assets/components/atoms/checkbox/checkbox.scss | 10 ++++++++++
 assets/components/atoms/input/input.scss       |  8 +++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/components/atoms/checkbox/checkbox.scss b/assets/components/atoms/checkbox/checkbox.scss
index 29cd57b60..4d48dbab7 100644
--- 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
index e67b1b914..cc4034d24 100644
--- 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 {