tor-browser

commit 471dcac98ccebf520fbdf0d10c3ed56189c8a55e
parent cad026ec7d15595fe06d164c6a3c9287341e3f34
Author: mark <mkennedy@mozilla.com>
Date:   Tue,  9 Dec 2025 12:03:33 +0000

Bug 2002958 - Fix initial focusing when accessing a sub page from keyboard or mouse click r=akulyk

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

Diffstat:
M
browser/components/preferences/tests/browser_setting_pane_sub_pane.js
 | 
21
+++++++++++++++++++++
M
browser/components/preferences/widgets/setting-pane/setting-pane.mjs
 | 
26
++++++++++++++++++++++++++

2 files changed, 47 insertions(+), 0 deletions(-)
diff --git a/browser/components/preferences/tests/browser_setting_pane_sub_pane.js b/browser/components/preferences/tests/browser_setting_pane_sub_pane.js
@@ -81,6 +81,27 @@ describe("setting-pane", () => {
     let backButton = pageHeader.backButtonEl;
     ok(backButton, "There is a back button");
 
+    /**
+     * Must dispatch paneshown event manually to have
+     * focus fire after contents on the page have loaded
+     * to replicate what happens in non-test environment.
+     */
+    doc.dispatchEvent(
+      new CustomEvent("paneshown", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          category: "paneTestSubPane",
+        },
+      })
+    );
+    const checkbox = pane.querySelector("moz-checkbox");
+    is(
+      doc.activeElement,
+      checkbox,
+      "First element on the page (moz-checkbox) should be focused after pane is shown"
+    );
+
     // Go back
     paneLoaded = waitForPaneChange("privacy");
     EventUtils.synthesizeMouseAtCenter(backButton, {}, win);
diff --git a/browser/components/preferences/widgets/setting-pane/setting-pane.mjs b/browser/components/preferences/widgets/setting-pane/setting-pane.mjs
@@ -50,6 +50,32 @@ export class SettingPane extends MozLitElement {
 
   connectedCallback() {
     super.connectedCallback();
+
+    document.addEventListener(
+      "paneshown",
+      /**
+       * @param {CustomEvent} e
+       */
+      e => {
+        if (this.isSubPane && e.detail.category === this.name) {
+          /**
+           * Automatically focus to the first focusable element in the
+           * sub page when it's accessed, which is always the Back Button.
+           */
+          this.pageHeaderEl.backButtonEl.focus();
+          /**
+           * ...but execute moveFocus here to move to the very
+           * next focusable element after the Back button (if there is one).
+           */
+          Services.focus.moveFocus(
+            window,
+            null,
+            Services.focus.MOVEFOCUS_FORWARD,
+            Services.focus.FLAG_BYJS
+          );
+        }
+      }
+    );
     this.setAttribute("data-category", this.name);
     this.hidden = true;
     if (this.isSubPane) {