Bug 1444300 - Make tab button to be able to handle the key event. r=honza
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Tue, 03 Apr 2018 09:42:44 +0900
changeset 776582 efce674123ace94d821157b996f0d5caa7380620
parent 776581 94517f503a19c36363ff4f6df6b26b242f2453f5
child 776583 4a3275936ddf871103b53e00608e2b8d5aee7e69
child 776614 2aa17423a375570a5471dbac2a3789106d906f83
push id104907
push userbmo:ato@sny.no
push dateTue, 03 Apr 2018 10:28:20 +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.
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 === " ") {
+            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,49 @@ 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 focused.");
+
+  // Webconsole steal the focus from button after sending "webconsole-selected"
+  // event.
+  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(" ");
+  await onceSelected;
+
+  ok(doc.activeElement.id, tabButtons[0].id, "Changed tab button is focused.");
+});