Bug 1975799 - Capture focus events in the IP Protection panel to allow keyboard navigation. r=ip-protection-reviewers,rking,kpatenio

- Updates the PanelMultiView TreeWalker filter to accept elements with `data-captures-focus="true"` and handle those elements like iframes, delegating focus handling to the element.
- Captures focus for `ipprotection-content` and adds a focus method to make sure the connection toggle is the first element focused.
- Adds a key handler in `ipprotection-content` to allow arrow navigation.
- Delegate focus in `ipprotection-signedout` to allow focusing its contents.

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

Author: fchasen

browser/components/customizableui/PanelMultiView.sys.mjs

@@ -1595,15 +1595,17 @@ export var PanelView = class extends AssociatedToNode {
         localName == "a" ||
         localName == "moz-toggle" ||
         node.classList.contains("text-link") ||
-        (!arrowKey && isNavigableWithTabOnly)
+        (!arrowKey && isNavigableWithTabOnly) ||
+        node.dataset?.capturesFocus === "true"
       ) {
         // Set the tabindex attribute to make sure the node is focusable.
         // Don't do this for browser and iframe elements because this breaks
         // tabbing behavior. They're already focusable anyway.
         if (
           localName != "browser" &&
           localName != "iframe" &&
-          !node.hasAttribute("tabindex")
+          !node.hasAttribute("tabindex") &&
+          node.dataset?.capturesFocus !== "true"
         ) {
           node.setAttribute("tabindex", "-1");
         }
@@ -1779,9 +1781,14 @@ export var PanelView = class extends AssociatedToNode {
       focus = null;
     }
 
-    // Some panels contain embedded documents. We can't manage
-    // keyboard navigation within those.
-    if (focus && (focus.tagName == "browser" || focus.tagName == "iframe")) {
+    // Some panels contain embedded documents or need to capture focus events.
+    // We can't manage keyboard navigation within those.
+    if (
+      focus &&
+      (focus.tagName == "browser" ||
+        focus.tagName == "iframe" ||
+        focus.dataset?.capturesFocus === "true")
+    ) {
       return;
     }
 

browser/components/customizableui/test/browser_PanelMultiView_keyboard.js

@@ -34,6 +34,10 @@ let gBrowserBrowser;
 let gIframeView;
 let gIframeIframe;
 let gToggle;
+let gComponentView;
+let gShadowRoot;
+let gShadowRootButtonA;
+let gShadowRootButtonB;
 
 async function openPopup() {
   let shown = BrowserTestUtils.waitForEvent(gMainView, "ViewShown");
@@ -207,6 +211,24 @@ add_setup(async function () {
   gIframeIframe.setAttribute("src", kEmbeddedDocUrl);
   gIframeView.appendChild(gIframeIframe);
 
+  gComponentView = document.createXULElement("panelview");
+  gComponentView.id = "testComponentView";
+  gPanelMultiView.appendChild(gComponentView);
+  // Shadow root that delegates focus with multiple buttons
+  gShadowRoot = document.createElement("section");
+  gShadowRoot.id = "gShadowRoot";
+  gShadowRoot.dataset.navigableWithTabOnly = "true";
+  gShadowRoot.attachShadow({ mode: "open", delegatesFocus: true });
+  gShadowRootButtonA = document.createElement("moz-button");
+  gShadowRootButtonA.id = "gShadowRootButtonA";
+  gShadowRootButtonA.label = "Button A";
+  gShadowRootButtonB = document.createElement("moz-button");
+  gShadowRootButtonB.id = "gShadowRootButtonB";
+  gShadowRootButtonB.label = "Button B";
+  gShadowRoot.shadowRoot.appendChild(gShadowRootButtonA);
+  gShadowRoot.shadowRoot.appendChild(gShadowRootButtonB);
+  gComponentView.appendChild(gShadowRoot);
+
   registerCleanupFunction(() => {
     gAnchor.remove();
     gPanel.remove();
@@ -580,3 +602,28 @@ add_task(async function testMozToggle() {
   is(gToggle.pressed, false, "Toggle pressed state changes via enter.");
   await hidePopup();
 });
+
+// Test that tab key is not overridden in elements that capture focus.
+add_task(async function testTabCapturesFocus() {
+  await openPopup();
+  await showSubView(gComponentView);
+
+  let backButton = gComponentView.querySelector(".subviewbutton-back");
+  backButton.id = "shadowBack";
+  await expectFocusAfterKey("Tab", backButton);
+
+  // Only Button A can be navigated to before looping to back button.
+  await expectFocusAfterKey("Tab", gShadowRootButtonA);
+
+  await expectFocusAfterKey("Tab", backButton);
+
+  gShadowRoot.dataset.capturesFocus = "true";
+
+  // Both buttons can be focused before looping.
+  await expectFocusAfterKey("Tab", gShadowRootButtonA);
+  await expectFocusAfterKey("Tab", gShadowRootButtonB);
+
+  await expectFocusAfterKey("Tab", backButton);
+
+  await hidePopup();
+});

browser/components/ipprotection/IPProtection.sys.mjs

@@ -172,6 +172,20 @@ class IPProtectionWidget {
     }
   }
 
+  /**
+   * Get the IPProtectionPanel for q given window.
+   *
+   * @param {Window} window - which window to get the panel for.
+   * @returns {IPProtectionPanel}
+   */
+  getPanel(window) {
+    if (!this.#created || !window?.PanelUI) {
+      return null;
+    }
+
+    return this.#panels.get(window);
+  }
+
   /**
    * Remove all panels content, but maintains state for if the widget is
    * re-enabled in the same window.

browser/components/ipprotection/IPProtectionPanel.sys.mjs

@@ -195,6 +195,8 @@ export class IPProtectionPanel {
     );
     this.panel = contentEl;
 
+    contentEl.dataset.capturesFocus = "true";
+
     this.#addPanelListeners(ownerDocument);
 
     panelView.appendChild(contentEl);

browser/components/ipprotection/content/ipprotection-content.mjs

@@ -17,6 +17,7 @@ const DEFAULT_TIME_CONNECTED = "00:00:00";
 export default class IPProtectionContentElement extends MozLitElement {
   static queries = {
     headerEl: "ipprotection-header",
+    signedOutEl: "ipprotection-signedout",
     statusCardEl: "#status-card",
     connectionTitleEl: "#connection-title",
     connectionToggleEl: "#connection-toggle",
@@ -32,15 +33,21 @@ export default class IPProtectionContentElement extends MozLitElement {
     super();
 
     this.state = {};
+
+    this.keyListener = this.#keyListener.bind(this);
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.dispatchEvent(new CustomEvent("IPProtection:Init", { bubbles: true }));
+
+    this.addEventListener("keydown", this.keyListener, { capture: true });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
+
+    this.removeEventListener("keydown", this.keyListener, { capture: true });
   }
 
   handleClickSupportLink(event) {
@@ -69,6 +76,38 @@ export default class IPProtectionContentElement extends MozLitElement {
     // TODO: Handle click of Upgrade button - Bug 1975317
   }
 
+  focus() {
+    if (!this.state.isSignedIn) {
+      this.signedOutEl?.focus();
+    } else {
+      this.connectionToggleEl?.focus();
+    }
+  }
+
+  #keyListener(event) {
+    let keyCode = event.code;
+    switch (keyCode) {
+      case "ArrowUp":
+      // Intentional fall-through
+      case "ArrowDown": {
+        event.stopPropagation();
+        event.preventDefault();
+
+        let direction =
+          keyCode == "ArrowDown"
+            ? Services.focus.MOVEFOCUS_FORWARD
+            : Services.focus.MOVEFOCUS_BACKWARD;
+        Services.focus.moveFocus(
+          window,
+          null,
+          direction,
+          Services.focus.FLAG_BYKEY
+        );
+        break;
+      }
+    }
+  }
+
   statusCardTemplate() {
     const statusCardL10nId = this.state.isProtectionEnabled
       ? "ipprotection-connection-status-on"

browser/components/ipprotection/content/ipprotection-signedout.mjs

@@ -6,6 +6,11 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 import { html } from "chrome://global/content/vendor/lit.all.mjs";
 
 export default class IPProtectionSignedOutContentElement extends MozLitElement {
+  static shadowRootOptions = {
+    ...MozLitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   constructor() {
     super();
   }

browser/components/ipprotection/tests/browser/browser.toml

@@ -13,6 +13,8 @@ prefs = [
 
 ["browser_ipprotection_header.js"]
 
+["browser_ipprotection_keyboard_navigation.js"]
+
 ["browser_ipprotection_panel.js"]
 
 ["browser_ipprotection_toolbar.js"]

browser/components/ipprotection/tests/browser/browser_ipprotection_keyboard_navigation.js

@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Borrowed from browser_PanelMultiView_keyboard.js
+async function expectFocusAfterKey(aKey, aFocus) {
+  let res = aKey.match(/^(Shift\+)?(.+)$/);
+  let shift = Boolean(res[1]);
+  let key;
+  if (res[2].length == 1) {
+    key = res[2]; // Character.
+  } else {
+    key = "KEY_" + res[2]; // Tab, ArrowRight, etc.
+  }
+  info("Waiting for focus on " + aFocus.id);
+  let focused = BrowserTestUtils.waitForEvent(aFocus, "focus");
+  EventUtils.synthesizeKey(key, { shiftKey: shift });
+  await focused;
+  ok(true, aFocus.id + " focused after " + aKey + " pressed");
+}
+
+/**
+ * Tests that the panel can be navigated with Tab and Arrow keys.
+ */
+add_task(async function test_keyboard_navigation_in_panel() {
+  let content = await openPanel({
+    isSignedIn: true,
+  });
+
+  Assert.ok(
+    BrowserTestUtils.isVisible(content),
+    "ipprotection-content component should be present"
+  );
+
+  await expectFocusAfterKey("Tab", content.connectionToggleEl);
+  await expectFocusAfterKey("Tab", content.upgradeEl.querySelector("a"));
+  await expectFocusAfterKey(
+    "Tab",
+    content.upgradeEl.querySelector("#upgrade-vpn-button")
+  );
+  await expectFocusAfterKey("Tab", content.headerEl.helpButtonEl);
+  // Loop back around
+  await expectFocusAfterKey("Tab", content.connectionToggleEl);
+
+  await expectFocusAfterKey("ArrowDown", content.upgradeEl.querySelector("a"));
+  await expectFocusAfterKey(
+    "ArrowDown",
+    content.upgradeEl.querySelector("#upgrade-vpn-button")
+  );
+  await expectFocusAfterKey("ArrowDown", content.headerEl.helpButtonEl);
+  // Loop back around
+  await expectFocusAfterKey("ArrowDown", content.connectionToggleEl);
+
+  // Loop backwards
+  await expectFocusAfterKey("Shift+Tab", content.headerEl.helpButtonEl);
+
+  await closePanel();
+});

browser/components/ipprotection/tests/browser/head.js

@@ -1,6 +1,18 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+const { IPProtectionPanel } = ChromeUtils.importESModule(
+  "resource:///modules/ipprotection/IPProtectionPanel.sys.mjs"
+);
+
+const { IPProtectionWidget } = ChromeUtils.importESModule(
+  "resource:///modules/ipprotection/IPProtection.sys.mjs"
+);
+
+const { IPProtection } = ChromeUtils.importESModule(
+  "resource:///modules/ipprotection/IPProtection.sys.mjs"
+);
+
 // Adapted from devtools/client/performance-new/test/browser/helpers.js
 function waitForPanelEvent(document, eventName) {
   return BrowserTestUtils.waitForEvent(document, eventName, false, event => {
@@ -11,3 +23,77 @@ function waitForPanelEvent(document, eventName) {
   });
 }
 /* exported waitForPanelEvent */
+
+const defaultState = new IPProtectionPanel().state;
+
+/**
+ * Opens the IP Protection panel with a given state, waits for the content to be ready
+ * and returns the content element.
+ *
+ * @param {object} state - The state to set for the panel.
+ * @param {Window} win - The window the panel should be opened in.
+ * @returns {Promise<IPProtectionContentElement>} - The <ipprotection-content> element of the panel.
+ */
+async function openPanel(state = defaultState, win = window) {
+  let panel = IPProtection.getPanel(win);
+  panel.setState(state);
+
+  IPProtection.openPanel(win);
+
+  let panelShownPromise = waitForPanelEvent(win.document, "popupshown");
+  let panelInitPromise = BrowserTestUtils.waitForEvent(
+    win.document,
+    "IPProtection:Init"
+  );
+  await Promise.all([panelShownPromise, panelInitPromise]);
+
+  let panelView = PanelMultiView.getViewNode(
+    win.document,
+    IPProtectionWidget.PANEL_ID
+  );
+  let content = panelView.querySelector(IPProtectionPanel.CONTENT_TAGNAME);
+
+  await content.updateComplete;
+
+  return content;
+}
+/* exported openPanel */
+
+/**
+ * Sets the state of the IP Protection panel and waits for the content to be updated.
+ *
+ * @param {object} state - The state to set for the panel.
+ * @param {Window} win - The window the panel is in.
+ * @returns {Promise<void>}
+ */
+async function setPanelState(state = defaultState, win = window) {
+  let panel = IPProtection.getPanel(win);
+  panel.setState(state);
+
+  let panelView = PanelMultiView.getViewNode(
+    win.document,
+    IPProtectionWidget.PANEL_ID
+  );
+  let content = panelView.querySelector(IPProtectionPanel.CONTENT_TAGNAME);
+
+  await content.updateComplete;
+}
+
+/* exported setPanelState */
+
+/**
+ * Closes the IP Protection panel and resets the state to the default.
+ *
+ * @param {Window} win - The window the panel is in.
+ * @returns {Promise<void>}
+ */
+async function closePanel(win = window) {
+  // Reset the state
+  let panel = IPProtection.getPanel(win);
+  panel.setState(defaultState);
+  // Close the panel
+  let panelHiddenPromise = waitForPanelEvent(win.document, "popuphidden");
+  panel.close();
+  await panelHiddenPromise;
+}
+/* exported closePanel */