From 18109733cff6c75725740c30de99c2aa971ec15a Mon Sep 17 00:00:00 2001 From: alexisben Date: Tue, 26 Nov 2024 11:22:10 +0100 Subject: [PATCH 1/4] fix menu focus --- assets/js/theme/design-system/mainMenu.js | 9 +++++++++ assets/js/theme/utils/focus-trap.js | 2 +- i18n/en.yml | 2 +- i18n/fr.yml | 2 +- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js index 3f73a0f74..7af842575 100644 --- a/assets/js/theme/design-system/mainMenu.js +++ b/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'; @@ -44,6 +45,12 @@ class MainMenu { }); } + // window.addEventListener('focusin', (event) => { + // if (!event.target.closest('#' + this.element.id)) { + // this.toggleMainMenu(false); + // } + // }); + // if (this.a11yButton) { // a11yClick(this.a11yButton, (event) => { // if (this.state.isMobile) { @@ -67,6 +74,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); } }); } diff --git a/assets/js/theme/utils/focus-trap.js b/assets/js/theme/utils/focus-trap.js index 865f8ade9..83770c4d1 100644 --- a/assets/js/theme/utils/focus-trap.js +++ b/assets/js/theme/utils/focus-trap.js @@ -24,7 +24,7 @@ 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); - + console.log(focusOnLimit); if (focusOnLimit) { event.preventDefault(); focusTarget.focus(); diff --git a/i18n/en.yml b/i18n/en.yml index 58c3a0715..fd39bc5fe 100644 --- a/i18n/en.yml +++ b/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 diff --git a/i18n/fr.yml b/i18n/fr.yml index 151636bd1..09c6f310c 100644 --- a/i18n/fr.yml +++ b/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 From 11eaadc7968e54be2a4823c10f519bd42d008276 Mon Sep 17 00:00:00 2001 From: alexisben Date: Tue, 26 Nov 2024 11:47:42 +0100 Subject: [PATCH 2/4] update upper menu order when screen change --- assets/js/theme/design-system/mainMenu.js | 13 +++++++++++++ assets/sass/_theme/design-system/header.sass | 6 +++--- layouts/partials/header/header.html | 5 ++++- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js index 7af842575..2d34a3f48 100644 --- a/assets/js/theme/design-system/mainMenu.js +++ b/assets/js/theme/design-system/mainMenu.js @@ -14,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"]'); @@ -92,6 +93,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) { diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass index caa0d764e..0ca39f483 100644 --- a/assets/sass/_theme/design-system/header.sass +++ b/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 diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html index cb708b463..85b166c58 100644 --- a/layouts/partials/header/header.html +++ b/layouts/partials/header/header.html @@ -1,7 +1,10 @@ {{ $primary := partial "GetMenu" "primary" }} {{ $upper_menu := partial "GetMenu" "upper-menu" }} -