Skip to content

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

Merged
sy-records merged 1 commit into
docsifyjs:developfrom
gagan-baghel:fix/sidebar-link-aria-expanded
Sep 28, 2026
Merged

sy-records merged 1 commit into
docsifyjs:developfrom
gagan-baghel:fix/sidebar-link-aria-expanded

Conversation

@gagan-baghel

Copy link
Copy Markdown
Contributor

Summary

The active sidebar page link expands and collapses its sub-sidebar (the list of the page's headings) when it is activated, but it has no aria-expanded state, so it is exposed to assistive technology as a plain link with no expanded or collapsed state.

This sets aria-expanded="true" on the active link when its sub-sidebar is rendered, and updates the value whenever the link toggles the sub-sidebar, the same way the collapsible group titles already do. Links without a sub-sidebar (pages that are not active, or pages without headings) get no aria-expanded, since activating them only navigates.

Before/after, checked on the docs site served locally (node server --dev) on the Quick start page:

  • Before: the "Quick start" link has no aria-expanded attribute, before or after pressing Enter on it, and Chrome's accessibility tree reports it as link "Quick start".
  • After: aria-expanded is true, becomes false when Enter collapses the list, and true again on the next Enter. Chrome's accessibility tree reports the link as link "Quick start" [expanded].

Verification:

  • npm run lint, npm run typecheck, npm run test:unit, npm run test:integration and npm run test:consume-types pass.
  • The Playwright suite passes in Chrome (97 tests). The new test in test/e2e/sidebar.test.js fails without the change.

Related issue, if any:

Closes #2615

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

For any code change,

  • Related documentation has been updated, if needed
  • Related tests have been added or updated, if needed

Does this PR introduce a breaking change?

  • Yes
  • No

Tested in the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
@vercel

vercel Bot commented Sep 26, 2026

Copy link
Copy Markdown

@gagan-baghel is attempting to deploy a commit to the Docsify Team on Vercel.

A member of the Team first needs to authorize it.

The active page link collapses and expands its sub-sidebar when it is
activated, but it exposed no expanded state, so screen readers could not
announce it. Set aria-expanded when the sub-sidebar is rendered and
update it whenever the link toggles the sub-sidebar.
@sy-records
sy-records force-pushed the fix/sidebar-link-aria-expanded branch from d2f9816 to 1e28059 Compare September 27, 2026 06:12
@vercel

vercel Bot commented Sep 27, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
docsify-preview Ready Ready Preview Sep 27, 2026 6:13am UTC

@sy-records sy-records left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@sy-records
sy-records merged commit d823dbe into docsifyjs:develop Sep 28, 2026
8 checks passed
@sy-records sy-records mentioned this pull request Oct 28, 2026

This branch was successfully deployed

1 active deployment
Preview — 1e28059b Deployed Sep 27, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants