From ac92de477f6d7a5527f32dd55d3082318c800d7d Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Thu, 30 Jun 2022 13:43:25 +0100
Subject: [PATCH] Selected tab doesn't need to be <a> tag (#2158)

* Selected tab doesn't need to be a tag

* Updates tests for new code and updates snapshot
---
 .changeset/thick-pets-shop.md                    | 5 +++++
 src/TabNav.tsx                                   | 7 +++++--
 src/__tests__/TabNav.test.tsx                    | 2 +-
 src/__tests__/__snapshots__/TabNav.test.tsx.snap | 1 +
 4 files changed, 12 insertions(+), 3 deletions(-)
 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
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')};
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}
 />
 `;