kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-08 03:37:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make search results accessible for screen readers

Browse Source
This commit is contained in:
Jaifroid 2025-03-26 21:56:46 +00:00
parent 4f9d131202
commit a5cbdaa54e
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
www/index.html
View File

@ -231,7 +231,7 @@
<nav id="navbar" class="navbar navbar-inverse" role="navigation"> <nav id="navbar" class="navbar navbar-inverse" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header" id="container"> <div class="navbar-header" id="container">
<form id="formArticleSearch"> <form id="formArticleSearch" role="search" aria-label="Search articles">
<div class="" id="row"> <div class="" id="row">
<span class="input-group"> <span class="input-group">
<span class="input-group-btn"> <span class="input-group-btn">
@ -1338,8 +1338,8 @@
</div> </div>
<!-- List of articles matching the typed prefix --> <!-- List of articles matching the typed prefix -->
<div id="articleListWithHeader" style="display: none;" class="container"> <div id="articleListWithHeader" style="display: none;" class="container">
<span id="articleListHeaderMessage"></span> <span id="articleListHeaderMessage" aria-live="polite"></span>
<div id="articleList" class="list-group"> <div id="articleList" class="list-group" role="listbox">
</div> </div>
</div> </div>
</div> </div>

4
www/js/app.js
View File

@ -4815,7 +4815,7 @@ function showZIMIndex (start, search) {
var dirEntry = dirEntryArray[i]; var dirEntry = dirEntryArray[i];
// NB Ensure you use double quotes for HTML attributes below - see comment in populateListOfArticles // 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()) + 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; start = start || 0;
var back = start ? '<a href="#" data-start="' + (start - params.maxSearchResultsSize) + var back = start ? '<a href="#" data-start="' + (start - params.maxSearchResultsSize) +
@ -4978,7 +4978,7 @@ function populateListOfArticles (dirEntryArray, reportingSearch) {
var dirEntryTitle = dirEntry.getTitleOrUrl(); var dirEntryTitle = dirEntry.getTitleOrUrl();
dirEntryTitle = dirEntryTitle.replace(/&lt;([ib])>([^&]+)&lt;\/\1>/g, '<$1>$2</$1>'); dirEntryTitle = dirEntryTitle.replace(/&lt;([ib])>([^&]+)&lt;\/\1>/g, '<$1>$2</$1>');
articleListDivHtml += '<a href="#" dirEntryId="' + dirEntryStringId + 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; articleListDiv.innerHTML = articleListDivHtml;
// We have to use mousedown below instead of click as otherwise the prefix blur event fires first // We have to use mousedown below instead of click as otherwise the prefix blur event fires first