Skip to content

fix(theme): add aria-hidden and aria-label to sidebar logo for access…#12167

Open
MasterIfeanyi wants to merge 1 commit into
facebook:mainfrom
MasterIfeanyi:fix/sidebar-logo-aria-hidden
Open

fix(theme): add aria-hidden and aria-label to sidebar logo for access…#12167
MasterIfeanyi wants to merge 1 commit into
facebook:mainfrom
MasterIfeanyi:fix/sidebar-logo-aria-hidden

Conversation

@MasterIfeanyi

Copy link
Copy Markdown
Contributor

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

The sidebar logo (shown when hideOnScroll is enabled) was not accessible to screen readers. When the navbar is visible, the logo is visually hidden behind it but had no aria-hidden attribute, causing screen readers like NVDA to unnecessarily announce it. When the navbar scrolls away and the logo becomes visible and interactive, it had no accessible label at all.

This fix adds aria-hidden={isNavbarVisible} so the logo is hidden from screen readers when it is not visible, and adds a localized aria-label via the translate() function when the logo is visible and acting as a real homepage link.

Closes #8429

Test Plan

  1. Enable hideOnScroll: true in your Docusaurus site's themeConfig.navbar config.
  2. Open a docs page that has a sidebar.
  3. With the page at the top (navbar visible): inspect the sidebar logo element and confirm it has aria-hidden="true" and no aria-label.
  4. Scroll down until the navbar disappears: inspect the sidebar logo again and confirm aria-hidden is gone and aria-label="Home page" is present.
  5. Test with a screen reader (e.g. NVDA on Windows) to confirm the logo is not announced when hidden, and is announced correctly as "Home page" when visible.

Test links

Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/

Related issues/PRs

Closes #8429

@meta-cla meta-cla Bot added the CLA Signed Signed Facebook CLA label Jun 13, 2026
@netlify

netlify Bot commented Jun 13, 2026

Copy link
Copy Markdown

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit e40f760
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/6a2d9789f2dc25000843857e
😎 Deploy Preview https://deploy-preview-12167--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.

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