Portals: Make HTMLPortalElement keyboard focusable

Also simulates a click when clicking enter/space when a portal is
focused (similar to buttons).

Bug: 1043127
Change-Id: I0b1a35cd978c191a958dea0ed47bf737cac7292f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1995940
Commit-Queue: Adithya Srinivasan <adithyas@chromium.org>
Reviewed-by: Jeremy Roman <jbroman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#732989}

third_party/blink/renderer/core/html/forms/html_button_element.cc

@@ -120,33 +120,8 @@ void HTMLButtonElement::DefaultEventHandlerInternal(Event& event) {
     }
   }
 
-  if (event.IsKeyboardEvent()) {
-    if (event.type() == event_type_names::kKeydown &&
-        ToKeyboardEvent(event).key() == " ") {
-      SetActive(true);
-      // No setDefaultHandled() - IE dispatches a keypress in this case.
-      return;
-    }
-    if (event.type() == event_type_names::kKeypress) {
-      switch (ToKeyboardEvent(event).charCode()) {
-        case '\r':
-          DispatchSimulatedClick(&event);
-          event.SetDefaultHandled();
-          return;
-        case ' ':
-          // Prevent scrolling down the page.
-          event.SetDefaultHandled();
-          return;
-      }
-    }
-    if (event.type() == event_type_names::kKeyup &&
-        ToKeyboardEvent(event).key() == " ") {
-      if (IsActive())
-        DispatchSimulatedClick(&event);
-      event.SetDefaultHandled();
-      return;
-    }
-  }
+  if (HandleKeyboardActivation(event))
+    return;
 
   HTMLFormControlElement::DefaultEventHandler(event);
 }

third_party/blink/renderer/core/html/html_element.cc

@@ -1391,6 +1391,37 @@ void HTMLElement::DefaultEventHandler(Event& event) {
   Element::DefaultEventHandler(event);
 }
 
+bool HTMLElement::HandleKeyboardActivation(Event& event) {
+  if (event.IsKeyboardEvent()) {
+    if (event.type() == event_type_names::kKeydown &&
+        ToKeyboardEvent(event).key() == " ") {
+      SetActive(true);
+      // No setDefaultHandled() - IE dispatches a keypress in this case.
+      return true;
+    }
+    if (event.type() == event_type_names::kKeypress) {
+      switch (ToKeyboardEvent(event).charCode()) {
+        case '\r':
+          DispatchSimulatedClick(&event);
+          event.SetDefaultHandled();
+          return true;
+        case ' ':
+          // Prevent scrolling down the page.
+          event.SetDefaultHandled();
+          return true;
+      }
+    }
+    if (event.type() == event_type_names::kKeyup &&
+        ToKeyboardEvent(event).key() == " ") {
+      if (IsActive())
+        DispatchSimulatedClick(&event);
+      event.SetDefaultHandled();
+      return true;
+    }
+  }
+  return false;
+}
+
 bool HTMLElement::MatchesReadOnlyPseudoClass() const {
   return !MatchesReadWritePseudoClass();
 }

third_party/blink/renderer/core/html/html_element.h

