Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

On pages with secondary navigation, hamburger menu contains tab stops for primary navigation #10704

Open
7 tasks done
hidde opened this issue Nov 21, 2024 · 0 comments · May be fixed by #10705
Open
7 tasks done

On pages with secondary navigation, hamburger menu contains tab stops for primary navigation #10704

hidde opened this issue Nov 21, 2024 · 0 comments · May be fixed by #10705
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers

Comments

@hidde
Copy link
Contributor

hidde commented Nov 21, 2024

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

When accessing the hamburger menu on pages where

Reproducible demo

docusaurus.io

Steps to reproduce

  1. Go to one of the main pages, for instance Docs
  2. Make sure your window is small enough for the menu to be folded into a hamburger menu
  3. Open the hamburger menu with the hamburger button
  4. Start tabbing

Expected behavior

All focus steps are visible and from logo, dark mode, menu close button, we'll go to 'Back to main menu' and then 'Introduction', etc (each of the individual pages)

Actual behavior

After the menu close button, the next tab stop is invisible, it is the main navigation, that is currently hidden from view using CSS.

Your environment

This happens on latest; I can reproduce it on docusaurus.io so did not make a specfic test case.

Self-service

  • I'd be willing to fix this bug myself.
@hidde hidde added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Nov 21, 2024
hidde added a commit to hidde/docusaurus that referenced this issue Nov 21, 2024
@hidde
fix: only render secondaryMenu if it should be shown
e723116 
fixes facebook#10704

Issue was that with keyboard, you could reach the primary menu, while it was made invisible by CSS. By not rendering secondaryMenu based on the secondaryMenuShown logic, , we make sure it isn't accessible by keyboard while it is hidden.
@hidde hidde linked a pull request Nov 21, 2024 that will close this issue
Open
3 tasks
hidde added a commit to hidde/docusaurus that referenced this issue Nov 21, 2024
@hidde
fix: only render secondaryMenu if it should be shown
b7ca6db 
fixes facebook#10704

Issue was that with keyboard, you could reach the primary menu, while it was made invisible by CSS. By not rendering secondaryMenu based on the secondaryMenuShown logic, , we make sure it isn't accessible by keyboard while it is hidden.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: only render secondaryMenu if it should be shown hidde/docusaurus
1 participant
@hidde