Mobile menu has no focus management on open/close

[alexwolson]

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)