Gestion de l'accessibilité pour la recherche (#681)

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

+/* eslint-disable no-undef */
 import { focusTrap } from '../utils/focus-trap';
 
 class Search {
-    constructor(button, pageFind) {
+    constructor (container) {
         this.state = {
             isOpened: false
         };
-        this.button = button;
+        this.button = document.querySelector('.pagefind-ui__toggle');
         this.element = document.querySelector('.search__modal');
         this.closeButton = this.element.querySelector('.search__close');
-        this.searchInstance = pageFind;
+        this.searchInstance = new PagefindUI({
+            element: container,
+            showSubResults: true,
+            processResult: () => {
+                setTimeout(this.updateAccessibilityMessageRole.bind(this), 1500);
+            }
+        });
 
         if (!this.element) {
             return;
         }
 
         this.listen();
+        this.setAccessibility();
+    }
+
+    setAccessibility () {
+        const input = document.querySelector('.pagefind-ui__search-input');
+        input.setAttribute('title', input.getAttribute('placeholder'));
+
+        // Add element to alert screen reader of the search results
+        this.accessibleMessageContainer = document.createElement('div');
+        this.accessibleMessage = document.createElement('p');
+        this.accessibleMessageContainer.appendChild(this.accessibleMessage);
+        this.accessibleMessageContainer.setAttribute('aria-live', 'polite');
+        this.accessibleMessageContainer.setAttribute('aria-atomic', 'true');
+        this.accessibleMessageContainer.classList.add('sr-only', 'pagefind-ui__accessible-message');
+        this.element.append(this.accessibleMessageContainer);
     }
 
-    listen() {
-        if (document.body.querySelector(".toc-cta")) {
+    updateAccessibilityMessageRole () {
+        const message = this.element.querySelector('.pagefind-ui__message');
+        this.accessibleMessage.innerText = message.innerText;
+    }
+
+    listen () {
+        if (document.body.querySelector('.toc-cta')) {
             this.button.classList.add('in-page-with-toc');
         }
         this.button.addEventListener('click', () => {
@@ -39,8 +66,7 @@ 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');
@@ -52,37 +78,37 @@ class Search {
         });
     }
 
-    clearSearch() {
-        const button = this.element.querySelector('.pagefind-ui__button');
-        const message =  this.element.querySelector('.pagefind-ui__message');
-        const results = this.element.querySelector('.pagefind-ui__results')
-            
-        this.input.value = "";
+    clearSearch () {
+        const button = this.element.querySelector('.pagefind-ui__button'),
+            message = this.element.querySelector('.pagefind-ui__message'),
+            results = this.element.querySelector('.pagefind-ui__results');
+
+        this.input.value = '';
         this.searchInstance.triggerSearch(false);
 
         if (message) {
-            message.innerText = "";
+            message.innerText = '';
         }
         if (results) {
-            results.innerHTML = "";
+            results.innerHTML = '';
         }
         if (button) {
             button.parentElement.removeChild(button);
         }
     }
 
-    buttonMoreFocus() {
+    buttonMoreFocus () {
         const observer = new MutationObserver(mutations => {
             mutations.forEach(mutation => {
-            mutation.addedNodes.forEach(addedNode => {
-                if (addedNode instanceof HTMLAnchorElement) {
-                    addedNode.focus();
-                }
+                mutation.addedNodes.forEach(addedNode => {
+                    if (addedNode instanceof HTMLAnchorElement) {
+                        addedNode.focus();
+                    }
                 });
             });
-        });  
-        const observerConfig = { childList: true, subtree: true };
-        observer.observe(this.element, observerConfig);
+        });
+
+        observer.observe(this.element, { childList: true, subtree: true });
     }
 
     toggle(open = !this.state.isOpened) {
@@ -101,7 +127,7 @@ class Search {
                 if (el === this.element || this.element.contains(el) || el.contains(this.element)) {
                     return;
                 }
-    
+
                 el.setAttribute('inert', '');
                 this.inertElements.push(el);
             });
@@ -120,19 +146,11 @@ class Search {
 
 // Selectors
 window.addEventListener('DOMContentLoaded', () => {
-    const pageFindSearch = document.querySelector("#search");
+    const pageFindContainer = document.querySelector('#search');
 
-    if (typeof PagefindUI == "undefined") return;
+    if (typeof PagefindUI === 'undefined') return;
 
-    if (pageFindSearch) {
-        let pageFind = new PagefindUI({
-            element: pageFindSearch,
-            showSubResults: true
-        });
-        (function () {
-            const searchButton = document.querySelector(".pagefind-ui__toggle");
-            new Search(searchButton, pageFind);
-        })();
+    if (pageFindContainer) {
+        new Search(pageFindContainer);
     }
-
 });