feat: accessibility for site-menu

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

assets/js/header.js

@@ -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", () => {
+  overlay?.addEventListener("click", closeMenu);
-    document.body.classList.remove("menu-open");
-  });
 }
 
 

site/snippets/header.php

@@ -80,7 +80,7 @@
         <?php endforeach ?>
     </div>
 
-    <button id="menu-toggle">
+    <button id="menu-toggle" aria-expanded="false" aria-controls="site-menu" aria-label="Ouvrir le menu">
       <span class="open"><?= svg('assets/icons/menu.svg') ?></span>
       <span class="close"><?= svg('assets/icons/close.svg') ?></span>
     </button>

site/snippets/nav.php

@@ -1,4 +1,4 @@
-<aside id="site-menu" aria-label="Menu principal">
+<aside id="site-menu" aria-label="Menu principal" inert>
     <div class="site-menu__inner">
 <p class="baseline">Index est une ONG d’investigation numérique au service du public,
 de la vérité et de la justice.</p>