From 4f9e3583ad66957fa119b59bab5317348a18743a Mon Sep 17 00:00:00 2001
From: Pablo Brasero <pablo@pablobm.com>
Date: Thu, 16 Apr 2026 14:56:21 +0100
Subject: [PATCH] Describe burger menu as expanded/collapsed to assistive tech

---
 app/assets/javascripts/application.js | 7 +++++--
 app/views/layouts/_header.html.erb    | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 94aec3eaa..2f89688f5 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -193,9 +193,12 @@ $(function () {
     $(document).on("turbo:render", updateHeader);
   }, 0);
 
-  $("#menu-icon").on("click", function (e) {
+  const menuIcon = $("#menu-icon");
+  const header = $("header");
+  menuIcon.on("click", function (e) {
     e.preventDefault();
-    $("header").toggleClass("closed");
+    header.toggleClass("closed");
+    menuIcon.prop("ariaExpanded", !header.hasClass("closed"));
   });
 
   $("nav.primary li a").on("click", function () {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index aa2551d03..0a90d546a 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -7,7 +7,7 @@
       <%= t "layouts.project_name.title" %>
     </a>
     <%= render "layouts/select_language_button", :extra_classes => ["border-secondary border-opacity-10 d-md-none"] %>
-    <a href="#" id="menu-icon" class="d-md-none">
+    <a href="#" id="menu-icon" class="d-md-none" aria-expanded="false" aria-label="Main">
       <i class="bi bi-list lh-1 text-body-secondary"></i>
     </a>
   </h1>
-- 
2.39.5