Skip to content

ARIA issues on navbar and edit menu found via Pa11y / axe #5639

@lgeggleston

Description

@lgeggleston

Describe the bug

These menu-related ARIA issues were found by @bram-atmire while testing #5514:

  1. ds-auth-nav-menu login dropdown trigger has aria-haspopup="menu" but opens a <div role="dialog" aria-modal="true">. Screen readers announce "has popup, menu" and then reveal a dialog.
  2. ds-expandable-navbar-section toggler is <a href="javascript:void(0);" role="menuitem">. The href="javascript:void(0)" is an HTML antipattern; the element should be a <button>.
  3. ds-context-help-toggle is also <a href="javascript:void(0);" role="menuitem"> and additionally is not nested inside any role="menu"/menubar" , so the menuitem role is an orphan and axe fires aria-required-parent on it.
  4. When the menubar role IS rendered (your case), the descendants of dso-edit-menu are still plain <a class="btn"> / <button class="btn"> without role="menuitem", so axe still fires aria-required-children on it.

To Reproduce

Steps to reproduce the behavior:

  1. Run axe / Pa11y on a community page, an item page, the login form, and /info/accessibility

Expected behavior

Re-run axe / Pa11y; The aria-haspopup="menu" on login button, aria-required-parent on the help toggle, and the aria-required-children on the visible dso-edit-menu should all clear.

Related work

Found while testing fix for #5488

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

🏗 In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions