diff --git a/src/core/event/index.js b/src/core/event/index.js index 74120afa3..d61aa3210 100644 --- a/src/core/event/index.js +++ b/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)); } }); diff --git a/src/core/render/index.js b/src/core/render/index.js index 76ed6acbf..1d55c66a3 100644 --- a/src/core/render/index.js +++ b/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(); } diff --git a/test/e2e/sidebar.test.js b/test/e2e/sidebar.test.js index ebc18355a..5743fe61c 100644 --- a/test/e2e/sidebar.test.js +++ b/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', () => {