Enforce correct semantics for TabNav (#2125)

* Swaps nav and div and adds semantically correct roles

* Fix tests, add body div and move sx

* Adds changeset

* Fixing TabNavProps export

Co-authored-by: Siddharth Kshetrapal <[email protected]>

Author: owenniblock

.changeset/poor-wombats-lick.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds roles of tablist and tab to the TabNav component, required rearranging the HTML elements to be semantically correct

src/TabNav.tsx

@@ -11,23 +11,28 @@ const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
 const TabNavBase = styled.div<SxProp>`
-  margin-top: 0;
-  border-bottom: 1px solid ${get('colors.border.default')};
   ${sx}
 `
 
-const TabNavBody = styled.nav`
+const TabNavTabList = styled.div`
   display: flex;
   margin-bottom: -1px;
   overflow: auto;
 `
 
+const TabNavNav = styled.nav`
+  margin-top: 0;
+  border-bottom: 1px solid ${get('colors.border.default')};
+`
+
 export type TabNavProps = ComponentProps<typeof TabNavBase>
 
 function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   return (
     <TabNavBase {...rest}>
-      <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>
+      <TabNavNav aria-label={ariaLabel}>
+        <TabNavTabList role="tablist">{children}</TabNavTabList>
+      </TabNavNav>
     </TabNavBase>
   )
 }
@@ -39,7 +44,8 @@ type StyledTabNavLinkProps = {
 
 const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
+  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
+  role: 'tab'
 }))<StyledTabNavLinkProps>`
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};

src/__tests__/__snapshots__/TabNav.test.tsx.snap

@@ -46,15 +46,11 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 <a
   className="c0 TabNav-item"
+  role="tab"
 />
 `;
 
 exports[`TabNav renders consistently 1`] = `
-.c0 {
-  margin-top: 0;
-  border-bottom: 1px solid #d0d7de;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -64,11 +60,21 @@ exports[`TabNav renders consistently 1`] = `
   overflow: auto;
 }
 
+.c0 {
+  margin-top: 0;
+  border-bottom: 1px solid #d0d7de;
+}
+
 <div
-  className="c0"
+  className=""
 >
   <nav
-    className="c1"
-  />
+    className="c0"
+  >
+    <div
+      className="c1"
+      role="tablist"
+    />
+  </nav>
 </div>
 `;