@@ -119,6 +119,10 @@ class CORE_EXPORT HTMLElement : public Element {
   virtual bool IsInteractiveContent() const;
   void DefaultEventHandler(Event&) override;
 
+  // Used to handle return/space key events and simulate clicks. Returns true
+  // if the event is handled.
+  bool HandleKeyboardActivation(Event& event);
+
   static const AtomicString& EventNameForAttributeName(
       const QualifiedName& attr_name);
 

third_party/blink/renderer/core/html/portal/html_portal_element.cc

@@ -342,6 +342,12 @@ void HTMLPortalElement::RemovedFrom(ContainerNode& node) {
   HTMLFrameOwnerElement::RemovedFrom(node);
 }
 
+void HTMLPortalElement::DefaultEventHandler(Event& event) {
+  if (HandleKeyboardActivation(event))
+    return;
+  HTMLFrameOwnerElement::DefaultEventHandler(event);
+}
+
 bool HTMLPortalElement::IsURLAttribute(const Attribute& attribute) const {
   return attribute.GetName() == html_names::kSrcAttr ||
          HTMLFrameOwnerElement::IsURLAttribute(attribute);
@@ -388,6 +394,10 @@ LayoutObject* HTMLPortalElement::CreateLayoutObject(const ComputedStyle& style,
   return new LayoutIFrame(this);
 }
 
+bool HTMLPortalElement::SupportsFocus() const {
+  return true;
+}
+
 void HTMLPortalElement::DisconnectContentFrame() {
   HTMLFrameOwnerElement::DisconnectContentFrame();
   ConsumePortal();

third_party/blink/renderer/core/html/portal/html_portal_element.h

@@ -101,11 +101,13 @@ class CORE_EXPORT HTMLPortalElement : public HTMLFrameOwnerElement {
   // Node overrides
   InsertionNotificationRequest InsertedInto(ContainerNode&) override;
   void RemovedFrom(ContainerNode&) override;
+  void DefaultEventHandler(Event&) override;
 
   // Element overrides
   bool IsURLAttribute(const Attribute&) const override;
   void ParseAttribute(const AttributeModificationParams&) override;
   LayoutObject* CreateLayoutObject(const ComputedStyle&, LegacyLayout) override;
+  bool SupportsFocus() const override;
 
   // HTMLFrameOwnerElement overrides
   void DisconnectContentFrame() override;

third_party/blink/web_tests/external/wpt/portals/portals-focus.sub.html

@@ -86,19 +86,47 @@
   }, "test that a x-origin iframe inside an adopted portal cannot steal focus");
 
   const TAB = "\ue004"; // https://w3c.github.io/webdriver/#keyboard-actions
+  const SPACE = " "
+  const RETURN = "\r";
+
   promise_test(async t => {
     let portal = await createPortal(document, "resources/focus-page-with-button.html");
     try {
-      portal.tabIndex = 0;
       await test_driver.send_keys(document.body, TAB);
-      portal.onmessage = t.step_func(e => {
-        assert_unreached("button inside portal should not be focused");
-      });
+      portal.onmessage = t.unreached_func("button inside portal should not be focused");
+      await new Promise(r => t.step_timeout(r, 500));
+    } finally {
+      document.body.removeChild(portal);
+    }
+  }, "test that a portal is keyboard focusable");
+
+  promise_test(async t => {
+    let portal = await createPortal(document, "resources/focus-page-with-button.html");
+    try {
+      let portalFocusPromise = new Promise(r => portal.onfocus = r);
+      portal.onmessage = t.unreached_func("button inside portal should not be focused");
+      await test_driver.send_keys(document.body, TAB);
+      await portalFocusPromise;
+      await test_driver.send_keys(document.body, TAB);
       await new Promise(r => t.step_timeout(r, 500));
     } finally {
       document.body.removeChild(portal);
     }
   }, "test that we cannot tab into a portal's contents");
 
+  promise_test(async t => {
+    let portal = await createPortal(document, "resources/simple-portal.html");
+    try {
+      portal.focus();
+      for (let key of [SPACE, RETURN]) {
+        let clickPromise = new Promise(r => portal.onclick = r);
+        await test_driver.send_keys(document.body, key);
+        await clickPromise;
+      }
+    } finally {
+      document.body.removeChild(portal);
+    }
+  }, "test that a portal is keyboard activatable");
+
 </script>
 </body>

third_party/blink/web_tests/external/wpt/portals/resources/focus-page-with-button.html

@@ -18,7 +18,12 @@
       let portal = e.adoptPredecessor();
       document.body.appendChild(portal);
       portal.onmessage = handleMessage;
-    }
+    };
+
+    window.onfocus = () => {
+      if (window.portalHost)
+        window.portalHost.postMessage("window focused", "*");
+    };
   </script>
   <button>A</button>
 </body>