Bug 1835361 - Pass keypress events to the translations openPopup to fix focus issue; r=nordzilla

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

browser/base/content/navigator-toolbox.inc.xhtml

@@ -378,7 +378,8 @@
                     role="button"
                     data-l10n-id="urlbar-translations-button"
                     hidden="true"
-                    onclick="TranslationsPanel.open(event);">
+                    onclick="TranslationsPanel.open(event);"
+                    onkeypress="TranslationsPanel.open(event);">
                 <image class="urlbar-icon" id="translations-button-icon" />
                 <image class="urlbar-icon" id="translations-button-circle-arrows" />
                 <html:span id="translations-button-locale" />

browser/components/translations/content/translationsPanel.js

@@ -857,6 +857,17 @@ var TranslationsPanel = new (class {
    * @param {Event} event
    */
   async open(event) {
+    event.stopPropagation();
+    if (
+      (event.type == "click" && event.button != 0) ||
+      (event.type == "keypress" &&
+        event.charCode != KeyEvent.DOM_VK_SPACE &&
+        event.keyCode != KeyEvent.DOM_VK_RETURN)
+    ) {
+      // Allow only left click, space, or enter.
+      return;
+    }
+
     const { panel, button } = this.elements;
 
     await this.#ensureLangListsBuilt();

browser/components/translations/tests/browser/browser.ini

@@ -4,6 +4,7 @@ support-files =
   !/toolkit/components/translations/tests/browser/shared-head.js
   !/toolkit/components/translations/tests/browser/translations-test.mjs
 [browser_manage_languages.js]
+[browser_translations_panel_a11y_focus.js]
 [browser_translations_panel_always_translate_language.js]
 [browser_translations_panel_basics.js]
 [browser_translations_panel_beta_langs.js]

browser/components/translations/tests/browser/browser_translations_panel_a11y_focus.js

@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests the a11y focus behavior.
+ */
+add_task(async function test_translations_panel_a11y_focus() {
+  const { cleanup } = await loadTestPage({
+    page: SPANISH_PAGE_URL,
+    languagePairs: LANGUAGE_PAIRS,
+  });
+
+  const { button } = await assertTranslationsButton(
+    { button: true },
+    "The button is available."
+  );
+
+  await waitForTranslationsPopupEvent("popupshown", () => {
+    hitEnterKey(button, "Opening the popup with the Enter key.");
+  });
+
+  is(
+    document.activeElement.getAttribute("data-l10n-id"),
+    "translations-panel-settings-button",
+    "The settings button is focused."
+  );
+
+  await cleanup();
+});

toolkit/components/translations/tests/browser/shared-head.js

@@ -838,6 +838,16 @@ function click(button, message) {
   button.click();
 }
 
+function hitEnterKey(button, message) {
+  info(message);
+  button.dispatchEvent(
+    new KeyboardEvent("keypress", {
+      key: "Enter",
+      keyCode: KeyboardEvent.DOM_VK_RETURN,
+    })
+  );
+}
+
 /**
  * @param {Object} options
  * @param {string} options.message