fix(a11y): set aria-expanded on sidebar links that toggle a sub-sidebar (#2809)

src/core/event/index.js

@@ -274,7 +274,8 @@ export function Events(Base) {
         const hasSubSidebar = linkParent?.querySelector('.app-sub-sidebar');
 
         if (hasSubSidebar) {
-          linkParent.classList.toggle('collapse');
+          const isCollapsed = linkParent.classList.toggle('collapse');
+          linkElm?.setAttribute('aria-expanded', String(!isCollapsed));
         }
       });
 

src/core/render/index.js

@@ -372,12 +372,16 @@ export function Render(Base) {
       this.#addTextAsTitleAttribute('.sidebar-nav a');
 
       if (loadSidebar && activeEl) {
-        activeEl
-          .closest('li')
-          ?.insertAdjacentHTML(
-            'beforeend',
-            this.compiler.subSidebar(subMaxLevel) || '',
-          );
+        const activeItem = activeEl.closest('li');
+
+        activeItem?.insertAdjacentHTML(
+          'beforeend',
+          this.compiler.subSidebar(subMaxLevel) || '',
+        );
+
+        if (activeItem?.querySelector(':scope > .app-sub-sidebar')) {
+          activeEl.setAttribute('aria-expanded', 'true');
+        }
       } else {
         this.compiler.resetToc();
       }

test/e2e/sidebar.test.js

@@ -638,6 +638,57 @@ test.describe('Sidebar Tests', () => {
     await expect(subSidebar).toBeHidden();
     await expect(quickStartLink).toBeVisible();
   });
+
+  test('exposes the expanded state of page links that toggle a sub-sidebar', async ({
+    page,
+  }) => {
+    await docsifyInit({
+      config: {
+        subMaxLevel: 2,
+      },
+      markdown: {
+        homepage: '# Home',
+        sidebar: `
+          - [Quick start](quickstart.md)
+          - [Adding pages](adding-pages.md)
+        `,
+      },
+      routes: {
+        '/quickstart.md': `
+          # Quick start
+
+          ## Installation
+        `,
+        '/adding-pages.md': '# Adding pages',
+      },
+      styleURLs: ['/dist/themes/core.css'],
+    });
+
+    const quickStartLink = page.locator('.sidebar-nav a[href="#/quickstart"]');
+    const addingPagesLink = page.locator(
+      '.sidebar-nav a[href="#/adding-pages"]',
+    );
+    const subSidebar = page.locator('.sidebar-nav .app-sub-sidebar');
+
+    await expect(quickStartLink).not.toHaveAttribute('aria-expanded');
+
+    await quickStartLink.click();
+    await expect(subSidebar).toBeVisible();
+    await expect(quickStartLink).toHaveAttribute('aria-expanded', 'true');
+
+    await quickStartLink.click();
+    await expect(subSidebar).toBeHidden();
+    await expect(quickStartLink).toHaveAttribute('aria-expanded', 'false');
+
+    await quickStartLink.press('Enter');
+    await expect(subSidebar).toBeVisible();
+    await expect(quickStartLink).toHaveAttribute('aria-expanded', 'true');
+
+    // Pages without headings have no sub-sidebar to toggle
+    await addingPagesLink.click();
+    await expect(quickStartLink).not.toHaveAttribute('aria-expanded');
+    await expect(addingPagesLink).not.toHaveAttribute('aria-expanded');
+  });
 });
 
 test.describe('Mobile sidebar toggle', () => {