Bug 1608554: Initialize toolbartabstops in dynamically added widgets. r=Gijs

When ToolbarKeyboardNavigator initializes, it sets aria-hidden and adds a focus listener on toolbartabstop elements.
This is necessary for proper functionality of toolbar keyboard navigation.
However, widgets can be dynamically added by CustomizableUI after ToolbarKeyboardNavigator initializes.
The search bar is one such widget and it does contain toolbartabstop elements.
We now watch for this and initialize any toolbartabstop elements inside added widgets.

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-toolbarKeyNav.js

@@ -86,6 +86,16 @@ ToolbarKeyboardNavigator = {
     return aRoot._toolbarKeyNavWalker;
   },
 
+  _initTabStops(aRoot) {
+    for (let stop of aRoot.getElementsByTagName("toolbartabstop")) {
+      // These are invisible, but because they need to be in the tab order,
+      // they can't get display: none or similar. They must therefore be
+      // explicitly hidden for accessibility.
+      stop.setAttribute("aria-hidden", "true");
+      stop.addEventListener("focus", this);
+    }
+  },
+
   init() {
     for (let id of this.kToolbars) {
       let toolbar = document.getElementById(id);
@@ -93,16 +103,11 @@ ToolbarKeyboardNavigator = {
       // We manage toolbar focus completely. This attribute ensures that CSS
       // doesn't set -moz-user-focus: normal.
       toolbar.setAttribute("keyNav", "true");
-      for (let stop of toolbar.getElementsByTagName("toolbartabstop")) {
+      this._initTabStops(toolbar);
-        // These are invisible, but because they need to be in the tab order,
-        // they can't get display: none or similar. They must therefore be
-        // explicitly hidden for accessibility.
-        stop.setAttribute("aria-hidden", "true");
-        stop.addEventListener("focus", this);
-      }
       toolbar.addEventListener("keydown", this);
       toolbar.addEventListener("keypress", this);
     }
+    CustomizableUI.addListener(this);
   },
 
   uninit() {
@@ -115,6 +120,19 @@ ToolbarKeyboardNavigator = {
       toolbar.removeEventListener("keypress", this);
       toolbar.removeAttribute("keyNav");
     }
+    CustomizableUI.removeListener(this);
+  },
+
+  // CustomizableUI event handler
+  onWidgetAdded(aWidgetId, aArea, aPosition) {
+    if (!this.kToolbars.includes(aArea)) {
+      return;
+    }
+    let widget = document.getElementById(aWidgetId);
+    if (!widget) {
+      return;
+    }
+    this._initTabStops(widget);
   },
 
   _focusButton(aButton) {

browser/base/content/test/keyboard/browser_toolbarKeyNav.js

@@ -452,3 +452,16 @@ add_task(async function testCharacterInPanelMultiView() {
   view.closest("panel").hidePopup();
   await hidden;
 });
+
+// Test tab stops after the search bar is added.
+add_task(async function testTabStopsAfterSearchBarAdded() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.search.widget.inNavBar", 1]],
+  });
+  await withNewBlankTab(async function() {
+    startFromUrlBar();
+    await expectFocusAfterKey("Tab", "searchbar", true);
+    await expectFocusAfterKey("Tab", "library-button");
+  });
+  await SpecialPowers.popPrefEnv();
+});