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
dothq · Nov 28, 2023 · 5539ed5 · 5539ed5
1 parent 7a95763
commit 5539ed5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
     }