[A11Y] Recherche (#572)

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

@@ -14,7 +14,6 @@ class Search {
             return;
         }
 
-        this.input = this.element.querySelector('input');
         this.listen();
     }
 
@@ -40,14 +39,15 @@ class Search {
                     this.toggle(false);
                     this.button.focus();
                 }
-            } else if (event.key === "Tab" && this.state.isOpened) {
+            } 
+            else if (event.key === "Tab" && this.state.isOpened) {
                 focusTrap(event, this.element, this.state.isOpened);
-                
-                this.buttonMore = this.element.querySelector('.pagefind-ui__results + button');
-
-                if (this.buttonMore) {
+            }
+            this.buttonMore = this.element.querySelector('.pagefind-ui__results + button');
+            if (this.buttonMore && this.state.isOpened) {
+                this.buttonMore.addEventListener('click', () => {
                     this.buttonMoreFocus();
-                }
+                });
             }
         });
     }
@@ -80,7 +80,7 @@ class Search {
                 }
                 });
             });
-        });   
+        });  
         const observerConfig = { childList: true, subtree: true };
         observer.observe(this.element, observerConfig);
     }
@@ -94,9 +94,26 @@ class Search {
             this.input = this.element.querySelector('input');
             this.input.focus();
 
-            document.body.style.overflow = 'hidden';
+            this.inertElements = [];
+            const allElements = document.querySelectorAll('body *');
+
+            allElements.forEach(el => {
+                if (el === this.element || this.element.contains(el) || el.contains(this.element)) {
+                    return;
+                }
+    
+                el.setAttribute('inert', '');
+                this.inertElements.push(el);
+            });
         } else {
             document.body.style.overflow = 'unset';
+
+            if (this.inertElements) {
+                this.inertElements.forEach(el => {
+                    el.removeAttribute('inert');
+                });
+                this.inertElements = null;
+            }
         }
     }
 }

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

 export function focusTrap(event, element, isOpened) {
-    const focusables = 'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]',
-    elements = element.querySelectorAll(focusables),
-    focusableInDialog = Array.from(elements).filter(element => element.tabIndex >= 0),
-    firstFocusable = focusableInDialog[0],
-    lastFocusable = focusableInDialog.at(-1);
-
-    if (!isOpened) {
+    if (!isOpened || event.key !== 'Tab') {
         return;
     }
-    if (!element.contains(event.target) && event.shiftKey) {
-        lastFocusable.focus();
-        event.preventDefault();
+
+    const focusableElements = getFocusableElements(element);
+    if (focusableElements.length === 0) {
+        return;
     }
-    else if (!element.contains(event.target)) {
-        firstFocusable.focus();
+
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+    handleTabLoop(event, firstFocusable, lastFocusable, element);
+}
+
+function getFocusableElements(element) {
+    const focusables = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+    const elements = element.querySelectorAll(focusables);
+    return Array.from(elements).filter(el => !el.disabled && el.tabIndex >= 0);
+}
+
+function handleTabLoop(event, firstFocusable, lastFocusable, element) {
+    const goingBackward = event.shiftKey;
+    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();
     }
 }
+
+function isElementFocused(element, focusableElement) {
+    return document.activeElement === focusableElement || !element.contains(document.activeElement);
+}
\ No newline at end of file

i18n/fr.yml

@@ -79,6 +79,7 @@ commons:
     shortcut_navigation: Navigation d'accès rapide
     transcription: Transcription
   search:
+    label: Recherche
     title: Rechercher
     close: Fermer la recherche
   backtotop: Haut de page

layouts/partials/header/search.html

@@ -7,7 +7,7 @@
 
 <script src="/pagefind/pagefind-ui.js"></script>
 
-<div id="search" class="search__modal" aria-hidden="true" aria-modal="true" role="dialog">
+<div id="search" class="search__modal" aria-hidden="true" aria-modal="true" role="dialog" aria-label="{{ i18n "commons.search.label" }}">
   <button class="search__close" aria-label="{{ i18n "commons.search.close" }}">
     {{ i18n "commons.search.close" }}
   </button>