diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 4ae0846c8781..b34c14fc474f 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/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);">
diff --git a/browser/components/translations/content/translationsPanel.js b/browser/components/translations/content/translationsPanel.js
index 4f513c69a9b3..f7f009e4bc1a 100644
--- a/browser/components/translations/content/translationsPanel.js
+++ b/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();
diff --git a/browser/components/translations/tests/browser/browser.ini b/browser/components/translations/tests/browser/browser.ini
index fd675979720f..f7c3fc19a0c1 100644
--- a/browser/components/translations/tests/browser/browser.ini
+++ b/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]
diff --git a/browser/components/translations/tests/browser/browser_translations_panel_a11y_focus.js b/browser/components/translations/tests/browser/browser_translations_panel_a11y_focus.js
new file mode 100644
index 000000000000..d963e42da59d
--- /dev/null
+++ b/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();
+});
diff --git a/toolkit/components/translations/tests/browser/shared-head.js b/toolkit/components/translations/tests/browser/shared-head.js
index 59167f6e1f5f..dac3bdc3320f 100644
--- a/toolkit/components/translations/tests/browser/shared-head.js
+++ b/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