@remit/ui 0.0.33 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "files": [
     "src"
@@ -12,7 +12,7 @@
   "scripts": {
     "test": "npm run test:typecheck && npm run test:run",
     "test:typecheck": "tsgo --noEmit",
-    "test:run": "node --import tsx --experimental-test-coverage --test-coverage-include='src/**' --test-coverage-exclude='src/**/*.test.ts' --test-coverage-exclude='src/**/*.test.tsx' --test-coverage-lines=50 --test 'src/**/*.test.ts'"
+    "test:run": "node --import tsx --experimental-test-coverage --test-coverage-include='src/**' --test-coverage-exclude='src/**/*.test.ts' --test-coverage-exclude='src/**/*.test.tsx' --test-coverage-lines=70 --test 'src/**/*.test.ts'"
   },
   "dependencies": {
     "@fontsource-variable/geist": "^5",

package/src/components/brief-sections.stories.tsx

@@ -176,3 +176,43 @@ export const AccountSources: Story = {
 		);
 	},
 };
+
+/**
+ * (d) Multi-select and the keyboard cursor in the brief. The rows are the same
+ * `Row` the mailbox list renders, so a checked row carries the checkbox and the
+ * selected tint, and the keyboard cursor shows its left accent rail on the row
+ * it sits on — one row implementation across the brief, Flagged and the inbox.
+ */
+export const Selection: Story = {
+	render: (args) => {
+		const [checked, setChecked] = useState<ReadonlySet<string>>(
+			new Set(["p1", "f1"]),
+		);
+		const toggle = (id: string) =>
+			setChecked((prev) => {
+				const next = new Set(prev);
+				if (next.has(id)) next.delete(id);
+				else next.add(id);
+				return next;
+			});
+		return (
+			<div className="flex h-screen w-96 flex-col border-r border-line">
+				<BriefSections
+					{...args}
+					Row={({ thread, active, onClick }) => (
+						<ComfortableRow
+							thread={thread}
+							active={active}
+							focused={thread.id === "p1"}
+							selection={{
+								checked: checked.has(thread.id),
+								onToggle: () => toggle(thread.id),
+							}}
+							onClick={onClick}
+						/>
+					)}
+				/>
+			</div>
+		);
+	},
+};

package/src/components/brief-sections.tsx

@@ -75,6 +75,17 @@ export interface BriefSectionsProps {
 	onSelectSource?: (id: string) => void;
 	/** Seeds the filter panel open on first render (stories / deep links). */
 	defaultExpanded?: boolean;
+	/**
+	 * Whether this component owns arrow-key traversal and the roving tabindex
+	 * over its rows. On by default so a consumer that only passes rows (the
+	 * Storybook prototype) still has a keyboard.
+	 *
+	 * The web client turns it off: its triage layer routes ↑/↓/Home/End through
+	 * one window-level dispatcher, and a container handler here would swallow
+	 * them first — taking Shift+↑/↓ with them, which the dispatcher needs for
+	 * range selection and `rovingNextIndex` ignores.
+	 */
+	manageFocus?: boolean;
 }
 
 /**
@@ -96,11 +107,16 @@ export function BriefSections({
 	sourcesNote,
 	onSelectSource,
 	defaultExpanded = false,
+	manageFocus = true,
 }: BriefSectionsProps) {
 	const [active, setActive] = useState<ReadonlySet<BriefFilterId>>(new Set());
 	const [sheetExpanded, setSheetExpanded] = useState(defaultExpanded);
 	const listRef = useRef<HTMLDivElement>(null);
-	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
+	useRovingFocus({
+		containerRef: listRef,
+		itemSelector: LIST_ROW_SELECTOR,
+		enabled: manageFocus,
+	});
 
 	const toggleFilter = (id: BriefFilterId) => {
 		setActive((prev) => {

package/src/components/message-row.tsx

@@ -1,5 +1,5 @@
 import { Check, Paperclip, ShieldAlert, Star } from "lucide-react";
-import type { ComponentType, ReactNode } from "react";
+import type { ComponentType, ReactNode, SyntheticEvent } from "react";
 import { cn } from "../lib/cn.js";
 import { LIST_ROW_ATTRIBUTE } from "../lib/roving-focus.js";
 import { categoryTone, type ThreadRowData } from "./app-shell-types.js";
@@ -177,11 +177,17 @@ export function ComfortableRowTextContent({
  * multi-selected (the brief and Flagged before they gained selection), which
  * renders the avatar alone.
  */
+/** What the toggle handler needs off the click or keypress that triggered it. */
+export type RowToggleEvent = Pick<
+	SyntheticEvent,
+	"preventDefault" | "stopPropagation"
+>;
+
 export interface RowSelection {
 	checked: boolean;
 	/** Keep the checkbox visible instead of revealing it on hover (mobile). */
 	alwaysVisible?: boolean;
-	onToggle: (event: React.MouseEvent) => void;
+	onToggle: (event: RowToggleEvent) => void;
 }
 
 /**
@@ -211,13 +217,24 @@ export function ComfortableRowLeading({
 					(checked || alwaysVisible) && "opacity-0",
 				)}
 			/>
-			<button
-				type="button"
+			{/* A span, not a <button>: the row itself is a button (the brief,
+			    Flagged) or a link (the mailbox list), and neither may nest an
+			    interactive element. The button role and label are what the user and
+			    the test suite address, so both stay. */}
+			{/* biome-ignore lint/a11y/useSemanticElements: a nested <button> inside the row's own button/link is invalid HTML */}
+			<span
+				role="button"
 				// Out of the tab order: the row is the list's single tab stop, and this
 				// control is `opacity-0` until hover, so a tabbable one would put focus
 				// on something invisible on every row.
 				tabIndex={-1}
 				onClick={selection.onToggle}
+				onKeyDown={(event) => {
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					event.stopPropagation();
+					selection.onToggle(event);
+				}}
 				className={cn(
 					"absolute inset-0 size-7 items-center justify-center rounded-full border transition-opacity",
 					alwaysVisible ? "flex" : "hidden sm:flex",
@@ -230,7 +247,7 @@ export function ComfortableRowLeading({
 				aria-label={checked ? "Deselect message" : "Select message"}
 			>
 				{checked && <Check className="size-3" />}
-			</button>
+			</span>
 		</span>
 	);
 }

package/src/index.ts

@@ -210,6 +210,7 @@ export {
 	comfortableRowClass,
 	compactRowClass,
 	type RowSelection,
+	type RowToggleEvent,
 } from "./components/message-row.js";
 export {
 	type MobileMessageAction,

package/src/lib/roving-focus.ts

@@ -43,6 +43,11 @@ export interface UseRovingFocusOptions {
 	/** CSS selector, scoped to the container, matching every roving item. */
 	itemSelector: string;
 	orientation?: RovingOrientation;
+	/**
+	 * Off when a keyboard layer above the group owns the same keys — the hook
+	 * binds nothing and leaves the tabindex to whoever does. Defaults on.
+	 */
+	enabled?: boolean;
 }
 
 function rovingItems(
@@ -70,10 +75,12 @@ export function useRovingFocus({
 	containerRef,
 	itemSelector,
 	orientation = "vertical",
+	enabled = true,
 }: UseRovingFocusOptions): void {
 	// No dependency array: items appear and disappear as sections expand, rows
 	// load, or filters change, none of which this hook's own inputs describe.
 	useEffect(() => {
+		if (!enabled) return;
 		const container = containerRef.current;
 		if (!container) return;