diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js index d13d39494..79910d112 100644 --- a/web/pdf_find_bar.js +++ b/web/pdf_find_bar.js @@ -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; diff --git a/web/viewer.css b/web/viewer.css index 2e4bebc78..e0c1a8a0f 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -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; } diff --git a/web/viewer.html b/web/viewer.html index ca6db0e59..10505b109 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -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 -->