From d749f495e0129de41dc33136b4d5f1145b17a275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan?= <broccolinisoup@github.com>
Date: Fri, 14 Apr 2023 09:08:26 +1000
Subject: [PATCH] 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
---
 .changeset/green-crews-joke.md                             | 5 +++++
 src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap | 3 ++-
 src/UnderlineNav2/styles.ts                                | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/green-crews-joke.md

diff --git a/.changeset/green-crews-joke.md b/.changeset/green-crews-joke.md
new file mode 100644
index 00000000000..cf5218a71f6
--- /dev/null
+++ 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
index 780d5a96d38..31095a86b83 100644
--- 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
index ea05c6c0337..d3167a5f8e9 100644
--- 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