UnderlineNav2: Add transparent outline for focus ring to support WHCM (…

…#3165) * UnderlineNav2: Add outline for focus ring to support Windows High Contrast Mode * add changeset * snaps
primer · Apr 13, 2023 · d749f49 · d749f49
1 parent 7272924
commit d749f49
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/green-crews-joke.md b/.changeset/green-crews-joke.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add transparent outline for focus to support WHCM
diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
@@ -56,7 +56,7 @@ exports[`UnderlineNav renders consistently 1`] = `
 }
 
 .c4:focus {
-  outline: 0;
+  outline: 2px solid transparent;
 }
 
 .c4:focus {
@@ -68,6 +68,7 @@ exports[`UnderlineNav renders consistently 1`] = `
 }
 
 .c4:focus-visible {
+  outline: 2px solid transparent;
   box-shadow: inset 0 0 0 2px #0969da;
 }
 

diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts
@@ -94,7 +94,7 @@ export const getLinkStyles = (
     },
   },
   '&:focus': {
-    outline: 0,
+    outline: '2px solid transparent',
     '&': {
       boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`,
     },
@@ -104,6 +104,7 @@ export const getLinkStyles = (
     },
   },
   '&:focus-visible': {
+    outline: '2px solid transparent',
     boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`,
   },
   // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected