From 6ff401964df3bef70fbfd98efe2da2bcfc572ba7 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate.moore@sentry.io>
Date: Fri, 20 Sep 2024 16:59:51 -0500
Subject: [PATCH] fix(nav): improve accessibility

---
 static/app/components/nav/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/static/app/components/nav/index.tsx b/static/app/components/nav/index.tsx
index c2b248f30b4fec..32abbeeea5e30f 100644
--- a/static/app/components/nav/index.tsx
+++ b/static/app/components/nav/index.tsx
@@ -22,32 +22,32 @@ function Nav() {
 
   return (
     <NavContainer>
-      <Sidebar>
+      <Sidebar role="navigation" aria-label="Primary Navigation">
         <Sidebar.Header>
           <OrganizationAvatar organization={organization} size={32} />
         </Sidebar.Header>
         <Sidebar.Body>
           {nav.primary.body.map(item => (
-            <Sidebar.Item key={item.to} {...item} />
+            <Sidebar.Item key={item.label} {...item} />
           ))}
         </Sidebar.Body>
         <Sidebar.Footer>
           {nav.primary.footer.map(item => (
-            <Sidebar.Item key={item.to} {...item} />
+            <Sidebar.Item key={item.label} {...item} />
           ))}
         </Sidebar.Footer>
       </Sidebar>
       {nav.secondary.body.length > 0 && (
-        <Submenu>
+        <Submenu role="navigation" aria-label="Secondary Navigation">
           <Submenu.Body>
             {nav.secondary.body.map(item => (
-              <Submenu.Item key={item.to} {...item} />
+              <Submenu.Item key={item.label} {...item} />
             ))}
           </Submenu.Body>
           {nav.secondary.footer.length > 0 && (
             <Submenu.Footer>
               {nav.secondary.footer.map(item => (
-                <Submenu.Item key={item.to} {...item} />
+                <Submenu.Item key={item.label} {...item} />
               ))}
             </Submenu.Footer>
           )}
@@ -57,7 +57,7 @@ function Nav() {
   );
 }
 
-const NavContainer = styled('nav')`
+const NavContainer = styled('div')`
   display: flex;
   position: sticky;
   top: 0;