From 5a9e59f3557d4182b6ce65534b348f2fa8a84b4a Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Fri, 23 Sep 2022 16:03:40 +0000
Subject: [PATCH 1/4] Remove non-tab elements from `TabNav` focus zone

---
 src/TabNav.tsx                | 3 ++-
 src/__tests__/TabNav.test.tsx | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index edcc02d459d..451f9ed0a4d 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -42,7 +42,8 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
     containerRef: customContainerRef,
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
     focusOutBehavior: 'wrap',
-    focusInStrategy: customStrategy
+    focusInStrategy: customStrategy,
+    focusableElementFilter: element => element.getAttribute('role') === 'tab'
   })
   return (
     <TabNavBase {...rest} ref={navRef as React.RefObject<HTMLDivElement>}>
diff --git a/src/__tests__/TabNav.test.tsx b/src/__tests__/TabNav.test.tsx
index dbed266c8e9..d4d91075a14 100644
--- a/src/__tests__/TabNav.test.tsx
+++ b/src/__tests__/TabNav.test.tsx
@@ -17,6 +17,7 @@ describe('TabNav', () => {
         </TabNav.Link>
         <TabNav.Link id="middle" href="#" selected>
           Middle
+          <a href="#">Focuseable Link</a>
         </TabNav.Link>
         <TabNav.Link id="last" href="#">
           Last
@@ -102,12 +103,16 @@ describe('TabNav', () => {
     const user = userEvent.setup()
     const {getByText, getByRole} = HTMLRender(tabNavMarkup)
     const middleTab = getByText('Middle')
+    const link = getByText('Focuseable Link')
     const button = getByRole('button')
 
     await user.click(middleTab)
     expect(middleTab).toHaveFocus()
     await user.tab()
 
+    expect(link).toHaveFocus()
+    await user.tab()
+
     expect(button).toHaveFocus()
   })
 

From 27fe83cf12740f80dccef368c97ffa11d861610d Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Fri, 23 Sep 2022 12:06:09 -0400
Subject: [PATCH 2/4] Create weak-ears-search.md

---
 .changeset/weak-ears-search.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/weak-ears-search.md

diff --git a/.changeset/weak-ears-search.md b/.changeset/weak-ears-search.md
new file mode 100644
index 00000000000..657aa15b065
--- /dev/null
+++ b/.changeset/weak-ears-search.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove non-tab elements from `TabNav` focus zone

From 21c68f99bc2038ac6e4d0451cd15bfaa34e49aa2 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Fri, 23 Sep 2022 16:09:35 +0000
Subject: [PATCH 3/4] Fix lint error in test

---
 src/__tests__/TabNav.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/TabNav.test.tsx b/src/__tests__/TabNav.test.tsx
index d4d91075a14..9421df6aa59 100644
--- a/src/__tests__/TabNav.test.tsx
+++ b/src/__tests__/TabNav.test.tsx
@@ -17,7 +17,7 @@ describe('TabNav', () => {
         </TabNav.Link>
         <TabNav.Link id="middle" href="#" selected>
           Middle
-          <a href="#">Focuseable Link</a>
+          <a href="https://example.com">Focuseable Link</a>
         </TabNav.Link>
         <TabNav.Link id="last" href="#">
           Last

From aa8374e8e0cdd6f223b4c2606c90e8793ba2dbb2 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Fri, 23 Sep 2022 16:11:16 +0000
Subject: [PATCH 4/4] Change from patch to minor

---
 .changeset/weak-ears-search.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/weak-ears-search.md b/.changeset/weak-ears-search.md
index 657aa15b065..870a79d439e 100644
--- a/.changeset/weak-ears-search.md
+++ b/.changeset/weak-ears-search.md
@@ -1,5 +1,5 @@
 ---
-"@primer/react": patch
+"@primer/react": minor
 ---
 
 Remove non-tab elements from `TabNav` focus zone