Bug 1515543: Support keyboard activation (space/enter) of toolbar overflow buttons when focused. r=Gijs
authorJames Teh <jteh@mozilla.com>
Mon, 04 Mar 2019 06:48:43 +0000
changeset 520076 fa59aea64e12
parent 520075 76475dd4031b
child 520077 8cdde0ff59a1
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1515543
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1515543: Support keyboard activation (space/enter) of toolbar overflow buttons when focused. r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D21614
browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
browser/components/customizableui/CustomizableUI.jsm
--- a/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
+++ b/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
@@ -242,8 +242,27 @@ add_task(async function testBookmarksmen
   EventUtils.synthesizeKey(" ");
   await shown;
   ok(true, "Bookmarks Menu shown after toolbar button pressed");
   let hidden = BrowserTestUtils.waitForEvent(menu, "popuphidden");
   menu.hidePopup();
   await hidden;
   CustomizableUI.reset();
 });
+
+// Test activation of the overflow button from the keyboard.
+// The overflow menu should appear and focus should move inside it.
+add_task(async function testOverflowButtonPress() {
+  // Move something to the overflow menu to make the button appear.
+  CustomizableUI.addWidgetToArea("developer-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+  let button = document.getElementById("nav-bar-overflow-button");
+  forceFocus(button);
+  let view = document.getElementById("widget-overflow-mainView");
+  let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
+  EventUtils.synthesizeKey(" ");
+  await focused;
+  ok(true, "Focus inside overflow menu after toolbar button pressed");
+  let panel = document.getElementById("widget-overflow");
+  let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
+  panel.hidePopup();
+  await hidden;
+  CustomizableUI.reset();
+});
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -4282,16 +4282,17 @@ OverflowableToolbar.prototype = {
     let window = doc.defaultView;
     window.addEventListener("resize", this);
     window.gNavToolbox.addEventListener("customizationstarting", this);
     window.gNavToolbox.addEventListener("aftercustomization", this);
 
     let chevronId = this._toolbar.getAttribute("overflowbutton");
     this._chevron = doc.getElementById(chevronId);
     this._chevron.addEventListener("mousedown", this);
+    this._chevron.addEventListener("keypress", this);
     this._chevron.addEventListener("dragover", this);
     this._chevron.addEventListener("dragend", this);
 
     let panelId = this._toolbar.getAttribute("overflowpanel");
     this._panel = doc.getElementById(panelId);
     this._panel.addEventListener("popuphiding", this);
     CustomizableUIInternal.addPanelCloseListeners(this._panel);
 
@@ -4318,17 +4319,18 @@ OverflowableToolbar.prototype = {
     }
 
     this._disable();
 
     let window = this._toolbar.ownerGlobal;
     window.removeEventListener("resize", this);
     window.gNavToolbox.removeEventListener("customizationstarting", this);
     window.gNavToolbox.removeEventListener("aftercustomization", this);
-    this._chevron.removeEventListener("command", this);
+    this._chevron.removeEventListener("mousedown", this);
+    this._chevron.removeEventListener("keypress", this);
     this._chevron.removeEventListener("dragover", this);
     this._chevron.removeEventListener("dragend", this);
     this._panel.removeEventListener("popuphiding", this);
     CustomizableUI.removeListener(this);
     this._addedListener = false;
     CustomizableUIInternal.removePanelCloseListeners(this._panel);
   },
 
@@ -4358,16 +4360,22 @@ OverflowableToolbar.prototype = {
           break;
         }
         if (aEvent.target == this._chevron) {
           this._onClickChevron(aEvent);
         } else {
           PanelMultiView.hidePopup(this._panel);
         }
         break;
+      case "keypress":
+        if (aEvent.target == this._chevron &&
+            (aEvent.key == " " || aEvent.key == "Enter")) {
+          this._onClickChevron(aEvent);
+        }
+        break;
       case "customizationstarting":
         this._disable();
         break;
       case "dragover":
         if (this._enabled) {
           this._showWithTimeout();
         }
         break;