Skip to content

A11y: Navbar dropdowns do not open with screen reader #11501

@Huzaif-nabi

Description

@Huzaif-nabi

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

The main navigation dropdowns cannot be opened using the Enter key when a screen reader is active, preventing keyboard-only users from accessing sub-menu links.

Reproducible demo

No response

Steps to reproduce

  1. On Windows, turn on the Narrator screen reader or any other screen reader.

  2. Open the Docusaurus website in a browser.

  3. Use the Tab key to navigate to a dropdown menu in the navbar, like the "Canary" version switcher or the "English"
    language switcher.

  4. Press the Enter key.

Expected behavior

The dropdown menu should open, allowing the user to navigate the options.

Actual behavior

Nothing happens. The dropdown menu does not open when Enter is pressed.

Your environment

  • Public source code:
  • Public site URL:
  • Docusaurus version used:
  • Environment name and version (e.g. Chrome 89, Node.js 16.4):
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

  • I'd be willing to fix this bug myself.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its executionstatus: needs triageThis issue has not been triaged by maintainers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions