From 23dbec3ac70261d4482339a24a2ec8d3a930984e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Thu, 23 Mar 2023 17:38:14 +0100
Subject: [PATCH] a11y: toggle nav button label when opened (#75679)

---
 templates/includes/nav.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/templates/includes/nav.html b/templates/includes/nav.html
index 54beaa41..f5a4de76 100644
--- a/templates/includes/nav.html
+++ b/templates/includes/nav.html
@@ -3,10 +3,10 @@
 <nav role="navigation" class="site-nav">
   <div id="nav-wrapper" class="gru-nav-wrapper">
     {% block nav-pre %}{% endblock %}
-    <div id="nav" class="gru-nav togglable">
+    <div id="nav" class="gru-nav">
       {% block nav-top %}{% endblock %}
-      <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
-        <span class="sr-only">Ouvrir le menu</span>
+      <button id="nav-button" class="gru-nav-button" aria-labelledby="nav-button--label">
+        <span class="sr-only" id="nav-button--label">Ouvrir le menu</span>
         <span class="icon-bar icon-bar-1"></span>
         <span class="icon-bar icon-bar-2"></span>
         <span class="icon-bar icon-bar-3"></span>
@@ -21,3 +21,19 @@
     {% block nav-post %}{% endblock %}
   </div> <!-- nav-wrapper -->
 </nav>
+
+{% block nav-button-script %}
+<script>
+(function() {
+  const nav_button = document.getElementById('nav-button');
+  const nav_button_label = document.getElementById('nav-button--label');
+  nav_button.addEventListener('click', function() {
+    if (nav_button.classList.toggle('toggled')) {
+      nav_button_label.textContent = 'Fermer le menu';
+    } else {
+      nav_button_label.textContent = 'Ouvrir le menu';
+    }
+  });
+})();
+</script>
+{% endblock %}