From 78dc8134b1d38c6826766f2f85ae943e8b1a8088 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Tue, 21 Jun 2022 11:34:39 +0100
Subject: [PATCH] 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 <siddharthkp@github.com>
---
 .changeset/poor-wombats-lick.md               |  5 +++++
 src/TabNav.tsx                                | 16 +++++++++-----
 .../__snapshots__/TabNav.test.tsx.snap        | 22 ++++++++++++-------
 3 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/poor-wombats-lick.md

diff --git a/.changeset/poor-wombats-lick.md b/.changeset/poor-wombats-lick.md
new file mode 100644
index 00000000000..d244a2d551b
--- /dev/null
+++ b/.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
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index dc7ff810571..fc6cd810a83 100644
--- a/src/TabNav.tsx
+++ b/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')};
diff --git a/src/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/__tests__/__snapshots__/TabNav.test.tsx.snap
index b912c785a1a..edcc428b949 100644
--- a/src/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/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>
 `;