From 46fdcb50f89f15f23bdb0278e482762594e78f9f Mon Sep 17 00:00:00 2001
From: sabrina-bongiovanni
 <116291154+sabrina-bongiovanni@users.noreply.github.com>
Date: Wed, 9 Oct 2024 11:46:39 +0200
Subject: [PATCH] fix: changed double focus to outline and box-shadow (#785)

---
 .../Blocks/common/_searchBlockFilters.scss         | 14 ++++++++++----
 src/theme/ItaliaTheme/Widgets/_reactSelect.scss    |  7 +++++--
 src/theme/ItaliaTheme/_common.scss                 |  8 +++++---
 src/theme/_site-variables.scss                     |  2 +-
 .../bootstrap-italia/_focus.scss                   |  7 +++++--
 .../bootstrap-italia/_headercenter.scss            |  7 +++++--
 6 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss b/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss
index 9eb187733..b7a26818f 100644
--- 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
index 9c244d411..fd17e08bc 100644
--- 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
index b77a103e7..acc77516f 100644
--- 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
index 5b896f3f8..114303084 100644
--- 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
index 59313915b..2a98784bf 100644
--- 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
index f5e446ee0..739451faa 100644
--- 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;
           }
         }
       }