CivicTechTO / CivicTechTO/civictech.ca

Mobile menu has no focus management on open/close

Open
#89 0 comments 0 reactions 0 assignees View on GitHub
accessibility
Dominant language
HTML
Stars
1
Forks
6
Avg merge
9h 45m
Merged PRs (30d)
6

Description

## 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:

```js
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)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.