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