@remit/web-client 0.0.212 → 0.0.214

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.212",
+  "version": "0.0.214",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/layout/Drawer.focus.test.ts

@@ -206,6 +206,39 @@ describe("Drawer's ring is what a reader can reach", () => {
 
 		assert.equal(document.activeElement, named("Cancel"));
 	});
+
+	/**
+	 * The pane renders that dialog without moving focus into it, so focus sits
+	 * on the drawer control that opened it — now behind the dialog's backdrop.
+	 * Tab has to enter the dialog's ring rather than walk the controls the
+	 * backdrop covers.
+	 */
+	it("pulls focus behind a nested dialog's backdrop into its ring", () => {
+		const nestedDialog = createElement(
+			"div",
+			{
+				key: "nested",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": "Reclassify sender",
+			},
+			button("automated"),
+			button("Cancel"),
+		);
+
+		open(createElement(Fragment, null, button("trigger"), nestedDialog));
+		named("trigger").focus();
+
+		press("Tab");
+
+		assert.equal(document.activeElement, named("automated"));
+
+		named("trigger").focus();
+
+		press("Tab", true);
+
+		assert.equal(document.activeElement, named("Cancel"));
+	});
 });
 
 describe("Drawer gives focus back on the way out", () => {

package/src/components/layout/Drawer.tsx

@@ -73,25 +73,29 @@ export const Drawer = ({
 				onClose();
 				return;
 			}
-			// Wrap Tab at the ends of the drawer's ring: walking off the last
-			// control cycles back to the first instead of landing on controls a
-			// pointer cannot reach under the scrim (#747). Focus that is already
-			// outside the drawer — an error banner, the fatal-error overlay — is
-			// left alone; the drawer does not pull it back in.
+			// Trap Tab inside the drawer's ring: walking off either end cycles
+			// round, and focus that is in the drawer but outside the ring — a
+			// control behind a nested dialog's backdrop — is pulled in, so Tab
+			// never lands where a pointer cannot reach (#747). The trap only
+			// applies while the drawer already holds focus; an error banner or
+			// the fatal-error overlay above it keeps its own Tab (#970).
 			if (event.key !== "Tab" || !drawerRef.current) return;
+			const active = document.activeElement;
+			if (!(active instanceof HTMLElement)) return;
+			if (!drawerRef.current.contains(active)) return;
 			const ring = tabRing(drawerRef.current);
 			if (ring.length === 0) return;
 			const first = ring[0];
 			const last = ring[ring.length - 1];
-			const active = document.activeElement;
+			const inside = ring.includes(active);
 			if (event.shiftKey) {
-				if (active === first) {
+				if (!inside || active === first) {
 					event.preventDefault();
 					last.focus();
 				}
 				return;
 			}
-			if (active === last) {
+			if (!inside || active === last) {
 				event.preventDefault();
 				first.focus();
 			}

package/src/hooks/use-system-update.test.ts

@@ -88,17 +88,23 @@ const updateKey = systemOperationsGetSystemUpdateQueryKey();
 const BUDGET_MS =
 	(APPLY_BUDGET_SECONDS + NEVER_CAME_BACK_MARGIN_SECONDS) * 1000;
 
-async function settle(dom: DomHarness): Promise<void> {
-	for (let attempt = 0; attempt < 40; attempt += 1) {
+/**
+ * Poll `ready` across flushes until it holds. A mocked answer still travels
+ * through the fetch seam's own promise chain — the request body, the responder,
+ * the response stream — so the render an assert reads is an unknown number of
+ * turns out, and a fixed count of them is a race under load. Waiting on the
+ * condition itself is what makes these tests deterministic.
+ */
+async function waitFor(
+	dom: DomHarness,
+	ready: () => boolean,
+	what: string,
+): Promise<void> {
+	for (let attempt = 0; attempt < 200; attempt += 1) {
 		await dom.flush();
-		const state = dom.queryClient.getQueryState(updateKey);
-		const done =
-			state &&
-			state.fetchStatus === "idle" &&
-			(state.data !== undefined || state.error != null);
-		if (done) {
-			// The cache has settled; give React the turns to commit the render it
-			// scheduled off that settle before the assert reads the DOM.
+		if (ready()) {
+			// The state is there; give React the turns to commit the render it
+			// scheduled off it before the assert reads the DOM.
 			await dom.flush();
 			await dom.wait(1);
 			await dom.flush();
@@ -106,6 +112,29 @@ async function settle(dom: DomHarness): Promise<void> {
 		}
 		await dom.wait(1);
 	}
+	throw new Error(`timed out waiting for ${what}`);
+}
+
+/** How many times the poll has answered, either way — it never goes backwards. */
+function answers(dom: DomHarness): number {
+	const state = dom.queryClient.getQueryState(updateKey);
+	if (!state) return 0;
+	return state.dataUpdateCount + state.errorUpdateCount;
+}
+
+async function settle(dom: DomHarness): Promise<void> {
+	await waitFor(
+		dom,
+		() => {
+			const state = dom.queryClient.getQueryState(updateKey);
+			return (
+				state !== undefined &&
+				state.fetchStatus === "idle" &&
+				(state.data !== undefined || state.error != null)
+			);
+		},
+		"the update query to answer",
+	);
 }
 
 /**
@@ -152,18 +181,55 @@ async function startUpdate(
 	await act(async () => {
 		api().install("0.9.4");
 		await dom.flush();
-		await dom.wait(1);
+	});
+	await waitFor(
+		dom,
+		() => {
+			const surface = api().surface;
+			return surface.status === "ready" && surface.overlay.kind === "applying";
+		},
+		"the install to be accepted",
+	);
+}
+
+/** Re-poll and wait for the answer, whichever way it lands. */
+async function retryConnection(
+	dom: DomHarness,
+	api: () => SelfUpdateApi,
+): Promise<void> {
+	const before = answers(dom);
+	await act(async () => {
+		api().onRetryConnection();
 		await dom.flush();
 	});
+	await waitFor(
+		dom,
+		() =>
+			dom.queryClient.getQueryState(updateKey)?.fetchStatus === "idle" &&
+			answers(dom) > before,
+		"the re-poll to answer",
+	);
 }
 
 async function press(dom: DomHarness, api: () => SelfUpdateApi): Promise<void> {
+	const before = answers(dom);
 	await act(async () => {
 		api().onCheck();
 		await dom.flush();
-		await dom.wait(1);
-		await dom.flush();
 	});
+	// The press fires a raw SDK call: on success it refetches, so the poll
+	// answers again; on failure the reason lands on the pane.
+	await waitFor(
+		dom,
+		() => {
+			const surface = api().surface;
+			return (
+				answers(dom) > before ||
+				(surface.status === "ready" && surface.section.status === "checkFailed")
+			);
+		},
+		"the pressed check to be requested",
+	);
 }
 
 async function renderSurface(
@@ -298,12 +364,7 @@ describe("SelfUpdateOverlay — the blocking screen", () => {
 		await startUpdate(dom, api);
 
 		failing = true;
-		await act(async () => {
-			api().onRetryConnection();
-			await dom.flush();
-			await dom.wait(1);
-			await dom.flush();
-		});
+		await retryConnection(dom, api);
 
 		const surface = api().surface;
 		assert.equal(
@@ -329,12 +390,7 @@ describe("SelfUpdateOverlay — the blocking screen", () => {
 		const realNow = Date.now;
 		Date.now = () => realNow() + BUDGET_MS + 60_000;
 		try {
-			await act(async () => {
-				api().onRetryConnection();
-				await dom.flush();
-				await dom.wait(1);
-				await dom.flush();
-			});
+			await retryConnection(dom, api);
 			assert.doesNotMatch(dom.html(), /Installing Remit 0\.9\.4/);
 			assert.match(dom.html(), /has not answered since the restart/);
 			assert.match(dom.html(), /remit logs/);
@@ -360,12 +416,7 @@ describe("SelfUpdateOverlay — the blocking screen", () => {
 		await startUpdate(dom, api);
 
 		finished = true;
-		await act(async () => {
-			api().onRetryConnection();
-			await dom.flush();
-			await dom.wait(1);
-			await dom.flush();
-		});
+		await retryConnection(dom, api);
 
 		const surface = api().surface;
 		assert.equal(
@@ -471,10 +522,7 @@ describe("useSystemUpdate — actions", () => {
 		await settle(dom);
 		const afterMount = calls;
 
-		await act(async () => {
-			api().onRetryConnection();
-			await dom.flush();
-		});
+		await retryConnection(dom, api);
 
 		assert.equal(calls > afterMount, true);
 	});