fix(theme): improve docs sidebar accessibility

packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -49,7 +49,7 @@ export default function DocRootLayoutSidebar({
   }, [setHiddenSidebarContainer, hiddenSidebar]);
 
   return (
-    <aside
+    <div
       className={clsx(
         ThemeClassNames.docs.docSidebarContainer,
         styles.docSidebarContainer,
@@ -79,6 +79,6 @@ export default function DocRootLayoutSidebar({
           {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
         </div>
       </ResetOnSidebarChange>
-    </aside>
+    </div>
   );
 }

packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/index.tsx

@@ -12,7 +12,6 @@ import {
   useAnnouncementBar,
   useScrollPosition,
 } from '@docusaurus/theme-common/internal';
-import {translate} from '@docusaurus/Translate';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import type {Props} from '@theme/DocSidebar/Desktop/Content';
 
@@ -41,12 +40,7 @@ export default function DocSidebarDesktopContent({
   const showAnnouncementBar = useShowAnnouncementBar();
 
   return (
-    <nav
-      aria-label={translate({
-        id: 'theme.docs.sidebar.navAriaLabel',
-        message: 'Docs sidebar',
-        description: 'The ARIA label for the sidebar navigation',
-      })}
+    <div
       className={clsx(
         'menu thin-scrollbar',
         styles.menu,
@@ -56,6 +50,6 @@ export default function DocSidebarDesktopContent({
       <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
         <DocSidebarItems items={sidebar} activePath={path} level={1} />
       </ul>
-    </nav>
+    </div>
   );
 }

packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import {useScrollPosition} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
@@ -22,18 +24,49 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
       sidebar: {hideable},
     },
   } = useThemeConfig();
+  const [isNavbarVisible, setIsNavbarVisible] = useState(hideOnScroll);
+
+  useScrollPosition(
+    ({scrollY}) => {
+      if (hideOnScroll) {
+        setIsNavbarVisible(scrollY === 0);
+      }
+    },
+    [hideOnScroll],
+  );
 
   return (
-    <div
+    <nav
+      aria-label={translate({
+        id: 'theme.docs.sidebar.navAriaLabel',
+        message: 'Docs sidebar',
+        description: 'The ARIA label for the sidebar navigation',
+      })}
       className={clsx(
         styles.sidebar,
         hideOnScroll && styles.sidebarWithHideableNavbar,
         isHidden && styles.sidebarHidden,
       )}>
-      {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      {hideOnScroll && (
+        <Logo
+          tabIndex={-1}
+          className={styles.sidebarLogo}
+          aria-hidden={isNavbarVisible || undefined}
+          aria-label={
+            isNavbarVisible
+              ? undefined
+              : translate({
+                  id: 'theme.docs.sidebar.logoHomeAriaLabel',
+                  message: 'Home page',
+                  description:
+                    'The ARIA label for the sidebar logo home link',
+                })
+          }
+        />
+      )}
       <Content path={path} sidebar={sidebar} />
       {hideable && <CollapseButton onClick={onCollapse} />}
-    </div>
+    </nav>
   );
 }