Fixed accessibility issue with search result list

squidfunk · Jan 14, 2023 · a200e7d · a200e7d
1 parent 89a77c5
commit a200e7d
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 11 deletions.
diff --git a/...assets/javascripts/bundle.ba449ae6.min.js → ...assets/javascripts/bundle.51d95adb.min.js b/...assets/javascripts/bundle.ba449ae6.min.js → ...assets/javascripts/bundle.51d95adb.min.js
diff --git a/...ts/javascripts/bundle.ba449ae6.min.js.map → ...ts/javascripts/bundle.51d95adb.min.js.map b/...ts/javascripts/bundle.ba449ae6.min.js.map → ...ts/javascripts/bundle.51d95adb.min.js.map
diff --git a/material/base.html b/material/base.html
@@ -240,7 +240,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.ba449ae6.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.51d95adb.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

diff --git a/material/partials/search.html b/material/partials/search.html
@@ -30,7 +30,7 @@
           <div class="md-search-result__meta">
             {{ lang.t("search.result.initializer") }}
           </div>
-          <ol class="md-search-result__list"></ol>
+          <ol class="md-search-result__list" role="presentation"></ol>
         </div>
       </div>
     </div>

diff --git a/src/assets/javascripts/components/search/result/index.ts b/src/assets/javascripts/components/search/result/index.ts
@@ -46,7 +46,8 @@ import { translation } from "~/_"
 import {
   getElement,
   getOptionalElement,
-  watchElementBoundary
+  watchElementBoundary,
+  watchToggle
 } from "~/browser"
 import {
   SearchMessage,
@@ -103,6 +104,12 @@ export function mountSearchResult(
   const meta = getElement(":scope > :first-child", el)
   const list = getElement(":scope > :last-child", el)
 
+  /* Reveal to accessibility tree – see https://bit.ly/3iAA7t8 */
+  watchToggle("search")
+    .subscribe(active => list.setAttribute(
+      "role", active ? "list" : "presentation"
+    ))
+
   /* Update search result metadata */
   push$
     .pipe(

diff --git a/src/partials/search.html b/src/partials/search.html
@@ -97,7 +97,7 @@
           <div class="md-search-result__meta">
             {{ lang.t("search.result.initializer") }}
           </div>
-          <ol class="md-search-result__list"></ol>
+          <ol class="md-search-result__list" role="presentation"></ol>
         </div>
       </div>
     </div>