From 8a0f58c0532e671f822cfc87d0f2f54a4c30e52c Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 27 Feb 2026 12:13:40 +0100
Subject: [PATCH] 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      | 23 ++++++++++++++++++-----
 site/snippets/header.php |  2 +-
 site/snippets/nav.php    |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/assets/js/header.js b/assets/js/header.js
index c9dbc1c..3181dd6 100644
--- a/assets/js/header.js
+++ b/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", () => {
-    document.body.classList.remove("menu-open");
-  });
+  overlay?.addEventListener("click", closeMenu);
 }
 
 
diff --git a/site/snippets/header.php b/site/snippets/header.php
index d4df74a..3dd4ce8 100644
--- a/site/snippets/header.php
+++ b/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>
diff --git a/site/snippets/nav.php b/site/snippets/nav.php
index 5c96dd6..137a6f9 100644
--- a/site/snippets/nav.php
+++ b/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>