From a923c3ade54a263ac8799d6ab6be31233d48ba9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <balbeza@mozilla.com>
Date: Wed, 1 Aug 2018 15:11:26 +0000
Subject: [PATCH] Bug 1478686 - Fix cycling focus with keyboard on slotted
 nodes. r=jdescottes r=jdescottes

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

--HG--
extra : moz-landing-system : lando
---
 .../client/inspector/markup/test/browser.ini  |  1 +
 ...markup_shadowdom_slotted_keyboard_focus.js | 72 +++++++++++++++++++
 .../markup/views/slotted-node-container.js    |  2 +
 3 files changed, 75 insertions(+)
 create mode 100644 devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js

diff --git a/devtools/client/inspector/markup/test/browser.ini b/devtools/client/inspector/markup/test/browser.ini
index 448c753dcc64..97c2ab1a7190 100644
--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -180,6 +180,7 @@ subsuite = clipboard
 [browser_markup_shadowdom_open_debugger.js]
 [browser_markup_shadowdom_shadowroot_mode.js]
 [browser_markup_shadowdom_show_nodes_button.js]
+[browser_markup_shadowdom_slotted_keyboard_focus.js]
 [browser_markup_shadowdom_slotupdate.js]
 [browser_markup_tag_delete_whitespace_node.js]
 [browser_markup_tag_edit_01.js]
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js
new file mode 100644
index 000000000000..eed8dd55c17a
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotted_keyboard_focus.js
@@ -0,0 +1,72 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that cycling focus with keyboard (via TAB key) in slotted nodes works.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function() {
+  await enableWebComponents();
+
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  const win = inspector.markup.doc.defaultView;
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+  await expandContainer(inspector, slotContainer);
+
+  info("Select the slotted container for the element");
+  const node = slotContainer.getChildContainers()[0].node;
+  const container = inspector.markup.getContainer(node, true);
+  await selectNode(node, inspector, "no-reason", true);
+
+  const root = inspector.markup.getContainer(inspector.markup._rootNode);
+  root.elt.focus();
+  const tagSpan = container.elt.querySelector(".tag");
+  const revealLink = container.elt.querySelector(".reveal-link");
+
+  info("Hit Enter to focus on the first element");
+  let tagFocused = once(tagSpan, "focus");
+  EventUtils.synthesizeAndWaitKey("KEY_Enter", {}, win);
+  await tagFocused;
+
+  info("Hit Tab to focus on the next element");
+  const linkFocused = once(revealLink, "focus");
+  EventUtils.synthesizeKey("KEY_Tab", {}, win);
+  await linkFocused;
+
+  info("Hit Tab again to cycle focus to the first element");
+  tagFocused = once(tagSpan, "focus");
+  EventUtils.synthesizeKey("KEY_Tab", {}, win);
+  await tagFocused;
+
+  ok(inspector.markup.doc.activeElement === tagSpan,
+    "Focus has gone back to first element");
+});
diff --git a/devtools/client/inspector/markup/views/slotted-node-container.js b/devtools/client/inspector/markup/views/slotted-node-container.js
index aa284b47e866..8d0697d6e9f0 100644
--- a/devtools/client/inspector/markup/views/slotted-node-container.js
+++ b/devtools/client/inspector/markup/views/slotted-node-container.js
@@ -41,6 +41,8 @@ SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
   },
 
   _onKeyDown: function(event) {
+    MarkupContainer.prototype._onKeyDown.call(this, event);
+
     const isActionKey = event.code == "Enter" || event.code == "Space";
     if (event.target.classList.contains("reveal-link") && isActionKey) {
       this._revealFromSlot();