fix: changed double focus to outline and box-shadow (#785)

RedTurtle · Oct 9, 2024 · 46fdcb5 · 46fdcb5
1 parent d392496
commit 46fdcb5
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 14 deletions.
diff --git a/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss b/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss
@@ -15,8 +15,11 @@
         min-width: 150px;
 
         &:focus-within {
-          border: 2px solid $inner-focus-border !important;
-          box-shadow: 0 0 0 2px $outer-focus-outline !important;
+          outline: 2px solid $outer-focus-outline !important;
+          outline-offset: 2px;
+
+          border: none !important;
+          box-shadow: 0 0 0 2px $inner-focus-shadow !important;
         }
 
         .react-select__control {
@@ -58,8 +61,11 @@
             }
 
             &.DateInput_input__focused {
-              border: 2px solid $inner-focus-border !important;
-              box-shadow: 0 0 0 2px $outer-focus-outline !important;
+              outline: 2px solid $outer-focus-outline !important;
+              outline-offset: 2px;
+
+              border: none !important;
+              box-shadow: 0 0 0 2px $inner-focus-shadow !important;
             }
           }
 

diff --git a/src/theme/ItaliaTheme/Widgets/_reactSelect.scss b/src/theme/ItaliaTheme/Widgets/_reactSelect.scss
@@ -20,7 +20,10 @@
 .react-select__control,
 .react-select__control:hover {
   &.react-select__control--is-focused {
-    border: 2px solid $inner-focus-border !important;
-    box-shadow: 0 0 0 2px $outer-focus-outline !important;
+    outline: 2px solid $outer-focus-outline !important;
+    outline-offset: 2px;
+
+    border: none !important;
+    box-shadow: 0 0 0 2px $inner-focus-shadow !important;
   }
 }
diff --git a/src/theme/ItaliaTheme/_common.scss b/src/theme/ItaliaTheme/_common.scss
@@ -7,9 +7,11 @@
   button.btn,
   button.rounded-right {
     &:focus {
-      border: 2px solid $inner-focus-border !important;
-      box-shadow: 0 0 0 2px $outer-focus-outline !important;
-      outline: none;
+      outline: 2px solid $outer-focus-outline !important;
+      outline-offset: 2px;
+
+      border: none !important;
+      box-shadow: 0 0 0 2px $inner-focus-shadow !important;
     }
   }
 

diff --git a/src/theme/_site-variables.scss b/src/theme/_site-variables.scss
@@ -61,4 +61,4 @@ $ribbon-width: calc($spacer * 2);
 
 // accessible focus colors
 $outer-focus-outline: #000 !default;
-$inner-focus-border: #fff !default;
+$inner-focus-shadow: #fff !default;
diff --git a/src/theme/bootstrap-override/bootstrap-italia/_focus.scss b/src/theme/bootstrap-override/bootstrap-italia/_focus.scss
@@ -1,7 +1,10 @@
 :focus:not(.focus--mouse),
 %focus {
-  box-shadow: 0 0 0 2px $outer-focus-outline !important;
-  border: 2px solid $inner-focus-border !important;
+  outline: 2px solid $outer-focus-outline !important;
+  outline-offset: 2px;
+
+  border: none !important;
+  box-shadow: 0 0 0 2px $inner-focus-shadow !important;
 }
 
 .skiplinks a:focus:not(.focus--mouse) {

diff --git a/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss b/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss
@@ -23,8 +23,11 @@
           border: $header-center-bg-color 2px solid !important;
 
           &:focus {
-            outline: 2.5px solid $inner-focus-border !important;
-            box-shadow: 0 0 0 5px $outer-focus-outline !important;
+            outline: 2px solid $outer-focus-outline !important;
+            outline-offset: 2px;
+
+            border: none !important;
+            box-shadow: 0 0 0 2px $inner-focus-shadow !important;
           }
         }
       }