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

Author: broccolinisoup

.changeset/green-crews-joke.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add transparent outline for focus to support WHCM

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;
 }
 

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