fix: focus styles on search button (#281)

* fix: fixed css rules for focus on search button * chore: removed commented code * fix: use header background color for link outline --------- Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Aug 18, 2023 · d3cddee · d3cddee
1 parent 711efed
commit d3cddee
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/src/theme/_site-variables.scss b/src/theme/_site-variables.scss
@@ -29,16 +29,6 @@ $gdpr-link-color: #004285 !default;
 $gdpr-focus-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
   0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem $gdpr-focus-color !default;
 
-// ACCESSIBILITY - SEARCH BUTTON
-$focus-outline-color-on-primary: #fff !default;
-
-$search-focus-outline-color: $focus-outline-color-on-primary !default;
-
-$focus-outline-shadow-on-primary: 0px 0px 7px 7px
-  $focus-outline-color-on-primary !default;
-
-$search-focus-outline-shadow: $focus-outline-shadow-on-primary !default;
-
 $caption-text: #455b71 !default;
 
 $primary-a0: hsl($primary-h, 62%, 97%) !default;

diff --git a/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss b/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss
@@ -14,10 +14,12 @@
       }
 
       .it-search-wrapper {
-        a.search-link:focus {
-          border: 1px solid $primary !important;
-          box-shadow: $search-focus-outline-shadow !important;
-          outline: $search-focus-outline-color !important;
+        a.search-link {
+          outline: $header-center-bg-color 2px solid !important;
+
+          &:focus {
+            box-shadow: 0 0 0 5px $focus-outline-color !important;
+          }
         }
       }
     }