Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[GENERIC viewer] Try to improve a11y, for search results, in the findbar (issue 14525)

Browse Source 
Note that it seemed necessary to re-factor the `findResultsCount` and `findMsg` element grouping, in the HTML/CSS code, in order those elements to be correctly announced by a11y software in Firefox.

The following MDN articles may be helpful here:
 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
This commit is contained in:
Jonas Jenwald 2022-03-31 23:12:56 +02:00
parent 54d4d345d3
commit 966da4babe
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/pdf_find_bar.js
View File

@ -127,6 +127,7 @@ class PDFFindBar {
break;
}
this.findField.setAttribute("data-status", status);
this.findField.setAttribute("aria-invalid", state === FindState.NOT_FOUND);
findMsg.then(msg => {
this.findMsg.textContent = msg;

5
web/viewer.css
View File

@ -447,10 +447,11 @@ select {
.findbar > div {
height: 32px;
}
.findbar.wrapContainers > div {
.findbar.wrapContainers > div,
.findbar.wrapContainers > div#findbarMessageContainer > * {
clear: both;
}
.findbar.wrapContainers > div.findbarMessageContainer {
.findbar.wrapContainers > div#findbarMessageContainer {
height: auto;
}

6
web/viewer.html
View File

@ -116,7 +116,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="mainContainer">
<div class="findbar hidden doorHanger" id="findbar">
<div id="findbarInputContainer">
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input">
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input" aria-invalid="false">
<div class="splitToolbarButton">
<button id="findPrevious" class="toolbarButton findPrevious" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
<span data-l10n-id="find_previous_label">Previous</span>
@ -141,10 +141,8 @@ See https://github.com/adobe-type-tools/cmap-resources
<label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole Words</label>
</div>
<div class="findbarMessageContainer">
<div id="findbarMessageContainer" aria-live="polite">
<span id="findResultsCount" class="toolbarLabel"></span>
</div>
<div class="findbarMessageContainer">
<span id="findMsg" class="toolbarLabel"></span>
</div>
</div> <!-- findbar -->