fix(theme): use single nav landmark for docs sidebar#12291
Conversation
Replace the outer complementary <aside> with a <div> and expose the sidebar as one <nav aria-label="Docs sidebar"> landmark (logo, menu, collapse button). Removes nested complementary + navigation landmarks. Fixes facebook#8429
afeb5ea to
0d92b79
Compare
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Ready for review — narrowed to single-nav landmark only. Preview: https://deploy-preview-12291--docusaurus-2.netlify.app/docs/introduction |
|
Ready for review — scope narrowed to landmark structure only (logo aria-hidden deferred to a follow-up). Preview: https://deploy-preview-12291--docusaurus-2.netlify.app/docs/introduction |
|
@slorber — ready for review when you have time. Narrowed to landmark structure only (#8429). Preview: https://deploy-preview-12291--docusaurus-2.netlify.app/docs/introduction — test plan is in the description (DevTools + NVDA/VoiceOver). |
Summary
Fixes #8429 (landmark structure only)
The docs sidebar currently nests landmarks: an outer
<aside>(complementary) wraps an inner<nav aria-label="Docs sidebar">. NVDA announces both before you reach any doc link — "complementary landmark … docs sidebar navigation landmark …".This PR:
<aside>with a plain<div>container (no complementary landmark)<nav aria-label="Docs sidebar">to wrap the logo, menu, and collapse button togetherIssue #8429 also mentions hiding the duplicate sidebar logo from screen readers when
navbar.hideOnScrollis on. I left that out of this PR on purpose — I will open a separate follow-up for it so reviewers can evaluate one concern at a time.Test plan
Preview: https://deploy-preview-12291--docusaurus-2.netlify.app/docs/introduction (once Netlify build completes)
Compare against main: https://docusaurus.io/docs/introduction
Tools: Chrome, NVDA (Windows) or VoiceOver (macOS), DevTools
1. Inspect the DOM (Chrome DevTools)
Expected after this PR:
On main today:
The point: one
navigationlandmark for the sidebar, notcomplementary+navigation.2. NVDA landmark list
<aside>)3. Keyboard navigation still works
4. VoiceOver spot check (macOS)
5. axe DevTools (optional)
Scan the page with axe DevTools. Removing a redundant
<aside>should not introduce new violations. Landmark-related informational notices are fine — compare against main rather than expecting zero notices.What proves the fix
Steps 1–2 show the sidebar is exposed as one navigation landmark instead of complementary + navigation stacked together. That matches the structure requested in #8429.