Bug 1871980 - Add a programmatic role and expanded/collapsed state to the Search expand/collapse image button on the Searchbar. r=search-reviewers,Standard8,Jamie

`searchbar-search-button` includes two `<image>` elements, one of which is aimed to visually communicate that this `overlay` image could expand/collapse the search autosuggest list. This `<hbox>` that has an accessible name but lacks an appropriate interactive role and state, because it functions as a button (not focusable with keyboard because the alternative - `Escape` key - exists and works to collapse the autosuggest list and we do not want to create an additional tab stop for keyboard-only users). This would prevent users of speech-to-text/Voice Control from being able to send a click to it by calling its label and screen reader users and users of other assistive technology would not be able to get to this control via shortcuts like a list of controls, etc.

This issue is similar to the `Go` button on the URL bar resolved in the bug 1864962 and to the `Submit search` button tracked in bug 1871596

To activate the searchbar next to the URL Bar that includes this go button: `about:preferences` > `Search` > `Search Bar` > select `Add search bar in toolbar`.

Depends on D199504

Differential Revision: https://phabricator.services.mozilla.com/D197335

accessible/tests/browser/tree/browser_searchbar.js

@@ -31,6 +31,12 @@ add_task(async function test_searchbar_a11y_tree() {
     role: ROLE_EDITCOMBOBOX,
 
     children: [
+      // image button toggling the results list
+      {
+        role: ROLE_BUTTONMENU,
+        children: [],
+      },
+
       // input element
       {
         role: ROLE_ENTRY,
@@ -64,6 +70,12 @@ add_task(async function test_searchbar_a11y_tree() {
     role: ROLE_EDITCOMBOBOX,
 
     children: [
+      // image button toggling the results list
+      {
+        role: ROLE_BUTTONMENU,
+        children: [],
+      },
+
       // input element
       {
         role: ROLE_ENTRY,

browser/components/search/content/searchbar.js

@@ -32,7 +32,7 @@
     static get markup() {
       return `
         <stringbundle src="chrome://browser/locale/search.properties"></stringbundle>
-        <hbox class="searchbar-search-button" data-l10n-id="searchbar-icon">
+        <hbox class="searchbar-search-button" data-l10n-id="searchbar-icon" role="button" keyNav="false" aria-expanded="false" aria-controls="PopupSearchAutoComplete" aria-haspopup="true">
           <image class="searchbar-search-icon"></image>
           <image class="searchbar-search-icon-overlay"></image>
         </hbox>
@@ -263,6 +263,8 @@
       }
 
       this._textbox.showHistoryPopup();
+      let searchIcon = document.querySelector(".searchbar-search-button");
+      searchIcon.setAttribute("aria-expanded", "true");
 
       if (this._textbox.value) {
         // showHistoryPopup does a startSearch("") call, ensure the
@@ -563,6 +565,8 @@
         // Hide popup when icon is clicked while popup is open
         if (isIconClick && this.textbox.popup.popupOpen) {
           this.textbox.popup.closePopup();
+          let searchIcon = document.querySelector(".searchbar-search-button");
+          searchIcon.setAttribute("aria-expanded", "false");
         } else if (isIconClick || this._textbox.value) {
           // Open the suggestions whenever clicking on the search icon or if there
           // is text in the textbox.
@@ -703,6 +707,8 @@
         }
 
         let popup = this.textbox.popup;
+        let searchIcon = document.querySelector(".searchbar-search-button");
+        searchIcon.setAttribute("aria-expanded", popup.popupOpen);
         if (popup.popupOpen) {
           let suggestionsHidden =
             popup.richlistbox.getAttribute("collapsed") == "true";
@@ -732,6 +738,7 @@
         }
 
         let popup = this.textbox.popup;
+        let searchIcon = document.querySelector(".searchbar-search-button");
         if (!popup.mPopupOpen) {
           // Initially the panel used for the searchbar (PopupSearchAutoComplete
           // in browser.xhtml) is hidden to avoid impacting startup / new
@@ -763,6 +770,7 @@
           popup.style.setProperty("--panel-width", width + "px");
           popup._invalidate();
           popup.openPopup(this, "after_start");
+          searchIcon.setAttribute("aria-expanded", "true");
         }
       };
 

browser/components/search/test/browser/browser.toml

@@ -90,7 +90,6 @@ skip-if = [
 ]
 
 ["browser_searchbar_openpopup.js"]
-fail-if = ["a11y_checks"] # Bug 1871980 Search expand/collapse image button needs a programmatic role and expanded/collapsed state
 
 ["browser_searchbar_results.js"]
 

browser/components/search/test/browser/browser_searchbar_openpopup.js

@@ -104,6 +104,11 @@ add_task(async function open_empty() {
 
   let promise = promiseEvent(searchPopup, "popupshown");
   info("Clicking icon");
+  is(
+    searchIcon.getAttribute("aria-expanded"),
+    "false",
+    "The search icon is not expanded by default"
+  );
   EventUtils.synthesizeMouseAtCenter(searchIcon, {});
   await promise;
   is(
@@ -111,6 +116,11 @@ add_task(async function open_empty() {
     "true",
     "Should only show the settings"
   );
+  is(
+    searchIcon.getAttribute("aria-expanded"),
+    "true",
+    "The search icon is now expanded"
+  );
   is(textbox.mController.searchString, "", "Should be an empty search string");
 
   let image = searchPopup.querySelector(".searchbar-engine-image");
@@ -140,6 +150,11 @@ add_task(async function open_empty() {
     "",
     "Should not have started to search for the new text"
   );
+  is(
+    searchIcon.getAttribute("aria-expanded"),
+    "false",
+    "The search icon should not be expanded"
+  );
 
   // Cancel the search if it started.
   if (textbox.mController.searchString != "") {