Bug 1868707 - Make Clear-icon control in the search field in Firefox …

…View keyboard actionable. r=fxview-reviewers,kcochrane

Ensuring the `Enter` and `Space` keys are working to activate the Clear button in Firefox View and adding a few tests to prevent regressions.

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

browser/components/firefoxview/fxview-search-textbox.mjs

@@ -41,9 +41,15 @@ export default class FxviewSearchTextbox extends MozLitElement {
   }
 
   clear(event) {
-    this.query = "";
-    event.preventDefault();
-    this.#dispatchQueryEvent();
+    if (
+      event.type == "click" ||
+      (event.type == "keydown" && event.code == "Enter") ||
+      (event.type == "keydown" && event.code == "Space")
+    ) {
+      this.query = "";
+      event.preventDefault();
+      this.#dispatchQueryEvent();
+    }
   }
 
   #dispatchQueryEvent() {
@@ -73,6 +79,7 @@ export default class FxviewSearchTextbox extends MozLitElement {
         tabindex="0"
         ?hidden=${!this.query}
         @click=${this.clear}
+        @keydown=${this.clear}
         data-l10n-id="firefoxview-search-text-box-clear-button"
       ></div>
     </div>`;

browser/components/firefoxview/tests/browser/firefoxview-next/browser_history_firefoxview_next.js

@@ -469,5 +469,33 @@ add_task(async function test_search_history() {
         historyComponent.cards.length ===
         historyComponent.historyMapByDate.length
     );
+
+    info("Input a bogus search query.");
+    EventUtils.synthesizeMouseAtCenter(searchTextbox, {}, content);
+    EventUtils.sendString("Bogus Query", content);
+    await TestUtils.waitForCondition(() => {
+      const tabList = historyComponent.lists[0];
+      return tabList?.shadowRoot.querySelector("fxview-empty-state");
+    }, "There are no matching search results.");
+
+    info("Clear the search query with keyboard.");
+    is(
+      historyComponent.shadowRoot.activeElement,
+      searchTextbox,
+      "Search input is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Tab", {}, content);
+    ok(
+      searchTextbox.clearButton.matches(":focus-visible"),
+      "Clear Search button is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Enter", {}, content);
+    await BrowserTestUtils.waitForMutationCondition(
+      historyComponent.shadowRoot,
+      { childList: true, subtree: true },
+      () =>
+        historyComponent.cards.length ===
+        historyComponent.historyMapByDate.length
+    );
   });
 });

browser/components/firefoxview/tests/browser/firefoxview-next/browser_opentabs_cards.js

@@ -426,6 +426,39 @@ add_task(async function search_open_tabs() {
       () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
       "The new window's list is restored."
     );
+
+    info("Input a search query.");
+    EventUtils.synthesizeMouseAtCenter(openTabs.searchTextbox, {}, content);
+    EventUtils.sendString(TEST_URL, content);
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length === 0,
+      "There are no matching search results in the original window."
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[1].tabList.rowEls.length === 1,
+      "There is one matching search result in the new window."
+    );
+
+    info("Clear the search query with keyboard.");
+    is(
+      openTabs.shadowRoot.activeElement,
+      openTabs.searchTextbox,
+      "Search input is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Tab", {}, content);
+    ok(
+      openTabs.searchTextbox.clearButton.matches(":focus-visible"),
+      "Clear Search button is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Enter", {}, content);
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
+      "The original window's list is restored."
+    );
+    await TestUtils.waitForCondition(
+      () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
+      "The new window's list is restored."
+    );
   });
 
   await SpecialPowers.popPrefEnv();

browser/components/firefoxview/tests/browser/firefoxview-next/browser_recentlyclosed_firefoxview_next.js

@@ -572,6 +572,21 @@ add_task(async function test_search() {
       () => tabList.shadowRoot.querySelector("fxview-empty-state"),
       "There are no matching search results."
     );
+
+    info("Clear the search query with keyboard.");
+    EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content);
+
+    is(
+      recentlyClosedComponent.shadowRoot.activeElement,
+      searchTextbox,
+      "Search input is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Tab", {}, content);
+    EventUtils.synthesizeKey("KEY_Enter", {}, content);
+    await TestUtils.waitForCondition(
+      () => listElem.rowEls.length === expectedURLs.length,
+      "The original list is restored."
+    );
   });
   await cleanup();
 });

browser/components/firefoxview/tests/browser/firefoxview-next/browser_syncedtabs_firefoxview_next.js

@@ -518,6 +518,61 @@ add_task(async function search_synced_tabs() {
           .length === deviceTwoTabs.length,
       "The new devices's list is restored."
     );
+
+    info("Input a search query.");
+    EventUtils.synthesizeMouseAtCenter(
+      syncedTabsComponent.searchTextbox,
+      {},
+      content
+    );
+    EventUtils.sendString("Mozilla", content);
+    await TestUtils.waitForCondition(
+      () => syncedTabsComponent.fullyUpdated,
+      "Synced Tabs component is done updating."
+    );
+    cards = syncedTabsComponent.cardEls;
+    deviceOneTabs = cards[0].querySelector("fxview-tab-list").rowEls;
+    deviceTwoTabs = cards[1].querySelector("fxview-tab-list");
+    await TestUtils.waitForCondition(
+      () => deviceOneTabs.length === 1,
+      "There is one matching search result for the first device."
+    );
+    await TestUtils.waitForCondition(
+      () => !deviceTwoTabs,
+      "There are no matching search results for the second device."
+    );
+
+    info("Clear the search query with keyboard.");
+    is(
+      syncedTabsComponent.shadowRoot.activeElement,
+      syncedTabsComponent.searchTextbox,
+      "Search input is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Tab", {}, content);
+    ok(
+      syncedTabsComponent.searchTextbox.clearButton.matches(":focus-visible"),
+      "Clear Search button is focused"
+    );
+    EventUtils.synthesizeKey("KEY_Enter", {}, content);
+    await TestUtils.waitForCondition(
+      () => syncedTabsComponent.fullyUpdated,
+      "Synced Tabs component is done updating."
+    );
+    cards = syncedTabsComponent.cardEls;
+    deviceOneTabs = cards[0].querySelector("fxview-tab-list").rowEls;
+    deviceTwoTabs = cards[1].querySelector("fxview-tab-list").rowEls;
+    await TestUtils.waitForCondition(
+      () =>
+        syncedTabsComponent.cardEls[0].querySelector("fxview-tab-list").rowEls
+          .length === deviceOneTabs.length,
+      "The original device's list is restored."
+    );
+    await TestUtils.waitForCondition(
+      () =>
+        syncedTabsComponent.cardEls[1].querySelector("fxview-tab-list").rowEls
+          .length === deviceTwoTabs.length,
+      "The new devices's list is restored."
+    );
   });
   await SpecialPowers.popPrefEnv();
   await tearDown(sandbox);