feat(ui): Use `nav` For settings navigations (#40576)

static/app/views/settings/components/settingsLayout.spec.jsx

@@ -31,6 +31,10 @@ describe('SettingsLayout', function () {
     });
   });
 
+  function getTestnav() {
+    return screen.queryByRole('navigation', {name: 'Test Nav'});
+  }
+
   it('renders', function () {
     const {container} = render(
       <BreadcrumbContextProvider>
@@ -48,12 +52,12 @@ describe('SettingsLayout', function () {
           router={TestStubs.router()}
           route={{}}
           routes={[]}
-          renderNavigation={() => <nav />}
+          renderNavigation={() => <nav aria-label="Test Nav" />}
         />
       </BreadcrumbContextProvider>
     );
 
-    expect(screen.getByRole('navigation')).toBeInTheDocument();
+    expect(getTestnav()).toBeInTheDocument();
   });
 
   it('can toggle mobile navigation', function () {
@@ -63,14 +67,16 @@ describe('SettingsLayout', function () {
           router={TestStubs.router()}
           route={{}}
           routes={[]}
-          renderNavigation={opts => (opts.isMobileNavVisible ? <nav /> : null)}
+          renderNavigation={opts =>
+            opts.isMobileNavVisible ? <nav aria-label="Test Nav" /> : null
+          }
         />
       </BreadcrumbContextProvider>
     );
 
-    expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    expect(getTestnav()).not.toBeInTheDocument();
 
     userEvent.click(screen.getByRole('button', {name: 'Open the menu'}));
-    expect(screen.queryByRole('navigation')).toBeInTheDocument();
+    expect(getTestnav()).toBeInTheDocument();
   });
 });

static/app/views/settings/components/settingsLayout.tsx

@@ -77,7 +77,11 @@ function SettingsLayout(props: Props) {
 
       <MaxWidthContainer>
         {shouldRenderNavigation && (
-          <SidebarWrapper isVisible={isMobileNavVisible} offsetTop={navOffsetTop}>
+          <SidebarWrapper
+            aria-label={t('Settings Navigation')}
+            isVisible={isMobileNavVisible}
+            offsetTop={navOffsetTop}
+          >
             {renderNavigation({isMobileNavVisible})}
           </SidebarWrapper>
         )}
@@ -129,7 +133,7 @@ const MaxWidthContainer = styled('div')`
   flex: 1;
 `;
 
-const SidebarWrapper = styled('div')<{isVisible: boolean; offsetTop: number}>`
+const SidebarWrapper = styled('nav')<{isVisible: boolean; offsetTop: number}>`
   flex-shrink: 0;
   width: ${p => p.theme.settings.sidebarWidth};
   background: ${p => p.theme.background};