fix: rework Search clear button focus geometry (#22006)

adamalston · web-flow · commit 349ca07d38e2 · 2026-04-14T07:16:00.000Z
diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss
@@ -154,29 +154,8 @@
     inset-block-start: 0;
     inset-inline-end: 0;
 
-    &::before {
-      position: absolute;
-      display: block;
-      background-color: $field;
-      block-size: calc(100% - 2px);
-      content: '';
-      inline-size: 2px;
-      inset-block-start: convert.to-rem(1px);
-      inset-inline-start: 0;
-      transition: background-color $duration-fast-02
-        motion(standard, productive);
-
-      @media screen and (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-
     &:hover {
       border-block-end: 1px solid $border-strong;
-
-      &::before {
-        background-color: $field-hover;
-      }
     }
   }
 
@@ -191,7 +170,10 @@
     }
   }
 
+  // Keep the clear icon above the hover fill overlay.
   .#{$prefix}--search-close svg {
+    position: relative;
+    z-index: 1;
     fill: inherit;
   }
 
@@ -200,19 +182,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-width: 1px 0;
+    border-width: 0 0 1px;
     border-style: solid;
     border-color: transparent;
     block-size: convert.to-rem(40px);
     cursor: pointer;
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     opacity: 1;
-    transition:
-      opacity $duration-fast-02 motion(standard, productive),
-      background-color $duration-fast-02 motion(standard, productive),
-      outline $duration-fast-02 motion(standard, productive),
-      border $duration-fast-02 motion(standard, productive);
     visibility: inherit;
 
     &:hover {
@@ -230,6 +207,22 @@
     }
   }
 
+  // Preserve the field focus outline while the clear button is hovered.
+  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
+    background-color: transparent;
+    border-block-end-color: transparent;
+    outline: none;
+
+    &::after {
+      position: absolute;
+      background-color: $field-hover;
+      content: '';
+      inset-block: $spacing-01;
+      inset-inline: 0 $spacing-01;
+      pointer-events: none;
+    }
+  }
+
   .#{$prefix}--search--disabled .#{$prefix}--search-close,
   .#{$prefix}--search--disabled.#{$prefix}--search--expandable
     .#{$prefix}--search-magnifier {
@@ -250,17 +243,6 @@
     fill: $icon-on-color-disabled;
   }
 
-  .#{$prefix}--search-close:focus,
-  .#{$prefix}--search-close:active {
-    &::before {
-      background-color: $focus;
-    }
-  }
-
-  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
-    @include focus-outline('outline');
-  }
-
   // Small
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,
