From 92073c2ecfbb8d77c21ee017ff09bcdbe2d69dcf Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Tue, 14 Jun 2022 18:00:55 +0000
Subject: [PATCH 1/4] Swaps nav and div and adds semantically correct roles

---
 src/TabNav.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index dc7ff810571..7596e9050eb 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -10,25 +10,27 @@ import getGlobalFocusStyles from './_getGlobalFocusStyles'
 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<SxProp>`
   display: flex;
   margin-bottom: -1px;
   overflow: auto;
 `
 
-export type TabNavProps = ComponentProps<typeof TabNavBase>
+const TabNavBody = styled.nav`
+  margin-top: 0;
+  border-bottom: 1px solid ${get('colors.border.default')};
+  ${sx}
+`
+
+export type TabNavProps = ComponentProps<typeof TabNavTabList>
 
 function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   return (
-    <TabNavBase {...rest}>
-      <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>
-    </TabNavBase>
+    <TabNavBody aria-label={ariaLabel}>
+      <TabNavTabList role="tablist" {...rest}>
+        {children}
+      </TabNavTabList>
+    </TabNavBody>
   )
 }
 
@@ -39,7 +41,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')};

From 0c9ebfb787f36ee0f9eb8002d03f23a95938e8a1 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Wed, 15 Jun 2022 10:49:20 +0000
Subject: [PATCH 2/4] Fix tests, add body div and move sx

---
 src/TabNav.tsx                                | 17 ++++++++------
 .../__snapshots__/TabNav.test.tsx.snap        | 22 ++++++++++++-------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 7596e9050eb..98b171cfd34 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -10,27 +10,30 @@ import getGlobalFocusStyles from './_getGlobalFocusStyles'
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
+const TabNavBase = styled.div<SxProp>`
+  ${sx}
+`
+
 const TabNavTabList = styled.div<SxProp>`
   display: flex;
   margin-bottom: -1px;
   overflow: auto;
 `
 
-const TabNavBody = styled.nav`
+const TabNavNav = styled.nav`
   margin-top: 0;
   border-bottom: 1px solid ${get('colors.border.default')};
-  ${sx}
 `
 
 export type TabNavProps = ComponentProps<typeof TabNavTabList>
 
 function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   return (
-    <TabNavBody aria-label={ariaLabel}>
-      <TabNavTabList role="tablist" {...rest}>
-        {children}
-      </TabNavTabList>
-    </TabNavBody>
+    <TabNavBase {...rest}>
+      <TabNavNav aria-label={ariaLabel}>
+        <TabNavTabList role="tablist">{children}</TabNavTabList>
+      </TabNavNav>
+    </TabNavBase>
   )
 }
 
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>
 `;

From 75636d82067cdb27d9260d2e33d381e6a2cc2178 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Wed, 15 Jun 2022 11:01:49 +0000
Subject: [PATCH 3/4] Adds changeset

---
 .changeset/poor-wombats-lick.md | 5 +++++
 1 file changed, 5 insertions(+)
 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

From 6dbaf55730388e29c7c0ad443f0b869d30fe4db1 Mon Sep 17 00:00:00 2001
From: Owen Niblock <owenniblock@github.com>
Date: Wed, 15 Jun 2022 11:08:08 +0000
Subject: [PATCH 4/4] Fixing TabNavProps export

---
 src/TabNav.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 98b171cfd34..fc6cd810a83 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -14,7 +14,7 @@ const TabNavBase = styled.div<SxProp>`
   ${sx}
 `
 
-const TabNavTabList = styled.div<SxProp>`
+const TabNavTabList = styled.div`
   display: flex;
   margin-bottom: -1px;
   overflow: auto;
@@ -25,7 +25,7 @@ const TabNavNav = styled.nav`
   border-bottom: 1px solid ${get('colors.border.default')};
 `
 
-export type TabNavProps = ComponentProps<typeof TabNavTabList>
+export type TabNavProps = ComponentProps<typeof TabNavBase>
 
 function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   return (