Focus highlight partly hidden by search close button (#11)

* Don't highlight focus with inset box-shadow
It conflicts with close button within search element

* Take into account strokeWidth for focus stroke width

* Use outline color for button in forced color mode

* Update snapshots
Not using inset shadow avoid the line in webkit

Author: fcollonval

packages/components/src/button/button.styles.ts

@@ -198,8 +198,7 @@ const BaseButtonStyles = css`
       :host([href]) .control:${focusVisible} {
         forced-color-adjust: none;
         background: ${SystemColors.ButtonFace};
-        border-color: ${SystemColors.LinkText};
-        box-shadow: 0 0 0 1px ${SystemColors.LinkText} inset;
+        outline-color: ${SystemColors.LinkText};
         color: ${SystemColors.LinkText};
         fill: currentColor;
       }
@@ -263,9 +262,7 @@ const AccentButtonStyles = css`
       }
 
       :host([appearance="accent"][href]) .control:${focusVisible} {
-        border-color: ${SystemColors.LinkText};
-        box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px)
-          ${SystemColors.HighlightText} inset;
+        outline-color: ${SystemColors.HighlightText};
       }
     `
   )
@@ -327,9 +324,7 @@ const ErrorButtonStyles = css`
       }
 
       :host([appearance="error"][href]) .control:${focusVisible} {
-        border-color: ${SystemColors.LinkText};
-        box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px)
-          ${SystemColors.HighlightText} inset;
+        outline-color: ${SystemColors.HighlightText};
       }
     `
   )
@@ -466,8 +461,7 @@ const OutlineButtonStyles = css`
       :host([appearance="outline"][href]) .control:hover,
       :host([appearance="outline"][href]) .control:${focusVisible} {
         forced-color-adjust: none;
-        border-color: ${SystemColors.LinkText};
-        box-shadow: 0 0 0 1px ${SystemColors.LinkText} inset;
+        outline-color: ${SystemColors.LinkText};
       }
     `
   )
@@ -512,8 +506,7 @@ const StealthButtonStyles = css`
       }
 
       :host([appearance="stealth"]:${focusVisible}) .control {
-        background: ${SystemColors.Highlight};
-        box-shadow: 0 0 0 1px ${SystemColors.Highlight};
+        outline-color: ${SystemColors.Highlight};
         color: ${SystemColors.HighlightText};
         fill: currentColor;
       }
@@ -523,7 +516,7 @@ const StealthButtonStyles = css`
       }
 
       :host([appearance="stealth"][href]:hover) .control,
-         :host([appearance="stealth"][href]:${focusVisible}) .control {
+      :host([appearance="stealth"][href]:${focusVisible}) .control {
         background: ${SystemColors.LinkText};
         border-color: ${SystemColors.LinkText};
         color: ${SystemColors.HighlightText};

packages/components/src/search/search.styles.ts

@@ -158,8 +158,8 @@ export const searchStyles: FoundationElementTemplate<
 
     :host(:focus-within:not([disabled])) .root {
       border-color: ${accentFillFocus};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - 1) * 1px) ${accentFillFocus}
-        inset;
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+        ${accentFillFocus};
     }
 
     .clear-button__hidden {
@@ -229,7 +229,8 @@ export const searchStyles: FoundationElementTemplate<
         }
         :host(:focus-within:enabled) .root {
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset;
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+            ${SystemColors.Highlight};
         }
         input::placeholder {
           color: ${SystemColors.GrayText};

packages/components/src/search/search.test.ts-snapshots/search-with-autofocus-chromium-linux.png

@@ -5,7 +5,6 @@
 import {
   accentFillActive,
   accentFillFocus,
-  accentFillHover,
   bodyFont,
   controlCornerRadius,
   designUnit,
@@ -110,8 +109,8 @@ export const selectStyles: FoundationElementTemplate<
 
     :host(:${focusVisible}) {
       border-color: ${accentFillFocus};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - 1) * 1px) ${accentFillFocus}
-        inset;
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+        ${accentFillFocus};
     }
 
     :host([disabled]) {
@@ -250,7 +249,7 @@ export const selectStyles: FoundationElementTemplate<
             :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
             ${SystemColors.HighlightText};
           color: ${SystemColors.HighlightText};
           fill: currentcolor;

packages/components/src/search/search.test.ts-snapshots/search-with-autofocus-firefox-linux.png

@@ -131,8 +131,8 @@ export const textFieldStyles: FoundationElementTemplate<
 
     :host(:focus-within:not([disabled])) .root {
       border-color: ${accentFillFocus};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - 1) * 1px) ${accentFillFocus}
-        inset;
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+        ${accentFillFocus};
     }
 
     :host([appearance='filled']) .root {
@@ -186,7 +186,8 @@ export const textFieldStyles: FoundationElementTemplate<
         }
         :host(:focus-within:enabled) .root {
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset;
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+            ${SystemColors.Highlight};
         }
         input::placeholder {
           color: ${SystemColors.GrayText};