Skip to content

fix(theme): use single nav landmark for docs sidebar#12291

Open
yoshibase wants to merge 1 commit into
facebook:mainfrom
yoshibase:fix/issue-8429-sidebar-a11y
Open

fix(theme): use single nav landmark for docs sidebar#12291
yoshibase wants to merge 1 commit into
facebook:mainfrom
yoshibase:fix/issue-8429-sidebar-a11y

Conversation

@yoshibase

@yoshibase yoshibase commented Jul 16, 2026

Copy link
Copy Markdown

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:

  • Replaces the outer <aside> with a plain <div> container (no complementary landmark)
  • Moves the single <nav aria-label="Docs sidebar"> to wrap the logo, menu, and collapse button together

Issue #8429 also mentions hiding the duplicate sidebar logo from screen readers when navbar.hideOnScroll is 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)

  1. Open the deploy preview docs page.
  2. Right-click the left doc sidebar → Inspect.
  3. Walk up the tree from a sidebar menu link.

Expected after this PR:

<div class="...docSidebarContainer...">
  <div class="...sidebarViewport...">
    <nav aria-label="Docs sidebar" class="...sidebar...">
      <!-- logo (if hideOnScroll), menu <ul>, collapse button -->
    </nav>
  </div>
</div>

On main today:

<aside class="...docSidebarContainer...">
  ...
    <div class="...sidebar...">
      <nav aria-label="Docs sidebar"> ... </nav>
    </div>
  ...
</aside>

The point: one navigation landmark for the sidebar, not complementary + navigation.

2. NVDA landmark list

  1. Install NVDA: https://www.nvaccess.org/download/
  2. Open the preview URL in Chrome with NVDA running.
  3. Press NVDA + F7Landmarks tab.
Check Main (docusaurus.io) This PR preview
Complementary landmark for docs sidebar Yes (<aside>) No
Navigation landmark "Docs sidebar" Yes (nested inside complementary) Yes (standalone)

3. Keyboard navigation still works

  1. Press Tab repeatedly through the sidebar links.
  2. All doc links should be reachable in the same order as before.
  3. If your site config has a collapsible sidebar, the collapse button should still work.

4. VoiceOver spot check (macOS)

  1. Safari → preview URL.
  2. VO + ULandmarks rotor.
  3. Confirm there is a Docs sidebar navigation landmark and no extra complementary landmark for the sidebar column.

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.

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
@meta-cla meta-cla Bot added the CLA Signed Signed Facebook CLA label Jul 16, 2026
@yoshibase
yoshibase force-pushed the fix/issue-8429-sidebar-a11y branch from afeb5ea to 0d92b79 Compare July 16, 2026 23:51
@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit afeb5ea
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/6a596e850c026900080f22ff
😎 Deploy Preview https://deploy-preview-12291--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@yoshibase

Copy link
Copy Markdown
Author

Follow-up to #12283 (closed — PR head stuck after force-push rewrite).

This PR has the narrowed scope and expanded test plan @slorber requested. Preview link will appear in the Netlify bot comment once the build finishes.

@netlify

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 0d92b79
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/6a596e8c3309d200087f892b
😎 Deploy Preview https://deploy-preview-12291--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@yoshibase
yoshibase marked this pull request as ready for review July 20, 2026 09:16
@yoshibase

Copy link
Copy Markdown
Author

Ready for review — narrowed to single-nav landmark only. Preview: https://deploy-preview-12291--docusaurus-2.netlify.app/docs/introduction

@yoshibase

Copy link
Copy Markdown
Author

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

@yoshibase

Copy link
Copy Markdown
Author

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility: docs sidebar: superfluous logo and <aside>

1 participant