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