Bug 1444300 - Make tab button to be able to handle the key event. r?honza draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Wed, 28 Mar 2018 09:25:08 +0900
changeset 773498 95ead16ce2b4bdc3802dca2210055d7022384a72
parent 772787 de32269720d056972b85f4eec5f0a8286de6e3af
push id104245
push userbmo:mantaroh@gmail.com
push dateWed, 28 Mar 2018 00:25:57 +0000
reviewershonza
bugs1444300
milestone61.0a1
Bug 1444300 - Make tab button to be able to handle the key event. r?honza A command button like ruler has keydown event handler, this patch will add same event handler to tab button. MozReview-Commit-ID: LRtQD2X9Lh1
devtools/client/framework/components/toolbox-tab.js
devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
--- a/devtools/client/framework/components/toolbox-tab.js
+++ b/devtools/client/framework/components/toolbox-tab.js
@@ -57,16 +57,21 @@ class ToolboxTab extends Component {
         id: `toolbox-tab-${id}`,
         "data-id": id,
         title: tooltip,
         type: "button",
         "aria-pressed": currentToolId === id ? "true" : "false",
         tabIndex: focusedButton === id ? "0" : "-1",
         onFocus: () => focusButton(id),
         onMouseDown: () => selectTool(id),
+//        onKeyDown: (evt) => {
+//          if (evt.key === "Enter" || evt.key === "Space") {
+//            selectTool(id);
+//          }
+//        },
       },
       span(
         {
           className: "devtools-tab-line"
         }
       ),
       ...this.renderIcon(panelDefinition, isHighlighted),
       iconOnly ?
--- a/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
+++ b/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
@@ -76,8 +76,47 @@ add_task(async function () {
   EventUtils.synthesizeKey("KEY_Tab");
   ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
 
   // Move the focus back to the toolbar, ensure we land on the last active
   // descendant control.
   EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true});
   is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
 });
+
+// Test that moving the focus of tab button and selecting it.
+add_task(async function () {
+  info("Create a test tab and open the toolbox");
+  let toolbox = await openNewTabAndToolbox(TEST_URL, "inspector");
+  let doc = toolbox.doc;
+
+  let toolbar = doc.querySelector(".toolbox-tabs");
+  let tabButtons = toolbar.querySelectorAll(".devtools-tab, button");
+  let win = tabButtons[0].ownerDocument.defaultView;
+
+  // Put the keyboard focus onto the first tab button.
+  tabButtons[0].focus();
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbox");
+  is(doc.activeElement.id, tabButtons[0].id, "First tab button is focused.");
+
+  // Move the focused tab and select it by using enter key.
+  let onKeyEvent = once(win, "keydown");
+  EventUtils.synthesizeKey("KEY_ArrowRight");
+  await onKeyEvent;
+
+  let onceSelected = toolbox.once("webconsole-selected");
+  EventUtils.synthesizeKey("Enter");
+  await onceSelected;
+  ok(doc.activeElement.id, tabButtons[1].id, "Changed tab button is focuesd.");
+
+  tabButtons[1].focus();
+
+  // Return the focused tab with space key.
+  onKeyEvent = once(win, "keydown");
+  EventUtils.synthesizeKey("KEY_ArrowLeft");
+  await onKeyEvent;
+
+  onceSelected = toolbox.once("inspector-selected");
+  EventUtils.synthesizeKey("Space");
+  await onceSelected;
+
+  ok(doc.activeElement.id, tabButtons[0].id, "Changed tab button is focuesd.");
+});