facebook/Docusaurus

Bug(navbar): languages and doc version drop downs are inaccessible via the keyboard and screen reader

Open

#8478 opened on Dec 23, 2022

View on GitHub
 (10 comments) (0 reactions) (0 assignees)JavaScript (12,167 stars) (1,074 forks)batch import
bugdomain: a11yhelp wantedstatus: needs more information

Description

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 languages and docs version drop-down menus are not accessible via the keyboard. This violates WCAG 2.1.1 which states that all functionalities on the website must be accessible via the keyboard. Drop-down menus don't fall under the exceptions of freehand drawing, or a game intended to teach a specific movement. https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable

Reproducible demo

No response

Steps to reproduce

  1. Start NVDA
  2. Navigate to https://docusaurus.io/
  3. Tab to the 2.2.0 menu
  4. The user is unable to activate the menu with the keyboard
  5. Tab to English menu
  6. The user is unable to activate the menu with the keyboard

https://user-images.githubusercontent.com/11358567/209265366-005966b3-ea8d-48bf-87c7-e22dad7d548a.mp4

Expected behavior

I thought the menus would open automatically as I tabbed to them giving me the option to choose the doc version and language with the arrow keys and enter key. I also expect to be able to close the menu by pressing tab again.

Actual behavior

I am unable to activate the menus at all with the keyboard.

Your environment

  • Public source code:
  • Public site URL: https://docusaurus.io/
  • Docusaurus version used: 2.2.0
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): Edge 108
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

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

Contributor guide

Tech stack
javascriptreacttypescriptcss
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React componentsWCAG accessibility guidelinesKeyboard navigation basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue concerns the navbar's language and version dropdown menus which are not keyboard accessible. The fix likely involves adding keyboard event handlers (e.g., Enter/Space to open, Escape to close) and proper ARIA attributes to the dropdown components in Docusaurus source. Look for the navbar component in `packages/docusaurus theme classic/src/theme/Navbar/` and check for existing dropdown implementations. Ensure the dropdowns follow WAI ARIA Authoring Practices for menu buttons.