Bug 1712869 - Set keyboard focus on the correct button for each screen of the upgrade modal r=Mardak

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

browser/base/content/upgradeDialog.js

@@ -141,6 +141,8 @@ function onLoad(ready) {
 
     // Move to the next screen and perform screen-specific behavior.
     const strings = await SCREEN_STRINGS[++current];
+    // Set the correct target for keyboard focus.
+    let toFocus = primary;
     switch (current) {
       // Handle initial / first screen setup.
       case 0:
@@ -221,7 +223,8 @@ function onLoad(ready) {
 
         // Prepare the initial theme selection and wait for theme button clicks.
         const { id, swatch } = await gPrevTheme;
-        themes.children[THEME_IDS.indexOf(id)].checked = true;
+        toFocus = themes.children[THEME_IDS.indexOf(id)];
+        toFocus.checked = true;
         themes.addEventListener("click", ({ target: button }) => {
           // Ignore clicks on whitespace of the container around theme buttons.
           if (button.parentNode === themes) {
@@ -285,8 +288,8 @@ function onLoad(ready) {
     // Wait for initial translations to load before getting sizing information.
     await document.l10n.translateElements(translatedElements);
     requestAnimationFrame(() => {
-      // Ensure the primary button is focused on each screen.
-      primary.focus({ preventFocusRing: true });
+      // Ensure the correct button is focused on each screen.
+      toFocus.focus({ preventFocusRing: true });
 
       // Save first screen height, so later screens can flex and anchor content.
       if (current === 0) {

browser/components/tests/browser/browser_browserGlue_upgradeDialog.js

@@ -163,6 +163,36 @@ add_task(async function theme_change() {
   theme.disable();
 });
 
+add_task(async function keyboard_focus_okay() {
+  mockShell({ canPin: true });
+
+  await showAndWaitForDialog(async win => {
+    await BrowserTestUtils.waitForEvent(win, "ready");
+    Assert.equal(
+      win.document.activeElement,
+      win.document.getElementById("primary"),
+      "Primary button has focus"
+    );
+
+    win.document.getElementById("primary").click();
+    await BrowserTestUtils.waitForEvent(win, "ready");
+    Assert.equal(
+      win.document.activeElement,
+      win.document.getElementById("primary"),
+      "Primary button has focus"
+    );
+
+    win.document.getElementById("primary").click();
+    await BrowserTestUtils.waitForEvent(win, "ready");
+    Assert.equal(
+      win.document.activeElement,
+      win.document.querySelectorAll("[name=theme]")[0],
+      "First theme has focus"
+    );
+    win.close();
+  });
+});
+
 add_task(async function skip_screens() {
   Services.telemetry.clearEvents();
   const mock = mockShell({ isPinned: true });