studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

feat: accessibility for site-menu

Browse source 
- #menu-toggle: aria-expanded, aria-controls, aria-label (updated on toggle)
- #site-menu: inert when closed (blocks focus + screen readers), removed when open

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 12:13:40 +01:00
parent c28f38c6e1
commit 8a0f58c053
3 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
assets/js/header.js
View file

@ -1,22 +1,35 @@
export function headerToggle() {
const header = document.getElementById("site-header");
const buttonToggle = document.querySelector("#menu-toggle");
const siteMenu = document.getElementById("site-menu");
const overlay = document.getElementById("menu-overlay");
if (!header || !buttonToggle) return;
function openMenu() {
document.body.classList.add("menu-open");
buttonToggle.setAttribute("aria-expanded", "true");
buttonToggle.setAttribute("aria-label", "Fermer le menu");
siteMenu?.removeAttribute("inert");
}
function closeMenu() {
document.body.classList.remove("menu-open");
buttonToggle.setAttribute("aria-expanded", "false");
buttonToggle.setAttribute("aria-label", "Ouvrir le menu");
siteMenu?.setAttribute("inert", "");
}
buttonToggle.addEventListener("click", (e) => {
e.stopPropagation();
document.body.classList.toggle("menu-open");
document.body.classList.contains("menu-open") ? closeMenu() : openMenu();
});
header.addEventListener("click", () => {
document.body.classList.remove("menu-open");
if (document.body.classList.contains("menu-open")) closeMenu();
});
overlay?.addEventListener("click", () => {
document.body.classList.remove("menu-open");
});
overlay?.addEventListener("click", closeMenu);
}