From 21f4212ef28818be0878a7d6be62c9d109cbf013 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 13 Apr 2023 15:42:00 +1000
Subject: [PATCH 1/3] UnderlineNav2: Add outline for focus ring to support
 Windows High Contrast Mode

---
 src/UnderlineNav2/styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts
index ea05c6c0337..b1d0c1a0a8a 100644
--- a/src/UnderlineNav2/styles.ts
+++ b/src/UnderlineNav2/styles.ts
@@ -94,7 +94,7 @@ export const getLinkStyles = (
     },
   },
   '&:focus': {
-    outline: 0,
+    outline: '3px solid transparent',
     '&': {
       boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`,
     },
@@ -104,6 +104,7 @@ export const getLinkStyles = (
     },
   },
   '&:focus-visible': {
+    outline: '3px 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

From 0144e8a83f0b5291799e269e9a7520c9a0f8c6e2 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 13 Apr 2023 16:01:28 +1000
Subject: [PATCH 2/3] add changeset

---
 .changeset/green-crews-joke.md | 5 +++++
 src/UnderlineNav2/styles.ts    | 4 ++--
 2 files changed, 7 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/styles.ts b/src/UnderlineNav2/styles.ts
index b1d0c1a0a8a..d3167a5f8e9 100644
--- a/src/UnderlineNav2/styles.ts
+++ b/src/UnderlineNav2/styles.ts
@@ -94,7 +94,7 @@ export const getLinkStyles = (
     },
   },
   '&:focus': {
-    outline: '3px solid transparent',
+    outline: '2px solid transparent',
     '&': {
       boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`,
     },
@@ -104,7 +104,7 @@ export const getLinkStyles = (
     },
   },
   '&:focus-visible': {
-    outline: '3px solid transparent',
+    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

From f7ca3dda898b641847c159cb8cffac989ffc0f6d Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 13 Apr 2023 16:10:51 +1000
Subject: [PATCH 3/3] snaps

---
 src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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