Fixed accessibility issue with search result list

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 %}

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>

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(

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>