Wrap sidebar in a nav element (github#40171)

hectorsector · web-flow · commit 82e81b5cd4d7 · 2023-08-02T17:31:40.000Z
diff --git a/components/sidebar/SidebarNav.tsx b/components/sidebar/SidebarNav.tsx
@@ -23,39 +23,36 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
       className={cx(variant === 'full' ? 'position-sticky d-none border-right d-xxl-block' : '')}
       style={{ width: 326, height: 'calc(100vh - 65px)', top: '65px' }}
     >
-      {variant === 'full' && currentProduct && (
-        <nav
-          className={cx('d-none px-4 pb-3 border-bottom d-xxl-block')}
-          aria-labelledby="allproducts-menu"
-        >
-          <AllProductsLink />
-          {currentProduct && (
-            <div className="mt-3" id="allproducts-menu" aria-label="all products menu">
-              <Link
-                data-testid="sidebar-product-xl"
-                href={currentProduct.href}
-                // Note the `_product-title` is used by the popover preview cards
-                // when it needs this text for in-page links.
-                className="d-block pl-1 mb-2 h3 color-fg-default no-underline _product-title"
-              >
-                {currentProduct.name}
-              </Link>
-            </div>
-          )}
-          {variant === 'full' && isRestPage && <ApiVersionPicker />}
-        </nav>
-      )}
-      <div
-        className={cx(
-          variant === 'overlay' ? 'd-xxl-none' : 'border-right d-none d-xxl-block',
-          'bg-primary overflow-y-auto flex-shrink-0',
+      <nav aria-labelledby="allproducts-menu">
+        {variant === 'full' && currentProduct && (
+          <div className={cx('d-none px-4 pb-3 border-bottom d-xxl-block')}>
+            <AllProductsLink />
+            {currentProduct && (
+              <div className="mt-3" id="allproducts-menu">
+                <Link
+                  data-testid="sidebar-product-xl"
+                  href={currentProduct.href}
+                  // Note the `_product-title` is used by the popover preview cards
+                  // when it needs this text for in-page links.
+                  className="d-block pl-1 mb-2 h3 color-fg-default no-underline _product-title"
+                >
+                  {currentProduct.name}
+                </Link>
+              </div>
+            )}
+            {variant === 'full' && isRestPage && <ApiVersionPicker />}
+          </div>
         )}
-        style={{ width: 326, height: 'calc(100vh - 175px)', paddingBottom: sidebarPaddingBottom }}
-      >
-        <nav aria-label="product menu">
+        <div
+          className={cx(
+            variant === 'overlay' ? 'd-xxl-none' : 'border-right d-none d-xxl-block',
+            'bg-primary overflow-y-auto flex-shrink-0',
+          )}
+          style={{ width: 326, height: 'calc(100vh - 175px)', paddingBottom: sidebarPaddingBottom }}
+        >
           <SidebarProduct />
-        </nav>
-      </div>
+        </div>
+      </nav>
     </div>
   )
 }
