@remit/web-client 0.0.211 → 0.0.213

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.211",
+  "version": "0.0.213",
   "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

@@ -107,13 +107,22 @@ describe("Drawer keeps Tab inside itself", () => {
 		assert.equal(document.activeElement, closeButton());
 	});
 
-	it("pulls focus back in when it is somewhere else entirely", () => {
+	it("leaves focus outside the drawer alone", () => {
 		open(createElement(Fragment, null, button("alpha")));
 		outside.focus();
 
 		press("Tab");
 
-		assert.equal(document.activeElement, closeButton());
+		assert.equal(document.activeElement, outside);
+	});
+
+	it("leaves focus outside the drawer alone on shift+Tab too", () => {
+		open(createElement(Fragment, null, button("alpha")));
+		outside.focus();
+
+		press("Tab", true);
+
+		assert.equal(document.activeElement, outside);
 	});
 
 	it("leaves an interior Tab to the browser", () => {

package/src/components/layout/Drawer.tsx

@@ -73,24 +73,25 @@ export const Drawer = ({
 				onClose();
 				return;
 			}
-			// Trap Tab inside the drawer: it is `aria-modal`, so a screen reader
-			// offers nothing outside it — and letting Tab walk out would land on
-			// controls a pointer cannot reach under the scrim (#747).
+			// 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.
 			if (event.key !== "Tab" || !drawerRef.current) 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 = active instanceof HTMLElement && ring.includes(active);
 			if (event.shiftKey) {
-				if (!inside || active === first) {
+				if (active === first) {
 					event.preventDefault();
 					last.focus();
 				}
 				return;
 			}
-			if (!inside || active === last) {
+			if (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);
 	});