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(null) const customStrategy = React.useCallback(() => { if (customContainerRef.current) { - const tabs = Array.from(customContainerRef.current.querySelectorAll('a[aria-selected=true]')) + const tabs = Array.from( + customContainerRef.current.querySelectorAll('[role=tab][aria-selected=true]') + ) return tabs[0] } }, [customContainerRef]) @@ -60,7 +62,8 @@ const TabNavLink = styled.a.attrs(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 }))` 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 = ( - + First 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} /> `;