Mobile menu has no focus management on open/close

Open Beginner friendly
#89 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript
Domain
accessibility, frontend

Research direction

In assets/js/navigation.js, start by reading the openMenu and closeMenu functions and inspect the menu and toggle elements they use. Verify keyboard behavior for opening and closing the mobile menu, including focus entering the menu and returning to the toggle, and confirm the behavior remains accessible when no focusable menu item is present.

Written by the indexing model from the issue text.

Description

accessibility

Summary

When the mobile menu opens, focus remains on the toggle button rather than moving into the menu. When the menu closes, focus is not explicitly returned to the toggle button. This makes the menu hard to use for keyboard-only users who expect focus to follow the opened panel.

Affected location

assets/js/navigation.js

Fix

Move focus to the first focusable item inside the menu on open, and return focus to the toggle button on close:

function openMenu() {
  toggle.setAttribute("aria-expanded", "true");
  menu.hidden = false;
  backdrop.hidden = false;
  document.body.classList.add("menu-open");
  // Move focus into the menu
  const firstFocusable = menu.querySelector('a, button, [tabindex]:not([tabindex="-1"])');
  if (firstFocusable) firstFocusable.focus();
}

function closeMenu() {
  toggle.setAttribute("aria-expanded", "false");
  menu.hidden = true;
  backdrop.hidden = true;
  document.body.classList.remove("menu-open");
  // Return focus to the toggle
  toggle.focus();
}

WCAG criterion

2.4.3 Focus Order (Level A)

Dominant language
HTML
Stars
1
Forks
6
Avg merge
9h 45m
Merged PRs (30d)
6

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.

More from CivicTechTO/civictech.ca

All issues in CivicTechTO/civictech.ca

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.