Attributs sur menu mobile (#165)

* Attributs sur menu mobile * Amélioration du responsive et élimination du code mort * Update site/layouts/partials/nav.html Co-authored-by: Joachim <joachim.robert@protonmail.com> * Update site/layouts/partials/template/nav.html Co-authored-by: Joachim <joachim.robert@protonmail.com> --------- Co-authored-by: Joachim <joachim.robert@protonmail.com>
Paris-Web · Jan 6, 2025 · 37c01b9 · 37c01b9
1 parent ce14774
commit 37c01b9
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/site/layouts/partials/nav.html b/site/layouts/partials/nav.html
@@ -1,8 +1,8 @@
-<div class="nav">
-    <header class="header" role="banner" tabindex="-1">
+<header tabindex="-1" role="banner" class="nav">
+    <div class="header">
         <div class="header__menu-button">
-            <button class="js-open-menu open-menu">
-                <svg class="icon icon--menu" xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 30 15">
+            <button class="js-open-menu open-menu" type="button" aria-haspopup="dialog">
+                <svg class="icon icon--menu" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 30 15">
                     <path fill="#585462" fill-rule="evenodd" d="M28.521 5.625c.377.006.752.158 1.04.458.37.385.506.92.409 1.417a1.604 1.604 0 0 1-.41 1.417c-.287.3-.662.452-1.039.458l-4.96 5.167c-.586.61-1.536.61-2.122 0a1.609 1.609 0 0 1 0-2.21L26.08 7.5l-4.64-4.833a1.609 1.609 0 0 1 0-2.21 1.458 1.458 0 0 1 2.122 0l4.96 5.168zM1.5 0h15a1.5 1.5 0 0 1 0 3h-15a1.5 1.5 0 0 1 0-3zm0 6h18a1.5 1.5 0 0 1 0 3h-18a1.5 1.5 0 0 1 0-3zm0 6h15a1.5 1.5 0 0 1 0 3h-15a1.5 1.5 0 0 1 0-3z"/>
                 </svg>
                 Menu
@@ -12,19 +12,19 @@
         <div class="header__about">
             <div class="logo">
                 <a href="{{.Site.BaseURL}}">
-                    <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" role="img" width="178" height="80" alt="Retourner à la page d'accueil" title="Retourner à la page d'accueil"/>
+                    <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" width="178" height="80" alt="Paris Web, retourner à la page d’accueil" title="Paris Web, retourner à la page d’accueil"/>
                 </a>
             </div>
 
             <p class="date">
                 <span class="date-important">Du <time datetime="2018-10-04T09:00">4</time> au <time datetime="2018-10-06T18:00">6 octobre 2018</time></span>
             </p>
         </div>
-    </header>
-    <nav class="menu" id="menu" role="navigation">
+    </div>
+    <nav class="menu" id="menu" role="navigation" aria-label="Menu principal">
         <div class="menu__overlay js-close-menu"></div>
-        <div class="menu__content" tabindex="-1">
-            <button class="close-menu js-close-menu" title="Revenir au contenu">
+        <div class="menu__content">
+            <button class="close-menu js-close-menu" title="Fermer et revenir au contenu">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" role="img" aria-label="Fermer">
                     <path fill="#000" fill-rule="evenodd" d="M7.5 9.397l-4.94 5.145c-.585.61-1.535.61-2.12 0a1.609 1.609 0 0 1 0-2.21L5.078 7.5.439 2.667a1.609 1.609 0 0 1 0-2.21 1.458 1.458 0 0 1 2.122 0L7.5 5.604 12.44.458a1.458 1.458 0 0 1 2.12 0c.586.61.586 1.6 0 2.21L9.922 7.5l4.64 4.833c.585.61.585 1.6 0 2.21-.586.61-1.536.61-2.122 0L7.5 9.396z"/>
                 </svg>
@@ -33,7 +33,7 @@
                 <div class="menu__head">
                     <div class="logo">
                         <a href="{{.Site.BaseURL}}">
-                            <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" style="width: 10em; height: 4.5em" alt="Retourner à la page d'accueil" title="Retourner à la page d'accueil"/>
+                            <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" style="width: 10em; height: 4.5em" alt="Paris Web, retourner à la page d’accueil" title="Paris Web, retourner à la page d’accueil"/>
                         </a>
                     </div>
 
@@ -109,4 +109,4 @@
             </div>
         </div>
     </nav>
-</div>
+</header>
diff --git a/site/layouts/partials/template/nav-sponsor.html b/site/layouts/partials/template/nav-sponsor.html
@@ -1,8 +1,5 @@
-<div class="menu__sponsors">
-    <div class="menu__sponsors__title h2-like">Nos partenaires</div>
-
+<ul class="menu__sponsors">
     {{ with .Site.GetPage "page" "pages/sponsors/index.md" }}
-        <ul>
             {{ $sponsorsResources := .Resources }}
             {{ range where (.Resources.ByType "page") ".Params.niveau" "platine" }}
                 <li>
@@ -13,9 +10,8 @@
                     </a>
                 </li>
             {{ end }}
-        </ul>
     {{ end }}
 
-    <a href="{{ .Site.BaseURL }}pages/sponsors">Tous nos partenaires</a>
-    <a href="{{ .Site.BaseURL }}pages/devenez-sponsor">Soutenez Paris Web</a>
-</div>
+    <li><a href="{{ .Site.BaseURL }}pages/sponsors">Tous nos partenaires</a></li>
+    <li><a href="{{ .Site.BaseURL }}pages/devenez-sponsor">Soutenez Paris Web</a></li>
+</ul>
diff --git a/site/layouts/partials/template/nav.html b/site/layouts/partials/template/nav.html
@@ -1,8 +1,8 @@
-<div class="nav">
-    <header class="header" role="banner" tabindex="-1">
+<header tabindex="-1" role="banner" class="nav">
+    <div class="header">
         <div class="header__menu-button">
-            <button class="js-open-menu open-menu">
-                <svg class="icon icon--menu" xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 30 15">
+            <button class="js-open-menu open-menu" type="button" aria-haspopup="dialog">
+                <svg class="icon icon--menu" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="30" height="15" viewBox="0 0 30 15">
                     <path fill="#585462" fill-rule="evenodd" d="M28.521 5.625c.377.006.752.158 1.04.458.37.385.506.92.409 1.417a1.604 1.604 0 0 1-.41 1.417c-.287.3-.662.452-1.039.458l-4.96 5.167c-.586.61-1.536.61-2.122 0a1.609 1.609 0 0 1 0-2.21L26.08 7.5l-4.64-4.833a1.609 1.609 0 0 1 0-2.21 1.458 1.458 0 0 1 2.122 0l4.96 5.168zM1.5 0h15a1.5 1.5 0 0 1 0 3h-15a1.5 1.5 0 0 1 0-3zm0 6h18a1.5 1.5 0 0 1 0 3h-18a1.5 1.5 0 0 1 0-3zm0 6h15a1.5 1.5 0 0 1 0 3h-15a1.5 1.5 0 0 1 0-3z"/>
                 </svg>
                 Menu
@@ -12,19 +12,19 @@
         <div class="header__about">
             <div class="logo">
                 <a href="{{.Site.BaseURL}}pages/accueil">
-                    <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" role="img" width="178" height="80" alt="Retourner à la page d'accueil" title="Retourner à la page d'accueil"/>
+                    <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" width="178" height="80" alt="Paris Web, retourner à la page d’accueil" title="Paris Web, retourner à la page d’accueil"/>
                 </a>
             </div>
 
             <p class="date">
                 <span class="date-important">Du <time datetime="2018-10-04T09:00">4</time> au <time datetime="2018-10-06T18:00">6 octobre 2018</time></span>
             </p>
         </div>
-    </header>
-    <nav class="menu" id="menu" role="navigation">
+    </div>
+    <nav class="menu" id="menu" role="navigation" aria-label="Menu principal">
         <div class="menu__overlay js-close-menu"></div>
-        <div class="menu__content" tabindex="-1">
-            <button class="close-menu js-close-menu" title="Revenir au contenu">
+        <div class="menu__content">
+            <button class="close-menu js-close-menu" title="Fermer et revenir au contenu">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" role="img" aria-label="Fermer">
                     <path fill="#000" fill-rule="evenodd" d="M7.5 9.397l-4.94 5.145c-.585.61-1.535.61-2.12 0a1.609 1.609 0 0 1 0-2.21L5.078 7.5.439 2.667a1.609 1.609 0 0 1 0-2.21 1.458 1.458 0 0 1 2.122 0L7.5 5.604 12.44.458a1.458 1.458 0 0 1 2.12 0c.586.61.586 1.6 0 2.21L9.922 7.5l4.64 4.833c.585.61.585 1.6 0 2.21-.586.61-1.536.61-2.122 0L7.5 9.396z"/>
                 </svg>
@@ -33,7 +33,7 @@
                 <div class="menu__head">
                     <div class="logo">
                         <a href="{{ .Site.BaseURL }}pages/accueil">
-                            <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" role="img" style="width: 10em; height: 4.5em" alt="Retourner à la page d'accueil" title="Retourner à la page d'accueil"/>
+                            <img src="{{.Site.BaseURL}}images/logo/2019/logo.svg" style="width: 10em; height: 4.5em" alt="Paris Web, retourner à la page d’accueil" title="Paris Web, retourner à la page d’accueil"/>
                         </a>
                     </div>
 
@@ -69,8 +69,6 @@
                                 <span>Boutique</span>
                             </a>
                         </li>
-                    </ul>
-                    <ul>
                         <li>
                             <a class="h3-like" href="{{.Site.BaseURL}}pages/resultats-recherche-vide/">
                                 <span>
@@ -89,4 +87,4 @@
             </div>
         </div>
     </nav>
-</div>
+</header>
diff --git a/src/js/pages/nav.js b/src/js/pages/nav.js
@@ -1,5 +1,6 @@
 import debounce from "../util/debounce";
-import throttle from "../util/throttle";
+
+const breakpoint = window.matchMedia('(max-width: 68em');
 
 const getFocusableElementsWithin = target =>
   target.querySelectorAll(
@@ -111,48 +112,26 @@ const listenButtons = () => {
   }
 };
 
-const listenIntersection = (element, callback) => {
-  const simulateIntersectionObserver = () => {
-    const offsetTop = element.offsetTop;
-    const windowHeight = window.innerHeight;
-    callback({ isIntersecting: window.scrollY > offsetTop - windowHeight });
-  };
-
-  const throttledSimulateIntersectionObserver = throttle(
-    simulateIntersectionObserver,
-    200
-  );
-  const debouncedSimulateIntersectionObserver = debounce(
-    simulateIntersectionObserver,
-    50
-  );
-
-  if ("IntersectionObserver" in window) {
-    const observer = new IntersectionObserver(
-      entries => {
-        const entry = entries.find(entry => entry.target === element);
-        callback(entry);
-      },
-      {
-        threshold: 0
-      }
-    );
-    observer.observe(element);
+const initModalDialog = (breakpoint) => {
+  const menu = document.querySelector('.menu__content');
+  if (breakpoint.matches) {
+    Object.assign(menu, {
+      role: 'dialog',
+      ariaModal: 'true',
+      tabindex: '-1'
+    });
   } else {
-    window.addEventListener("scroll", () => {
-      throttledSimulateIntersectionObserver();
-      debouncedSimulateIntersectionObserver();
+    ['role', 'aria-modal', 'tabindex'].forEach(attr => {
+      menu.removeAttribute(attr);
     });
   }
-
-  window.addEventListener("resize", () => {
-    throttledSimulateIntersectionObserver();
-    debouncedSimulateIntersectionObserver();
-  });
-};
+}
 
 const initNavigation = () => {
+  initModalDialog(breakpoint);
   listenButtons();
+
+  breakpoint.addEventListener("change", initModalDialog);
 };
 
 export default initNavigation;