openedx / openedx/paragon

a11y: Dropdown toggle announces aria-haspopup="true" but the popup has no menu semantics

Open
#4,403 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

Context

Found during the 2026 Axim-commissioned accessibility audit of Paragon, while documenting Dropdown against the APG menu button pattern.

Current behavior

Paragon's Dropdown wraps React-Bootstrap 1.6.5. The rendered toggle is a <button> with aria-haspopup="true" and aria-expanded, but the popup (Dropdown.Menu) renders with no role="menu", and items render as a.dropdown-item/buttons with no role="menuitem" (React-Bootstrap's intentional avoidance of ARIA menu semantics, inherited from Bootstrap).

Impact

aria-haspopup="true" maps to aria-haspopup="menu": screen readers announce the toggle as a "menu button" and set user expectations of menu semantics (menu role, menuitem count/position, first-item focus) that the popup does not expose. The mismatch is confusing rather than strictly broken. WCAG mapping: 4.1.2 Name, Role, Value.

Additionally, Dropdown.test.jsx currently has no keyboard or ARIA assertions (open/close behavior only), so neither resolution direction is guarded by tests.

Options

  1. Align with disclosure semantics (smaller change): remove/override aria-haspopup so the toggle announces as a plain expandable button — consistent with what the popup actually is (a list of links/buttons).
  2. Adopt full APG menu button semantics: add role="menu"/role="menuitem" and the corresponding keyboard contract. Higher effort and only appropriate for action menus, not navigation.

Option 1 is likely correct for most Paragon usages; either way the decision should be recorded in the component's Accessibility docs.

References

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with Dropdown.test.jsx and the Dropdown component, then review the component's Accessibility docs and the APG menu button pattern. Determine which semantics fit the component's usages, record the decision in the documentation, and add tests covering the chosen ARIA and keyboard behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.