[a11y] Modification des tags de la recherche (#791)

osunyorg · Nov 28, 2024 · 3005a46 · 3005a46
1 parent e244f24
commit 3005a46
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/assets/js/theme/design-system/search.js b/assets/js/theme/design-system/search.js
@@ -48,10 +48,35 @@ class Search {
                 this.accessibleMessage = document.createElement('p');
                 this.accessibleMessageContainer.appendChild(this.accessibleMessage);
             }
-            setTimeout(this.updateAccessibilityMessageRole.bind(this), speakDelay);
+            clearTimeout(this.a11yTimeout);
+            this.a11yTimeout = setTimeout(this.updateAccessibility.bind(this), speakDelay);
         });
     }
 
+    updateAccessibility () {
+        this.updateAccessibilityMessageRole();
+        this.updateAccessibilityTags();
+    }
+
+    updateAccessibilityTags () {
+        const results = this.element.querySelectorAll('.pagefind-ui__result');
+
+        results.forEach(this.updateAccessibilityResult);
+    }
+
+    updateAccessibilityResult (result) {
+        let image = result.querySelector('img'),
+            title = result.querySelector('.pagefind-ui__result-title');
+
+        if (image) {
+            image.setAttribute('alt', '');
+        }
+        if (title) {
+            title.setAttribute('role', 'heading');
+            title.setAttribute('aria-level', '2');
+        }
+    }
+
     updateAccessibilityMessageRole () {
         const message = this.element.querySelector('.pagefind-ui__message');
         if (!message) {

diff --git a/layouts/partials/header/search.html b/layouts/partials/header/search.html
@@ -11,4 +11,5 @@
   <button class="search__close" aria-label="{{ i18n "commons.search.close" }}">
     {{ i18n "commons.search.close" }}
   </button>
+  <p role="heading" aria-level="1" class="sr-only">{{ i18n "commons.search.title" }}</p>
 </div>