@remit/web-client 0.0.265 → 0.0.267

package/package.json

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

@@ -1,13 +1,17 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
+	CATEGORY_PRESENTATION,
+	categoryLabels,
 	DialogBackdrop,
 	IntelligencePanel,
 	type IntelligenceQuickActions,
 	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";
@@ -52,18 +56,20 @@ export interface IntelligencePaneProps {
 
 /**
  * Category-override values accepted by the `AddressFlags.category` override
- * (PATCH /addresses/{id}). Matches `MessageCategory` — the full taxonomy the
- * user can assign as a sender-level override.
+ * (PATCH /addresses/{id}), in the kit's chip-row order and named with the kit's
+ * words. `uncategorized` is left out: it names the classifier not having reached
+ * a message yet, which is not something a reader chooses for a sender.
  */
-const CATEGORY_OVERRIDES = [
-	"personal",
-	"newsletter",
-	"marketing",
-	"automated",
-	"transactional",
-	"social",
-] as const;
-type CategoryOverride = (typeof CATEGORY_OVERRIDES)[number];
+type CategoryOverride = Exclude<ThreadCategory, "uncategorized">;
+
+const isCategoryOverride = (
+	category: ThreadCategory,
+): category is CategoryOverride => category !== "uncategorized";
+
+const CATEGORY_OVERRIDES: readonly CategoryOverride[] =
+	CATEGORY_PRESENTATION.map((entry) => entry.category).filter(
+		isCategoryOverride,
+	);
 
 /**
  * Decide which spam quick-action to offer for the current message (issue #648).
@@ -165,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">
@@ -174,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>
@@ -189,11 +200,11 @@ function ReclassifyDialog({
 							key={cat}
 							type="button"
 							onClick={() => onSelect(cat)}
-							className={`flex min-h-11 items-center justify-between rounded px-3 text-left text-sm capitalize transition-colors hover:bg-surface-raised ${
+							className={`flex min-h-11 items-center justify-between rounded px-3 text-left text-sm transition-colors hover:bg-surface-raised ${
 								cat === current ? "font-semibold text-accent" : "text-fg"
 							}`}
 						>
-							{cat}
+							{categoryLabels[cat]}
 							{cat === current && (
 								<span className="text-2xs text-fg-subtle">current</span>
 							)}

package/src/components/mail/brief-server-sections.render.test.ts

@@ -605,14 +605,10 @@ describe("the brief's sections come from the server (#312)", () => {
 				shown.indexOf("Weekly digest for you"),
 			"an old newsletter still outranked a newer match",
 		);
-		for (const label of ["Newsletter", "Automated", "Personal"]) {
-			assert.ok(
-				!shown.includes(label),
-				`the search kept the ${label} section header`,
-			);
-		}
+		// A category's word still reaches the screen on a row badge, so the
+		// headers are counted rather than read off the text.
 		assert.equal(
-			mounted.queryAll('button[aria-expanded="true"]').length,
+			mounted.queryAll("[data-section-header]").length,
 			0,
 			"the search rendered a section header",
 		);

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",

package/src/lib/brief.test.ts

@@ -1,8 +1,14 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import type { ResultCount, ThreadCategory, ThreadRowData } from "@remit/ui";
 import {
+	categoryLabels,
+	type ResultCount,
+	type ThreadCategory,
+	type ThreadRowData,
+} from "@remit/ui";
+import {
+	BRIEF_CATEGORIES,
 	type BriefCategoryResult,
 	briefSections,
 	briefSectionTotal,
@@ -109,16 +115,8 @@ describe("briefSections", () => {
 	});
 
 	test("each category answers for its own section, with its own label", () => {
-		const labels = new Map<ThreadCategory, string>([
-			["personal", "Personal"],
-			["transactional", "Transactional"],
-			["newsletter", "Newsletter"],
-			["marketing", "Marketing"],
-			["social", "Social"],
-			["automated", "Automated"],
-			["uncategorized", "Unclassified"],
-		]);
-		for (const [category, label] of labels) {
+		for (const category of BRIEF_CATEGORIES) {
+			const label = categoryLabels[category];
 			const sections = briefSections([
 				result(category, [row({ id: "1", category })]),
 			]);

package/src/lib/brief.ts

@@ -36,13 +36,14 @@
  */
 
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { MessageCategory } from "@remit/domain-enums";
-import type {
-	ResultCount,
-	SenderTrustLevel,
-	ThreadCategory,
-	ThreadRowData,
-	ThreadSection,
+import {
+	CATEGORY_SECTION_ORDER,
+	categoryLabels,
+	type ResultCount,
+	type SenderTrustLevel,
+	type ThreadCategory,
+	type ThreadRowData,
+	type ThreadSection,
 } from "@remit/ui";
 import { toDisplayCategory } from "./display-category.js";
 import { formatEmailDate } from "./format.js";
@@ -145,39 +146,12 @@ export function mergeSearchRows(
 }
 
 /**
- * Category sections in fixed display order. The `id`/`label` drive the rendered
- * section; `category` is both the section's own scope and the query parameter
- * the section's request carries.
+ * The categories the brief asks for, in the order it renders them. A category
+ * is both the section's own scope and the query parameter its request carries;
+ * the order and the label come from the kit's category table.
  */
-export const CATEGORY_SECTIONS: ReadonlyArray<{
-	id: string;
-	label: string;
-	category: ThreadCategory;
-}> = [
-	{ id: "personal", label: "Personal", category: MessageCategory.personal },
-	{
-		id: "transactional",
-		label: "Transactional",
-		category: MessageCategory.transactional,
-	},
-	{
-		id: "newsletter",
-		label: "Newsletter",
-		category: MessageCategory.newsletter,
-	},
-	{ id: "marketing", label: "Marketing", category: MessageCategory.marketing },
-	{ id: "social", label: "Social", category: MessageCategory.social },
-	{ id: "automated", label: "Automated", category: MessageCategory.automated },
-	{
-		id: "uncategorized",
-		label: "Unclassified",
-		category: MessageCategory.uncategorized,
-	},
-];
-
-/** The categories the brief asks for, in the order it renders them. */
 export const BRIEF_CATEGORIES: readonly ThreadCategory[] =
-	CATEGORY_SECTIONS.map((section) => section.category);
+	CATEGORY_SECTION_ORDER;
 
 /** One category's own server answer: its newest rows and how many it holds. */
 export interface BriefCategoryResult {
@@ -214,8 +188,8 @@ export function briefSections(
 		results.map((result) => [result.category, result] as const),
 	);
 	const sections: ThreadSection[] = [];
-	for (const section of CATEGORY_SECTIONS) {
-		const result = byCategory.get(section.category);
+	for (const category of BRIEF_CATEGORIES) {
+		const result = byCategory.get(category);
 		if (!result) continue;
 		const holdsMail =
 			result.loading ||
@@ -224,8 +198,8 @@ export function briefSections(
 			(result.total.kind === "exact" && result.total.value > 0);
 		if (!holdsMail) continue;
 		sections.push({
-			id: section.id,
-			label: section.label,
+			id: category,
+			label: categoryLabels[category],
 			threads: result.rows,
 			total: result.total,
 			atCap: result.atCap,

package/src/lib/inbox-filters.ts

@@ -3,7 +3,7 @@ import type {
 	ThreadOperationsSearchThreadsData,
 } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
-import { type FilterReach, inboxFilterConfig } from "@remit/ui";
+import { categoryLabels, type FilterReach, isThreadCategory } from "@remit/ui";
 
 /** The request `threadOperationsSearchThreads` takes, whole. */
 export type ThreadSearchQuery = NonNullable<
@@ -131,14 +131,7 @@ export const sameInboxFilter = (
 /**
  * The label the empty state names an active category filter by, or undefined
  * when the id names no category — `"all"` is how the category is cleared, not a
- * category. Read off the preset so the chip and the sentence about it can never
- * disagree; every list preset draws its categories from the same set.
+ * category.
  */
-const CATEGORY_LABELS = new Map(
-	inboxFilterConfig()
-		.categories.filter((category) => category.id !== "all")
-		.map((category) => [category.id, category.label]),
-);
-
 export const categoryLabel = (id: string): string | undefined =>
-	CATEGORY_LABELS.get(id);
+	isThreadCategory(id) ? categoryLabels[id] : undefined;

package/src/lib/search-tokens.ts

@@ -43,6 +43,7 @@
 import type { RemitImapMessageCategory } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
 import {
+	categoryLabels,
 	quoteSearchTokenValue,
 	type SearchQueryWord,
 	type SearchTermParts,
@@ -134,24 +135,9 @@ export interface SearchTokenSpec {
 	options?: readonly SearchTokenValueOption[];
 }
 
-/**
- * Category labels, keyed by the API enum. `uncategorized` reads "Unclassified"
- * — the same word the filter chips use (issue #45): mail the classifier has not
- * reached is a pending state with a name, never the absence of one.
- */
-const CATEGORY_LABELS: Record<RemitImapMessageCategory, string> = {
-	personal: "Personal",
-	uncategorized: "Unclassified",
-	transactional: "Transactional",
-	newsletter: "Newsletter",
-	marketing: "Marketing",
-	social: "Social",
-	automated: "Automated",
-};
-
 const CATEGORY_OPTIONS: readonly SearchTokenValueOption[] = Object.values(
 	MessageCategory,
-).map((value) => ({ value, label: CATEGORY_LABELS[value] }));
+).map((value) => ({ value, label: categoryLabels[value] }));
 
 /**
  * Spellings that resolve to a category beyond the enum values themselves — the
@@ -313,7 +299,7 @@ export function searchTokenLabel(token: SearchToken): string {
 		case "subject":
 			return `Subject: ${token.value}`;
 		case "category":
-			return `Category: ${CATEGORY_LABELS[token.category]}`;
+			return `Category: ${categoryLabels[token.category]}`;
 		case "hasAttachment":
 			return "Has attachment";
 		case "isUnread":