a11y: Dropdown toggle announces aria-haspopup="true" but the popup has no menu semantics
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
- Align with disclosure semantics (smaller change): remove/override
aria-haspopupso the toggle announces as a plain expandable button — consistent with what the popup actually is (a list of links/buttons). - 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
- APG menu button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
- Related ACT rules: ARIA state or property is permitted, Button has non-empty accessible name
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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