[a11y] Amélioration du menu

assets/js/theme/design-system/mainMenu.js

@@ -1,3 +1,4 @@
+import { focusTrap } from '../utils/focus-trap';
 import { isMobile } from '../utils/breakpoints';
 import { a11yClick } from '../utils/a11y';
 
@@ -13,6 +14,7 @@ class MainMenu {
         this.element = document.querySelector(selector);
         this.menu = this.element.querySelector('.menu');
         this.mainButton = this.element.querySelector('button.header-button');
+        this.upperMenu = this.element.querySelector('.upper-menu');
         // this.a11yButton = document.querySelector('[href="#navigation"]');
 
         this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
@@ -67,6 +69,8 @@ class MainMenu {
         window.addEventListener('keydown', (event) => {
             if (event.keyCode === 27 || event.key === 'Escape') {
                 this.closeEverything();
+            } else if (event.key === 'Tab' && this.state.isOpened) {
+                focusTrap(event, this.element, true);
             }
         });
     }
@@ -83,6 +87,18 @@ class MainMenu {
         this.state.isMobile = isMobile();
 
         this.closeEverything();
+
+        if (this.upperMenu) {
+            this.updateUpperMenuPosition();
+        }
+    }
+
+    updateUpperMenuPosition () {
+        if (this.state.isMobile) {
+            this.element.append(this.upperMenu);
+        } else {
+            this.element.prepend(this.upperMenu);
+        }
     }
 
     toggleMainMenu (open = !this.state.isOpened) {

assets/js/theme/utils/focus-trap.js

@@ -24,7 +24,6 @@ function handleTabLoop(event, firstFocusable, lastFocusable, element) {
     const focusTarget = goingBackward ? lastFocusable : firstFocusable;
     // get focus position (we want first or last) to create the focus loop
     const focusOnLimit = isElementFocused(element, goingBackward ? firstFocusable : lastFocusable);
-
     if (focusOnLimit) {
         event.preventDefault();
         focusTarget.focus();

assets/sass/_theme/design-system/header.sass

@@ -90,9 +90,6 @@ header#document-header
             html.has-menu-opened &
                 background: $header-upper-menu-sticky-background
                 display: block
-                + nav
-                    .menu
-                        padding-top: $header-upper-menu-mobile-height
         .nav-level-1
             a
                 text-decoration: none
@@ -114,6 +111,9 @@ header#document-header
                     &.active
                         box-shadow: inset 0 -4px 0 0 var(--color-border)
     @include media-breakpoint-down(desktop)
+        &.has-upper-menu
+            .menu
+                padding-top: $header-upper-menu-mobile-height
         html.has-menu-opened &
             nav
                 padding-bottom: 0

i18n/en.yml

@@ -141,7 +141,7 @@ commons:
     blank_aria: “{{ .Title }}” - external link
     download: “Download {{ .Title }}” - external link
   menu:
-    label: Toggle navigation
+    label: Menu
     legal: Legals menu
     main: Main menu
     secondary: Secondary menu

i18n/fr.yml

@@ -150,7 +150,7 @@ commons:
     blank_aria: “{{ .Title }}” - lien externe
     download: Télécharger “{{ .Title }}” - lien externe
   menu:
-    label: Ouvrir / Fermer le menu
+    label: Menu
     legal: Menu pages légales
     main: Menu principal
     secondary: Menu secondaire

layouts/partials/header/header.html

@@ -1,7 +1,10 @@
 {{ $primary := partial "GetMenu" "primary" }}
 {{ $upper_menu := partial "GetMenu" "upper-menu" }}
 
-<header id="document-header" role="banner">
+<header id="document-header" role="banner"
+  {{ if $upper_menu.items }}
+    class="has-upper-menu"
+  {{ end }}>
   {{ if $upper_menu.items }}
     <nav class="upper-menu" aria-label="{{ i18n "commons.menu.upper" }}">
       <div class="container">