From 966da4babe6ee28913119d3990e0711cb112ea03 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 31 Mar 2022 23:12:56 +0200
Subject: [PATCH] [GENERIC viewer] Try to improve a11y, for search results, in
 the findbar (issue 14525)

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
---
 web/pdf_find_bar.js | 1 +
 web/viewer.css      | 5 +++--
 web/viewer.html     | 6 ++----
 3 files changed, 6 insertions(+), 6 deletions(-)

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