fix(web): cancelling update everything no longer flashes the update button's focus ring and tooltip

apps/web/src/components/sidebar/SidebarUpdatePill.browser.test.tsx

@@ -1,14 +1,16 @@
 import type { DesktopUpdateState } from "@t3tools/contracts";
 import { describe, expect, it, vi } from "vite-plus/test";
-import { userEvent } from "vite-plus/test/browser";
+import { page, userEvent } from "vite-plus/test/browser";
 
+import "~/index.css";
 import { act, render } from "../../../test/render";
 import { SidebarUpdatePill } from "./SidebarUpdatePill";
 
 const mocks = vi.hoisted(() => {
   const listeners = new Set<() => void>();
   return {
     update: null as DesktopUpdateState | null,
+    hasUpdates: false,
     subscribe: (listener: () => void) => {
       listeners.add(listener);
       return () => listeners.delete(listener);
@@ -32,7 +34,13 @@ vi.mock("../../env", async (importOriginal) => ({
   isElectron: true,
 }));
 vi.mock("./useUpdateEverything", () => ({
-  useUpdateEverything: () => ({ hasUpdates: false, summary: "", lines: [], restarts: [] }),
+  useUpdateEverything: () => ({
+    hasUpdates: mocks.hasUpdates,
+    summary: "Update everything",
+    lines: [],
+    restarts: [],
+    skipped: [],
+  }),
 }));
 
 function nightlyUpdate(releaseNotes: DesktopUpdateState["releaseNotes"]): DesktopUpdateState {
@@ -60,8 +68,9 @@ const RELEASE_NOTES: DesktopUpdateState["releaseNotes"] = [
   { version: "0.0.50-nightly.2", items: ["Faster sidebar."], totalItems: 1 },
 ];
 
-function setup(update: DesktopUpdateState | null) {
+function setup(update: DesktopUpdateState | null, { hasUpdates = false } = {}) {
   mocks.update = update;
+  mocks.hasUpdates = hasUpdates;
 }
 
 function publish(update: DesktopUpdateState | null) {
@@ -94,3 +103,29 @@ describe("SidebarUpdatePill release notes", () => {
     await vi.waitFor(() => expect(releaseNotes()).not.toBeNull());
   });
 });
+
+describe("SidebarUpdatePill update everything", () => {
+  it("does not refocus the update button after a pointer cancel", async () => {
+    setup(null, { hasUpdates: true });
+    await using screen = await render(<SidebarUpdatePill />);
+    const button = screen.getByRole("button", { name: "Update everything" });
+    await userEvent.click(button);
+    const cancel = page.getByRole("button", { name: "Cancel" });
+    await expect.element(cancel).toBeVisible();
+
+    await userEvent.click(cancel);
+    await vi.waitFor(() => expect(document.querySelector('[role="alertdialog"]')).toBeNull());
+    expect(document.activeElement).not.toBe(button.element());
+  });
+
+  it("returns focus to the update button after Escape", async () => {
+    setup(null, { hasUpdates: true });
+    await using screen = await render(<SidebarUpdatePill />);
+    const button = screen.getByRole("button", { name: "Update everything" });
+    await userEvent.click(button);
+    await expect.element(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+
+    await userEvent.keyboard("{Escape}");
+    await vi.waitFor(() => expect(document.activeElement).toBe(button.element()));
+  });
+});

apps/web/src/components/sidebar/UpdateEverythingDialog.tsx

@@ -51,8 +51,8 @@ export function UpdateEverythingDialog({
 }: UpdateEverythingDialogProps) {
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogPopup>
-        {}
+      {/* Refocusing the trigger after a pointer close shows its focus ring and opens its tooltip. */}
+      <AlertDialogPopup finalFocus={(closeType) => closeType === "keyboard"}>
         <UpdateEverythingDialogContent {...content} />
       </AlertDialogPopup>
     </AlertDialog>