Remove non-tab elements from TabNav focus zone (#2367)

* Remove non-tab elements from `TabNav` focus zone

* Create weak-ears-search.md

* Fix lint error in test

* Change from patch to minor

.changeset/weak-ears-search.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove non-tab elements from `TabNav` focus zone

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

src/__tests__/TabNav.test.tsx

@@ -17,6 +17,7 @@ describe('TabNav', () => {
         </TabNav.Link>
         <TabNav.Link id="middle" href="#" selected>
           Middle
+          <a href="https://example.com">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()
   })