@remit/web-client 0.0.266 → 0.0.267

package/package.json

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

@@ -208,10 +208,9 @@ describe("Drawer's ring is what a reader can reach", () => {
 	});
 
 	/**
-	 * 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.
+	 * A dialog that does not take the shared trap leaves focus on the drawer
+	 * control that opened it — now behind that 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(

package/src/components/layout/Drawer.tsx

@@ -1,38 +1,12 @@
-import { cn, type OverlayAnswers, useOverlayScope } from "@remit/ui";
+import {
+	cn,
+	type OverlayAnswers,
+	useModalFocus,
+	useOverlayScope,
+} from "@remit/ui";
 import { X } from "lucide-react";
 import { type ReactNode, useEffect, useRef } from "react";
 
-const FOCUSABLE_SELECTOR =
-	"a[href], button, input, select, textarea, [tabindex]";
-
-const isTabbable = (element: HTMLElement): boolean => {
-	if (element.tabIndex < 0) return false;
-	if (element.hasAttribute("disabled")) return false;
-	if (element.getAttribute("aria-disabled") === "true") return false;
-	if (element.closest("[inert], [hidden], [aria-hidden='true']")) return false;
-	const style = getComputedStyle(element);
-	return style.display !== "none" && style.visibility !== "hidden";
-};
-
-/**
- * The elements Tab may reach, in the order it reaches them.
- *
- * A modal opened from inside the drawer takes the ring with it: the
- * intelligence pane's reclassify dialog renders under the drawer's own panel,
- * so a ring scoped to the panel puts its Cancel last and leaves every control
- * behind that dialog's backdrop in the cycle — Tab walks onto buttons no
- * pointer can reach, which is the bug the trap exists to prevent.
- */
-const tabRing = (panel: HTMLElement): HTMLElement[] => {
-	const nested = panel.querySelectorAll<HTMLElement>(
-		'[role="dialog"][aria-modal="true"]',
-	);
-	const root = nested[nested.length - 1] ?? panel;
-	return [...root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
-		isTabbable,
-	);
-};
-
 interface DrawerProps {
 	isOpen: boolean;
 	onClose: () => void;
@@ -68,7 +42,6 @@ export const Drawer = ({
 	answers,
 }: DrawerProps) => {
 	const drawerRef = useRef<HTMLDivElement>(null);
-	const previouslyFocusedRef = useRef<HTMLElement | null>(null);
 
 	useOverlayScope({
 		id: "drawer",
@@ -76,53 +49,14 @@ export const Drawer = ({
 		answers: { back: onClose, ...answers },
 	});
 
+	useModalFocus(drawerRef, isOpen);
+
 	useEffect(() => {
 		if (!isOpen) return;
-
-		previouslyFocusedRef.current = document.activeElement as HTMLElement | null;
-
-		const handleKey = (event: KeyboardEvent) => {
-			// 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 inside = ring.includes(active);
-			if (event.shiftKey) {
-				if (!inside || active === first) {
-					event.preventDefault();
-					last.focus();
-				}
-				return;
-			}
-			if (!inside || active === last) {
-				event.preventDefault();
-				first.focus();
-			}
-		};
-
-		document.addEventListener("keydown", handleKey);
-
-		// Move focus into the drawer
-		if (drawerRef.current) tabRing(drawerRef.current)[0]?.focus();
-
-		// Lock body scroll
 		const previousOverflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
-
 		return () => {
-			document.removeEventListener("keydown", handleKey);
 			document.body.style.overflow = previousOverflow;
-			previouslyFocusedRef.current?.focus();
 		};
 	}, [isOpen]);
 
@@ -150,6 +84,7 @@ export const Drawer = ({
 			{/* Drawer panel */}
 			<div
 				ref={drawerRef}
+				tabIndex={-1}
 				className={cn(
 					"safe-area-frame absolute top-0 bottom-0 bg-canvas border-line shadow-xl flex flex-col",
 					widthClassName,

package/src/components/mail/IntelligencePane.tsx

@@ -8,9 +8,10 @@ import {
 	type SimilarMessageLinkComponent,
 	type SimilarState,
 	type ThreadCategory,
+	useModalFocus,
 } from "@remit/ui";
 import { Sparkles } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
 import { useReportSpam } from "@/hooks/useReportSpam";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
@@ -170,6 +171,9 @@ function ReclassifyDialog({
 	onSelect: (category: CategoryOverride) => void;
 	onCancel: () => void;
 }) {
+	const dialogRef = useRef<HTMLDivElement>(null);
+	useModalFocus(dialogRef, isOpen);
+
 	if (!isOpen) return null;
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -179,9 +183,11 @@ function ReclassifyDialog({
 				className="backdrop-blur-sm"
 			/>
 			<div
+				ref={dialogRef}
 				role="dialog"
 				aria-modal="true"
 				aria-label="Reclassify sender"
+				tabIndex={-1}
 				className="relative z-10 w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg"
 			>
 				<h2 className="text-lg font-semibold">Reclassify this sender</h2>

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -3,10 +3,11 @@ import {
 	DialogBackdrop,
 	Kbd,
 	KEY_HINT_GROUPS,
+	useModalFocus,
 	useOverlayScope,
 } from "@remit/ui";
 import { X } from "lucide-react";
-import { Fragment } from "react";
+import { Fragment, useRef } from "react";
 
 interface KeyboardShortcutsModalProps {
 	isOpen: boolean;
@@ -22,11 +23,14 @@ export const KeyboardShortcutsModal = ({
 	isOpen,
 	onClose,
 }: KeyboardShortcutsModalProps) => {
+	const modalRef = useRef<HTMLDivElement>(null);
+
 	useOverlayScope({
 		id: "shortcuts",
 		open: isOpen,
 		answers: { back: onClose },
 	});
+	useModalFocus(modalRef, isOpen);
 
 	if (!isOpen) return null;
 
@@ -40,9 +44,11 @@ export const KeyboardShortcutsModal = ({
 
 			{/* Modal */}
 			<div
+				ref={modalRef}
 				role="dialog"
 				aria-modal="true"
 				aria-label="Keyboard shortcuts"
+				tabIndex={-1}
 				className={cn(
 					"relative z-10 max-h-[85vh] w-full max-w-2xl overflow-y-auto",
 					"rounded-lg border border-line bg-surface shadow-lg",