Navigation rapide : ajustement a11y (#763)

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

@@ -13,6 +13,7 @@ class MainMenu {
         this.element = document.querySelector(selector);
         this.menu = this.element.querySelector('.menu');
         this.mainButton = this.element.querySelector('button.header-button');
+        // this.a11yButton = document.querySelector('[href="#navigation"]');
 
         this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
 
@@ -43,6 +44,15 @@ class MainMenu {
             });
         }
 
+        // if (this.a11yButton) {
+        //     a11yClick(this.a11yButton, (event) => {
+        //         if (this.state.isMobile) {
+        //             event.preventDefault();
+        //             this.mainButton.focus();
+        //         }
+        //     });
+        // }
+
         this.dropdownsButtons.forEach((button) => {
             a11yClick(button, (event) => {
                 event.preventDefault();

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

 /* eslint-disable no-undef */
+import { a11yClick } from '../utils/a11y';
+import { isMobile } from '../utils/breakpoints';
 import { focusTrap } from '../utils/focus-trap';
 
 const CLASSES = {
@@ -13,6 +15,8 @@ class Search {
         this.button = document.querySelector('.pagefind-ui__toggle');
         this.element = document.querySelector('.search__modal');
         this.closeButton = this.element.querySelector('.search__close');
+        // this.a11yButton = document.querySelector('[href="#search-button"]');
+
         this.searchInstance = new PagefindUI({
             element: container,
             showSubResults: true
@@ -90,6 +94,15 @@ class Search {
                 });
             }
         });
+
+        // if (this.a11yButton) {
+        //     a11yClick(this.a11yButton, (event) => {
+        //         if (isMobile()) {
+        //             event.preventDefault();
+        //             this.toggle(true);
+        //         }
+        //     });
+        // }
     }
 
     clearSearch () {

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

@@ -17,6 +17,9 @@
     &:focus-within
         background: white
         transform: translateY(0)
+    @include media-breakpoint-down(desktop)
+        [href="#navigation"], [href="#search-button"]
+            display: none
 
 .transcription
     summary

layouts/partials/header/accessibility.html

-<nav class="nav-accessibility">
-  <ul aria-label="{{ i18n "commons.accessibility.shortcut_navigation"}}">
+<nav aria-label="{{ i18n "commons.accessibility.shortcut_navigation"}}" class="nav-accessibility">
+  <ul>
     <li><a href="#main">{{ i18n "commons.accessibility.main_content" }}</a></li>
     <li><a href="#navigation">{{ i18n "commons.accessibility.menu" }}</a></li>
     {{ if site.Params.search.active }}