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 fa59aea64e120e5be00269d062c2f04569278320
parent 520075 76475dd4031be7f326f25d5bff12126365962002
child 520077 8cdde0ff59a15f59736e810524a649a4c8a5a7ef
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;