Bug 1509767: Support keyboard activation (space/enter) of the Back/Forward buttons when focused. r=Gijs

When focused, the Back and Forward buttons previously couldn't be activated by pressing space or enter.
Although they do have a command event handler, they have type="menu", which means the command event is not fired for key presses by default.
Since these buttons are special (in that they have type="menu" and a command event), this change implements specific keyboard behavior for these buttons.

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.js

@@ -474,6 +474,15 @@ const gClickAndHoldListenersOnElement = {
     aButton.removeEventListener("mouseup", this);
   },
 
+  _keypressHandler(aEvent) {
+    if (aEvent.key == " " || aEvent.key == "Enter") {
+      // Normally, command events get fired for keyboard activation. However,
+      // we've set type="menu", so that doesn't happen. Handle this the same
+      // way we handle clicks.
+      aEvent.target.click();
+    }
+  },
+
   handleEvent(e) {
     switch (e.type) {
       case "mouseout":
@@ -488,12 +497,16 @@ const gClickAndHoldListenersOnElement = {
       case "mouseup":
         this._mouseupHandler(e);
         break;
+      case "keypress":
+        this._keypressHandler(e);
+        break;
     }
   },
 
   remove(aButton) {
     aButton.removeEventListener("mousedown", this, true);
     aButton.removeEventListener("click", this, true);
+    aButton.removeEventListener("keypress", this, true);
   },
 
   add(aElm) {
@@ -501,6 +514,7 @@ const gClickAndHoldListenersOnElement = {
 
     aElm.addEventListener("mousedown", this, true);
     aElm.addEventListener("click", this, true);
+    aElm.addEventListener("keypress", this, true);
   },
 };
 

browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js

@@ -17,6 +17,19 @@ function forceFocus(aElem) {
   aElem.removeAttribute("tabindex");
 }
 
+function waitForLocationChange() {
+  let promise = new Promise(resolve => {
+    let wpl = {
+      onLocationChange(aWebProgress, aRequest, aLocation) {
+        gBrowser.removeProgressListener(wpl);
+        resolve();
+      },
+    };
+    gBrowser.addProgressListener(wpl);
+  });
+  return promise;
+}
+
 // Test activation of the app menu button from the keyboard.
 // The app menu should appear and focus should move inside it.
 add_task(async function testAppMenuButtonPress() {
@@ -103,6 +116,28 @@ add_task(async function testPageActionsButtonPress() {
   });
 });
 
+// Test activation of the Back and Forward buttons from the keyboard.
+add_task(async function testBackForwardButtonPress() {
+  await BrowserTestUtils.withNewTab("https://example.com/1", async function(aBrowser) {
+    BrowserTestUtils.loadURI(aBrowser, "https://example.com/2");
+
+    await BrowserTestUtils.browserLoaded(aBrowser);
+    let backButton = document.getElementById("back-button");
+    forceFocus(backButton);
+    let onLocationChange = waitForLocationChange();
+    EventUtils.synthesizeKey(" ");
+    await onLocationChange;
+    ok(true, "Location changed after back button pressed");
+
+    let forwardButton = document.getElementById("forward-button");
+    forceFocus(forwardButton);
+    onLocationChange = waitForLocationChange();
+    EventUtils.synthesizeKey(" ");
+    await onLocationChange;
+    ok(true, "Location changed after forward button pressed");
+  });
+});
+
 // Test activation of the Send Tab to Device button from the keyboard.
 // This is a page action button built at runtime by PageActions.
 // The Send Tab to Device menu should appear and focus should move inside it.