From 073f8aa28f78976bbbd20ad21bc2228526a2e3fc Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Thu, 30 Jun 2022 09:35:40 +0000
Subject: [PATCH 1/3] Selected tab doesn't need to be a tag

---
 src/TabNav.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 6e1ec7f964e..edcc02d459d 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -32,7 +32,9 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   const customContainerRef = useRef<HTMLElement>(null)
   const customStrategy = React.useCallback(() => {
     if (customContainerRef.current) {
-      const tabs = Array.from(customContainerRef.current.querySelectorAll<HTMLElement>('a[aria-selected=true]'))
+      const tabs = Array.from(
+        customContainerRef.current.querySelectorAll<HTMLElement>('[role=tab][aria-selected=true]')
+      )
       return tabs[0]
     }
   }, [customContainerRef])
@@ -60,7 +62,8 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
   role: 'tab',
-  'aria-selected': !!props.selected
+  'aria-selected': !!props.selected,
+  tabIndex: -1
 }))<StyledTabNavLinkProps>`
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};

From b79e55a064f9d7a45ea55c85e46cc7f7c7f62822 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Thu, 30 Jun 2022 09:49:24 +0000
Subject: [PATCH 2/3] Updates tests for new code and updates snapshot

---
 src/__tests__/TabNav.test.tsx                    | 2 +-
 src/__tests__/__snapshots__/TabNav.test.tsx.snap | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/TabNav.test.tsx b/src/__tests__/TabNav.test.tsx
index 09cc2ea06d0..b51e7e7b8a6 100644
--- a/src/__tests__/TabNav.test.tsx
+++ b/src/__tests__/TabNav.test.tsx
@@ -13,7 +13,7 @@ describe('TabNav', () => {
   const tabNavMarkup = (
     <Box>
       <TabNav>
-        <TabNav.Link id="first" href="#">
+        <TabNav.Link id="first" href="#" as="div">
           First
         </TabNav.Link>
         <TabNav.Link id="middle" href="#" selected>
diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
index 52d5e00853b..117b0f21e9c 100644
--- a/src/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   aria-selected={false}
   className="c0 TabNav-item"
   role="tab"
+  tabIndex={-1}
 />
 `;
 

From 700c6dae956e6b62cda702c7a460e9887b8325d5 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Thu, 30 Jun 2022 10:01:17 +0000
Subject: [PATCH 3/3] Add changeset

---
 .changeset/thick-pets-shop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-pets-shop.md

diff --git a/.changeset/thick-pets-shop.md b/.changeset/thick-pets-shop.md
new file mode 100644
index 00000000000..c1093480123
--- /dev/null
+++ b/.changeset/thick-pets-shop.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes issue when tabs are not links