From 5539ed541f3913beedd6cbf075536d94fbc4dfe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Tue, 28 Nov 2023 07:58:01 +0000
Subject: [PATCH] Bug 1866069 - Announce title and description on the
 contextual opt-in row when selecting the first element (i.e. the learn more
 link). r=daleharvey

This is a hack for the experiment and likely not ideal for screen readers, but better than what we have. I'm reaching out to a11y folks to figure out the right long-term solution here. I'll make an effort to get that ready for the experiment too, but would like to get this landed as a backup.

Differential Revision: https://phabricator.services.mozilla.com/D194501
---
 ...roviderQuickSuggestContextualOptIn.sys.mjs | 21 +++++++++++++++++++
 .../urlbar/UrlbarSearchOneOffs.sys.mjs        | 14 ++++++++++---
 browser/components/urlbar/UrlbarUtils.sys.mjs | 12 +++++++++++
 browser/components/urlbar/UrlbarView.sys.mjs  | 13 ++++++++----
 4 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/browser/components/urlbar/UrlbarProviderQuickSuggestContextualOptIn.sys.mjs b/browser/components/urlbar/UrlbarProviderQuickSuggestContextualOptIn.sys.mjs
index c9bf8564116ef..70470a9578b84 100644
--- a/browser/components/urlbar/UrlbarProviderQuickSuggestContextualOptIn.sys.mjs
+++ b/browser/components/urlbar/UrlbarProviderQuickSuggestContextualOptIn.sys.mjs
@@ -171,6 +171,27 @@ class ProviderQuickSuggestContextualOptIn extends UrlbarProvider {
     };
   }
 
+  onBeforeSelection(result, element) {
+    if (element.getAttribute("name") == "learn_more") {
+      this.#a11yAlertRow(element.closest(".urlbarView-row"));
+    }
+  }
+
+  #a11yAlertRow(row) {
+    let alertText = row.querySelector(
+      ".urlbarView-dynamic-quickSuggestContextualOptIn-title"
+    ).textContent;
+    let decription = row
+      .querySelector(
+        ".urlbarView-dynamic-quickSuggestContextualOptIn-description"
+      )
+      .cloneNode(true);
+    // Remove the "Learn More" link.
+    decription.firstElementChild?.remove();
+    alertText += ". " + decription.textContent;
+    row.ownerGlobal.A11yUtils.announce({ raw: alertText });
+  }
+
   onEngagement(state, queryContext, details, controller) {
     let { result } = details;
     if (result?.providerName != this.name) {
diff --git a/browser/components/urlbar/UrlbarSearchOneOffs.sys.mjs b/browser/components/urlbar/UrlbarSearchOneOffs.sys.mjs
index dfb8134756a63..e757102974d94 100644
--- a/browser/components/urlbar/UrlbarSearchOneOffs.sys.mjs
+++ b/browser/components/urlbar/UrlbarSearchOneOffs.sys.mjs
@@ -188,12 +188,16 @@ export class UrlbarSearchOneOffs extends SearchOneOffs {
     this.#quickSuggestOptInProvider._recordGlean("impression");
   }
 
-  #handleQuickSuggestOptInCommand(element) {
-    if (
+  #isQuickSuggestOptInElement(element) {
+    return (
       this.#quickSuggestOptInContainer &&
       element.compareDocumentPosition(this.#quickSuggestOptInContainer) &
         Node.DOCUMENT_POSITION_CONTAINS
-    ) {
+    );
+  }
+
+  #handleQuickSuggestOptInCommand(element) {
+    if (this.#isQuickSuggestOptInElement(element)) {
       this.#quickSuggestOptInProvider._handleCommand(
         element,
         this.queryContext,
@@ -243,6 +247,10 @@ export class UrlbarSearchOneOffs extends SearchOneOffs {
       return;
     }
 
+    if (this.#isQuickSuggestOptInElement(button)) {
+      this.#quickSuggestOptInProvider.onBeforeSelection(null, button);
+    }
+
     super.selectedButton = button;
 
     let expectedSearchMode;
diff --git a/browser/components/urlbar/UrlbarUtils.sys.mjs b/browser/components/urlbar/UrlbarUtils.sys.mjs
index 27239e736bc79..7e43bad506293 100644
--- a/browser/components/urlbar/UrlbarUtils.sys.mjs
+++ b/browser/components/urlbar/UrlbarUtils.sys.mjs
@@ -2409,6 +2409,18 @@ export class UrlbarProvider {
    */
   onEngagement(state, queryContext, details, controller) {}
 
+  /**
+   * Called before a result from the provider is selected. See `onSelection`
+   * for details on what that means.
+   *
+   * @param {UrlbarResult} result
+   *   The result that was selected.
+   * @param {Element} element
+   *   The element in the result's view that was selected.
+   * @abstract
+   */
+  onBeforeSelection(result, element) {}
+
   /**
    * Called when a result from the provider is selected. "Selected" refers to
    * the user highlighing the result with the arrow keys/Tab, before it is
diff --git a/browser/components/urlbar/UrlbarView.sys.mjs b/browser/components/urlbar/UrlbarView.sys.mjs
index 11d3bcfab29e3..5ecfdb57b246d 100644
--- a/browser/components/urlbar/UrlbarView.sys.mjs
+++ b/browser/components/urlbar/UrlbarView.sys.mjs
@@ -2354,10 +2354,18 @@ export class UrlbarView {
         row?.toggleAttribute("selected", true);
       }
     }
+
+    let result = row?.result;
+    let provider = lazy.UrlbarProvidersManager.getProvider(
+      result?.providerName
+    );
+    if (provider) {
+      provider.tryMethod("onBeforeSelection", result, element);
+    }
+
     this.#setAccessibleFocus(setAccessibleFocus && element);
     this.#selectedElement = element;
 
-    let result = row?.result;
     if (updateInput) {
       let urlOverride = null;
       if (element?.classList?.contains("urlbarView-button")) {
@@ -2369,9 +2377,6 @@ export class UrlbarView {
       this.input.setResultForCurrentValue(result);
     }
 
-    let provider = lazy.UrlbarProvidersManager.getProvider(
-      result?.providerName
-    );
     if (provider) {
       provider.tryMethod("onSelection", result, element);
     }