From a5cbdaa54edf28ce18b08224e49895b8b91d943b Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Wed, 26 Mar 2025 21:56:46 +0000
Subject: [PATCH] Make search results accessible for screen readers

---
 www/index.html | 6 +++---
 www/js/app.js  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/www/index.html b/www/index.html
index 4ba1b9c3..9a374fd4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -231,7 +231,7 @@
             <nav id="navbar" class="navbar navbar-inverse" role="navigation">
                 <div class="container-fluid">
                     <div class="navbar-header" id="container">
-                        <form id="formArticleSearch">
+                        <form id="formArticleSearch" role="search" aria-label="Search articles">
                             <div class="" id="row">
                                 <span class="input-group">
                                     <span class="input-group-btn">
@@ -1338,8 +1338,8 @@
                 </div>
                 <!-- List of articles matching the typed prefix -->
                 <div id="articleListWithHeader" style="display: none;" class="container">
-                    <span id="articleListHeaderMessage"></span>
-                    <div id="articleList" class="list-group">
+                    <span id="articleListHeaderMessage" aria-live="polite"></span>
+                    <div id="articleList" class="list-group" role="listbox">
                     </div>
                 </div>
             </div>
diff --git a/www/js/app.js b/www/js/app.js
index dc27d60b..7f6fedf1 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -4815,7 +4815,7 @@ function showZIMIndex (start, search) {
                 var dirEntry = dirEntryArray[i];
                 // NB Ensure you use double quotes for HTML attributes below - see comment in populateListOfArticles
                 newHtml += '\n<a  class="list-group-item" href="#" dirEntryId="' + encodeURIComponent(dirEntry.toStringId()) +
-                    '">' + (appstate.search.searchUrlIndex ? dirEntry.namespace + '/' + dirEntry.url : '' + dirEntry.getTitleOrUrl()) + '</a>';
+                    '" role="option">' + (appstate.search.searchUrlIndex ? dirEntry.namespace + '/' + dirEntry.url : '' + dirEntry.getTitleOrUrl()) + '</a>';
             }
             start = start || 0;
             var back = start ? '<a href="#" data-start="' + (start - params.maxSearchResultsSize) +
@@ -4978,7 +4978,7 @@ function populateListOfArticles (dirEntryArray, reportingSearch) {
         var dirEntryTitle = dirEntry.getTitleOrUrl();
         dirEntryTitle = dirEntryTitle.replace(/&lt;([ib])>([^&]+)&lt;\/\1>/g, '<$1>$2</$1>');
         articleListDivHtml += '<a href="#" dirEntryId="' + dirEntryStringId +
-            '" class="list-group-item">' + (reportingSearch.searchUrlIndex ? dirEntry.namespace + '/' + dirEntry.url : '' + dirEntryTitle) + '</a>';
+            '" class="list-group-item" role="option">' + (reportingSearch.searchUrlIndex ? dirEntry.namespace + '/' + dirEntry.url : '' + dirEntryTitle) + '</a>';
     }
     articleListDiv.innerHTML = articleListDivHtml;
     // We have to use mousedown below instead of click as otherwise the prefix blur event fires first