@remit/web-client 0.0.211 → 0.0.212

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.211",
+  "version": "0.0.212",
   "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();
 			}