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
primer · Jun 30, 2022 · ac92de4 · ac92de4
1 parent c7bbd06
commit ac92de4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/thick-pets-shop.md 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
@@ -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
@@ -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
@@ -48,6 +48,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   aria-selected={false}
   className="c0 TabNav-item"
   role="tab"
+  tabIndex={-1}
 />
 `;