fix(top-nav): focus loupe on :focus-visible only

adobe · Feb 21, 2024 · 50d6870 · 50d6870
1 parent 9819c49
commit 50d6870
Showing 1 changed file with 64 additions and 18 deletions.
diff --git a/packages/top-nav/src/top-nav-item.css b/packages/top-nav/src/top-nav-item.css
@@ -14,32 +14,84 @@ a {
     color: inherit;
 }
 
-a:focus {
+a:focus,
+a:focus-visible {
     outline: none;
 }
 
-:host(:focus-within) {
+:host a:before {
+    block-size: calc(
+        100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))
+    );
+    border: var(
+            --mod-tabs-focus-indicator-width,
+            var(--spectrum-tabs-focus-indicator-width)
+        )
+        solid transparent;
+    border-radius: var(
+        --mod-tabs-focus-indicator-border-radius,
+        var(--spectrum-tabs-focus-indicator-border-radius)
+    );
+    box-sizing: border-box;
+    content: '';
+    inline-size: calc(
+        100% +
+            var(
+                --mod-tabs-focus-indicator-gap,
+                var(--spectrum-tabs-focus-indicator-gap)
+            ) * 2
+    );
+    inset-block-start: calc(
+        var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2
+    );
+    inset-inline-end: calc(
+        var(
+                --mod-tabs-focus-indicator-gap,
+                var(--spectrum-tabs-focus-indicator-gap)
+            ) * -1
+    );
+    inset-inline-start: calc(
+        var(
+                --mod-tabs-focus-indicator-gap,
+                var(--spectrum-tabs-focus-indicator-gap)
+            ) * -1
+    );
+    pointer-events: none;
+    position: absolute;
+}
+
+:host a.focus-visible {
+    color: var(
+        --highcontrast-tabs-color-key-focus,
+        var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))
+    );
+}
+
+:host a:focus-visible {
     color: var(
-        --mod-tabs-color-key-focus,
-        var(--spectrum-tabs-color-key-focus)
-    ); /* .spectrum-Tabs-item.focus-ring */
+        --highcontrast-tabs-color-key-focus,
+        var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))
+    );
 }
 
-:host(:focus-within):before {
+:host a.focus-visible:before {
     border-color: var(
         --highcontrast-tabs-focus-indicator-color,
         var(
             --mod-tabs-focus-indicator-color,
             var(--spectrum-tabs-focus-indicator-color)
         )
-    ); /* .spectrum-Tabs-item.focus-ring:before */
+    );
 }
 
-:host(:focus-within) ::slotted([slot='icon']) {
-    color: var(
-        --mod-tabs-color-key-focus,
-        var(--spectrum-tabs-color-key-focus)
-    ); /* .spectrum-Tabs-item.focus-ring .spectrum-Icon */
+:host a:focus-visible:before {
+    border-color: var(
+        --highcontrast-tabs-focus-indicator-color,
+        var(
+            --mod-tabs-focus-indicator-color,
+            var(--spectrum-tabs-focus-indicator-color)
+        )
+    );
 }
 
 #item-label {
@@ -57,9 +109,3 @@ a:focus {
 slot {
     pointer-events: none;
 }
-
-@media (forced-colors: active) {
-    :host {
-        --highcontrast-tabs-focus-indicator-color: canvastext;
-    }
-}