@remit/web-client 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "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/mail/MailboxPane.tsx

@@ -43,6 +43,7 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 import {
 	createContext,
 	type ReactNode,
+	type RefObject,
 	useCallback,
 	useContext,
 	useEffect,
@@ -57,7 +58,10 @@ import { Drawer } from "@/components/layout/Drawer";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
-import { MessageList } from "@/components/mail/MessageList";
+import {
+	MessageList,
+	type MessageListCommands,
+} from "@/components/mail/MessageList";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import { PullToRefresh } from "@/components/mail/PullToRefresh";
 import { SpamRescue } from "@/components/mail/SpamRescue";
@@ -189,7 +193,11 @@ interface MailboxPaneContextValue {
 	onTriageContextChange: (ctx: {
 		focusedMessageId: string | undefined;
 		selectedIds: string[];
+		hasList: boolean;
+		blocksKeyboard: boolean;
 	}) => void;
+	/** Where the list publishes the commands the keyboard layer drives. */
+	listCommandsRef: RefObject<MessageListCommands | null>;
 	onRetry: () => void;
 	// Toolbar / reading pane actions
 	toolbarComposeRequest: ComposeMode | null;
@@ -418,13 +426,25 @@ function MailboxPaneProvider({
 		undefined,
 	);
 	const [triageSelectedIds, setTriageSelectedIds] = useState<string[]>([]);
+	// The mounted message list publishes its navigation/selection commands here.
+	// Null whenever no list is mounted (reading-only phone view, drafts) — the
+	// keyboard layer then simply has nothing to drive.
+	const listCommandsRef = useRef<MessageListCommands | null>(null);
+	// Whether a message list is mounted and serving commands, and whether it has
+	// a modal that owns the keyboard. Both drive which keys this route claims.
+	const [hasList, setHasList] = useState(false);
+	const [listBlocksKeyboard, setListBlocksKeyboard] = useState(false);
 	const handleTriageContextChange = useCallback(
 		(context: {
 			focusedMessageId: string | undefined;
 			selectedIds: string[];
+			hasList: boolean;
+			blocksKeyboard: boolean;
 		}) => {
 			setTriageFocusedId(context.focusedMessageId);
 			setTriageSelectedIds(context.selectedIds);
+			setHasList(context.hasList);
+			setListBlocksKeyboard(context.blocksKeyboard);
 		},
 		[],
 	);
@@ -583,7 +603,10 @@ function MailboxPaneProvider({
 		closeCompose,
 	]);
 
+	// Esc unwinds one step at a time: an active selection first, then the open
+	// thread.
 	const goBack = useCallback(() => {
+		if (listCommandsRef.current?.clearSelection()) return;
 		if (selectedMessageId) {
 			navigate({
 				to: "/mail/$mailboxId",
@@ -670,7 +693,11 @@ function MailboxPaneProvider({
 		return messageIdsForFocusedThread(focusedThread);
 	}, [triageSelectedIds, messageIdsForFocusedThread, focusedThread]);
 
+	// Prefer the list's delete: it confirms the move to Trash and then places the
+	// cursor on a surviving row. Falls back to the reading pane's message when no
+	// list is mounted or nothing in it is targeted.
 	const triageDeleteAction = useCallback(() => {
+		if (listCommandsRef.current?.requestDelete()) return;
 		const ids = triageTargetMessageIds();
 		if (ids.length > 0) triageDelete(ids);
 	}, [triageTargetMessageIds, triageDelete]);
@@ -764,8 +791,29 @@ function MailboxPaneProvider({
 	const showIntelligence = isDesktop && intelligenceOpen && hasThread;
 
 	useTriageKeyboard({
-		enabled: !composeState.isOpen,
+		// A modal owns the keyboard outright. Suspending the layer is what keeps a
+		// second Delete press from reaching a delete while the confirmation for
+		// the first one is still on screen.
+		enabled: !composeState.isOpen && !listBlocksKeyboard,
 		handlers: {
+			// List navigation and selection, registered only while a list is
+			// mounted to serve them. An unregistered action is never
+			// preventDefault-ed, so with no list the browser keeps Enter, Space and
+			// ⌘A — select-all-text in the reading pane still works.
+			...(hasList
+				? {
+						focusNext: () => listCommandsRef.current?.focusNext(),
+						focusPrevious: () => listCommandsRef.current?.focusPrevious(),
+						focusFirst: () => listCommandsRef.current?.focusFirst(),
+						focusLast: () => listCommandsRef.current?.focusLast(),
+						openFocused: () => listCommandsRef.current?.openFocused(),
+						toggleSelect: () => listCommandsRef.current?.toggleSelect(),
+						extendSelectDown: () => listCommandsRef.current?.extendSelectDown(),
+						extendSelectUp: () => listCommandsRef.current?.extendSelectUp(),
+						selectAll: () => listCommandsRef.current?.selectAll(),
+						toggleDensity: () => listCommandsRef.current?.toggleDensity(),
+					}
+				: {}),
 			back: goBack,
 			reply: triageReply,
 			replyAll: triageReplyAll,
@@ -831,6 +879,7 @@ function MailboxPaneProvider({
 		hasMore: hasNextPage,
 		isLoadingMore: isFetchingNextPage,
 		onTriageContextChange: handleTriageContextChange,
+		listCommandsRef,
 		onRetry: () => refetch(),
 		toolbarComposeRequest,
 		onToolbarReply: handleToolbarReply,
@@ -884,6 +933,7 @@ function MailboxList() {
 		isSpamFolder,
 		rescueCandidates,
 		onTriageContextChange,
+		listCommandsRef,
 		onRetry,
 		filterCategory,
 		filterAttributes,
@@ -973,6 +1023,7 @@ function MailboxList() {
 			listTitle={listTitle}
 			hideHeader
 			onTriageContextChange={onTriageContextChange}
+			commandsRef={listCommandsRef}
 		/>
 	);
 

package/src/components/mail/MessageList.tsx

@@ -3,10 +3,10 @@ import { type Density, MessageListPane, SelectionTopBar } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Search, Sparkles } from "lucide-react";
+import type { RefObject } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
-import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import {
@@ -16,11 +16,39 @@ import {
 } from "@/hooks/useSelection";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import { formatDeleteToTrashTitle } from "@/lib/format";
+import { tabStopId } from "@/lib/list-focus";
 import { MoveToTrigger } from "./MoveToTrigger";
 import { OrganizeDialog } from "./organize/OrganizeDialog";
 import { SelectionToolbar } from "./SelectionToolbar";
 import { SwipeableMessageRow } from "./SwipeableMessageRow";
 
+/**
+ * The list operations the global keyboard layer drives. The list publishes an
+ * implementation into a ref the route owns, so navigation and selection keys
+ * are routed by the one dispatcher in `useTriageKeyboard` instead of a second
+ * window listener of the list's own (#43).
+ */
+export interface MessageListCommands {
+	focusNext: () => void;
+	focusPrevious: () => void;
+	focusFirst: () => void;
+	focusLast: () => void;
+	openFocused: () => void;
+	toggleSelect: () => void;
+	extendSelectDown: () => void;
+	extendSelectUp: () => void;
+	selectAll: () => void;
+	/** Returns true when there was a selection to clear — Esc consumes it. */
+	clearSelection: () => boolean;
+	/**
+	 * Opens the move-to-Trash confirmation for the selection, or the focused row
+	 * when nothing is selected. Returns false when there is nothing to delete, so
+	 * the route can fall back to its own reading-pane delete.
+	 */
+	requestDelete: () => boolean;
+	toggleDensity: () => void;
+}
+
 interface MessageListProps {
 	mailboxId: string;
 	threads: RemitImapThreadMessageResponse[];
@@ -64,7 +92,24 @@ interface MessageListProps {
 	onTriageContextChange?: (context: {
 		focusedMessageId: string | undefined;
 		selectedIds: string[];
+		/**
+		 * Whether a list is mounted with commands published. The route registers
+		 * its list-driven key handlers only while this holds, so keys the list
+		 * owns (Enter, Space, ⌘A) are left to the browser everywhere else.
+		 */
+		hasList: boolean;
+		/**
+		 * Whether the list has a modal open that owns the keyboard. The route
+		 * suspends the whole triage layer while it does, so no shortcut can act
+		 * behind the dialog — a second Delete press must not reach a delete.
+		 */
+		blocksKeyboard: boolean;
 	}) => void;
+	/**
+	 * Ref the list publishes its {@link MessageListCommands} into, so the route's
+	 * keyboard dispatcher can drive navigation and selection. Cleared on unmount.
+	 */
+	commandsRef?: RefObject<MessageListCommands | null>;
 	/**
 	 * Suppress the pane's built-in title header — the shared `MailHeader` above
 	 * the list owns it (the inbox renders inside `MailViewChrome`).
@@ -123,6 +168,7 @@ export const MessageList = ({
 	listTitle,
 	listMeta,
 	onTriageContextChange,
+	commandsRef,
 	hideHeader = false,
 }: MessageListProps) => {
 	const parentRef = useRef<HTMLDivElement>(null);
@@ -179,6 +225,20 @@ export const MessageList = ({
 		null,
 	);
 
+	// Set when a keyboard command moves the roving cursor. Real DOM focus then
+	// follows the cursor onto the row once the virtualizer has rendered it, so
+	// the browser's own focus — and therefore Tab, Shift+Tab and the focus ring
+	// — agree with what the list highlights (#43). Mouse-driven focus changes
+	// leave this null, so the list never yanks focus out of the reading pane.
+	const pendingDomFocusRef = useRef<string | null>(null);
+
+	// Whether the list can serve keyboard commands at all. It stays true while
+	// the delete confirmation is open — withdrawing the commands there would let
+	// the route fall through to its own unconfirmed delete on a second Delete
+	// press. The route suspends the whole keyboard layer for the dialog instead.
+	const commandsAvailable = !isLoading && threads.length > 0;
+	const confirmOpen = pendingDeleteIds !== null;
+
 	// Auto-exit multi-select when selection becomes empty
 	useEffect(() => {
 		if (isMultiSelectMode && selectedCount === 0) {
@@ -214,6 +274,7 @@ export const MessageList = ({
 				toggleCheck(thread.messageId);
 				return;
 			}
+			pendingDomFocusRef.current = thread.messageId;
 			setFocusedMessageId(thread.messageId);
 		},
 		[threads, isMultiSelectMode, toggleCheck],
@@ -235,6 +296,12 @@ export const MessageList = ({
 		moveFocusToIndex(prevIndex);
 	}, [threads.length, focusIndex, moveFocusToIndex]);
 
+	const focusFirst = useCallback(() => moveFocusToIndex(0), [moveFocusToIndex]);
+	const focusLast = useCallback(
+		() => moveFocusToIndex(threads.length - 1),
+		[moveFocusToIndex, threads.length],
+	);
+
 	// Toggle selection on the focused row with x.
 	const toggleFocusedSelection = useCallback(() => {
 		if (focusedMessageId) {
@@ -292,6 +359,7 @@ export const MessageList = ({
 			// Shift+arrow moves the focus cursor (not the open thread) and grows
 			// the selection from the anchor — the keyboard equivalent of
 			// shift-click.
+			pendingDomFocusRef.current = target;
 			setFocusedMessageId(target);
 		},
 		[orderedIds, focusedMessageId, selectRange],
@@ -309,13 +377,31 @@ export const MessageList = ({
 
 	// Delete / Backspace: confirm-delete the selection, or the focused row when
 	// nothing is selected.
-	const handleDeleteKey = useCallback(() => {
+	// Returns true when it took the keypress, so the route's fallback delete
+	// (which skips the confirmation) doesn't also fire.
+	const handleDeleteKey = useCallback((): boolean => {
+		// The confirmation is already asking about a delete: the keypress belongs
+		// to it, and answering it is the Confirm button's job. Claiming the press
+		// here is what stops a second Delete from reaching an unconfirmed delete.
+		if (pendingDeleteIds !== null) return true;
+		if (!onDeleteMessages) return false;
 		if (selectedCount > 0) {
 			requestDelete(Array.from(selectedIds));
-		} else if (focusedMessageId) {
+			return true;
+		}
+		if (focusedMessageId) {
 			requestDelete([focusedMessageId]);
+			return true;
 		}
-	}, [selectedCount, selectedIds, focusedMessageId, requestDelete]);
+		return false;
+	}, [
+		pendingDeleteIds,
+		onDeleteMessages,
+		selectedCount,
+		selectedIds,
+		focusedMessageId,
+		requestDelete,
+	]);
 
 	// Enter: open the focused row in the reading pane (sets selected/URL). This
 	// is the focus→open transition of the 2-state model.
@@ -503,8 +589,33 @@ export const MessageList = ({
 		onTriageContextChange?.({
 			focusedMessageId,
 			selectedIds: Array.from(selectedIds),
+			hasList: commandsAvailable,
+			blocksKeyboard: confirmOpen,
 		});
-	}, [focusedMessageId, selectedIds, onTriageContextChange]);
+	}, [
+		focusedMessageId,
+		selectedIds,
+		commandsAvailable,
+		confirmOpen,
+		onTriageContextChange,
+	]);
+
+	// Retract the context when the list goes away (drafts view, phone reading
+	// view). Without this the route keeps its list key handlers registered
+	// against a list that no longer exists, and goes on swallowing Enter, Space
+	// and ⌘A on a screen that has no rows.
+	const bridgeRef = useRef(onTriageContextChange);
+	bridgeRef.current = onTriageContextChange;
+	useEffect(
+		() => () =>
+			bridgeRef.current?.({
+				focusedMessageId: undefined,
+				selectedIds: [],
+				hasList: false,
+				blocksKeyboard: false,
+			}),
+		[],
+	);
 
 	// Clear selection when threads change (e.g., after delete)
 	useEffect(() => {
@@ -541,81 +652,65 @@ export const MessageList = ({
 		return () => scrollElement.removeEventListener("scroll", handleScroll);
 	}, [hasMore, isLoadingMore, onLoadMore]);
 
-	// Keyboard navigation. The dialog owns the keyboard while open, so list
-	// shortcuts pause to avoid double-handling (e.g. a second Delete press).
-	useKeyboardNavigation({
-		enabled: !isLoading && threads.length > 0 && pendingDeleteIds === null,
-		bindings: [
-			// Focus movement (plain). requireShift:false so Shift+Arrow falls
-			// through to the range-extend bindings below instead of also moving
-			// focus without selecting. j/k move the roving cursor WITHOUT opening
-			// the thread (#429) — only Enter / click open.
-			{ key: "j", handler: focusNext, preventDefault: true },
-			{
-				key: "ArrowDown",
-				handler: focusNext,
-				preventDefault: true,
-				requireShift: false,
-			},
-			{ key: "k", handler: focusPrevious, preventDefault: true },
-			{
-				key: "ArrowUp",
-				handler: focusPrevious,
-				preventDefault: true,
-				requireShift: false,
-			},
-			// Shift+Arrow: extend the selection range.
-			{
-				key: "ArrowDown",
-				handler: extendRangeDown,
-				preventDefault: true,
-				requireShift: true,
-			},
-			{
-				key: "ArrowUp",
-				handler: extendRangeUp,
-				preventDefault: true,
-				requireShift: true,
-			},
-			// Toggle focused row (x or Space) and re-anchor.
-			{ key: "x", handler: toggleFocusedSelection, preventDefault: true },
-			{ key: " ", handler: toggleFocusedSelection, preventDefault: true },
-			// Cmd/Ctrl+A select all loaded rows.
-			{
-				key: "a",
-				handler: handleSelectAll,
-				preventDefault: true,
-				requireMeta: true,
-			},
-			// Enter opens the focused message.
-			{ key: "Enter", handler: handleOpenFocused, preventDefault: true },
-			// Delete / Backspace: confirm-delete selection or focused row.
-			{ key: "Delete", handler: handleDeleteKey, preventDefault: true },
-			{ key: "Backspace", handler: handleDeleteKey, preventDefault: true },
-			// d: toggle density (comfortable / compact).
-			{ key: "d", handler: toggleDensity, preventDefault: true },
-		],
+	// Move real DOM focus onto the roving cursor after a keyboard move. The
+	// virtualizer may not have rendered the row yet on the commit that moved the
+	// cursor; the scroll effect above brings it in and this runs again on the
+	// next commit, so the lookup retries until the row exists.
+	useEffect(() => {
+		const messageId = pendingDomFocusRef.current;
+		if (!messageId) return;
+		const row = parentRef.current?.querySelector<HTMLElement>(
+			`[data-message-id="${messageId}"]`,
+		);
+		if (!row) return;
+		pendingDomFocusRef.current = null;
+		row.focus({ preventScroll: true });
 	});
 
-	// Esc-to-clear-selection on the capture phase, enabled only when a
-	// selection exists. Capture + stopPropagation makes a single Esc clear the
-	// selection and consume the keypress, so the route-level Esc (go back) does
-	// NOT also fire. With no selection this listener is disabled and Esc falls
-	// through to the route as before. The ConfirmDialog (when open) registers
-	// its own capture-phase Esc and pauses these list shortcuts, so its cancel
-	// still wins first.
-	useKeyboardNavigation({
-		enabled: hasSelection && pendingDeleteIds === null,
-		capture: true,
-		bindings: [
-			{
-				key: "Escape",
-				handler: clearSelection,
-				preventDefault: true,
-				stopPropagation: true,
+	useEffect(() => {
+		if (!commandsRef) return;
+		if (!commandsAvailable) {
+			commandsRef.current = null;
+			return;
+		}
+		commandsRef.current = {
+			focusNext,
+			focusPrevious,
+			focusFirst,
+			focusLast,
+			openFocused: handleOpenFocused,
+			toggleSelect: toggleFocusedSelection,
+			extendSelectDown: extendRangeDown,
+			extendSelectUp: extendRangeUp,
+			selectAll: handleSelectAll,
+			clearSelection: () => {
+				if (!hasSelection) return false;
+				clearSelection();
+				return true;
 			},
-		],
-	});
+			requestDelete: handleDeleteKey,
+			toggleDensity,
+		};
+		return () => {
+			commandsRef.current = null;
+		};
+	}, [
+		commandsRef,
+		commandsAvailable,
+		focusNext,
+		focusPrevious,
+		focusFirst,
+		focusLast,
+		handleOpenFocused,
+		toggleFocusedSelection,
+		extendRangeDown,
+		extendRangeUp,
+		handleSelectAll,
+		hasSelection,
+		clearSelection,
+		handleDeleteKey,
+		toggleDensity,
+	]);
 
 	// Derive the MessageListPane listState from the loading/error/empty signals.
 	const listState = isLoading
@@ -694,6 +789,17 @@ export const MessageList = ({
 
 	const activeSelectionBar = desktopSelectionBar ?? mobileSelectionBar;
 
+	// Roving tabindex: exactly one row is in the tab order, so Tab moves focus
+	// into the list at the cursor and Shift+Tab moves back out to the side panel
+	// instead of walking every row (#43).
+	const tabStopMessageId = tabStopId(orderedIds, focusedMessageId);
+
+	// A row focused by Tab or click becomes the cursor, so the keys act on what
+	// the browser says is focused.
+	const handleRowFocus = useCallback((messageId: string) => {
+		setFocusedMessageId(messageId);
+	}, []);
+
 	const isSearching = !!searchQuery?.trim();
 
 	// The virtualized list body: rows + search header + load-more indicator.
@@ -705,8 +811,17 @@ export const MessageList = ({
 			{isSearching && searchQuery && (
 				<SearchResultsHeader query={searchQuery} count={threads.length} />
 			)}
-			<div ref={parentRef} className="flex-1 overflow-y-auto">
+			<div
+				ref={parentRef}
+				role="listbox"
+				aria-multiselectable
+				aria-label={listTitle}
+				className="flex-1 overflow-y-auto"
+			>
+				{/* Virtualizer scaffolding — presentational so the listbox sees the
+				    rows as its options rather than these positioning wrappers. */}
 				<div
+					role="presentation"
 					className="relative w-full"
 					style={{ height: `${virtualizer.getTotalSize()}px` }}
 				>
@@ -715,6 +830,7 @@ export const MessageList = ({
 						return (
 							<div
 								key={virtualRow.key}
+								role="presentation"
 								data-index={virtualRow.index}
 								ref={virtualizer.measureElement}
 								className="absolute left-0 top-0 w-full border-b border-line"
@@ -726,6 +842,8 @@ export const MessageList = ({
 									accountId={accountId}
 									isSelected={selectedMessageId === thread.messageId}
 									isFocused={focusedMessageId === thread.messageId}
+									isTabStop={tabStopMessageId === thread.messageId}
+									onFocusRow={handleRowFocus}
 									isChecked={isChecked(thread.messageId)}
 									onToggleCheck={toggleCheck}
 									onRowSelect={handleRowSelect}

package/src/components/mail/MessageListItem.tsx

@@ -38,6 +38,14 @@ interface MessageListItemProps {
 	 * row shows the full highlight. Both can be true (the open row stays focused).
 	 */
 	isFocused?: boolean;
+	/**
+	 * Whether this row holds the list's single tab stop (roving tabindex). Every
+	 * other row is `tabIndex={-1}`, so Tab enters the list at the cursor and
+	 * Shift+Tab leaves it rather than stepping through hundreds of rows.
+	 */
+	isTabStop?: boolean;
+	/** Called when the row takes DOM focus, so the roving cursor follows it. */
+	onFocusRow?: (messageId: string) => void;
 	isChecked: boolean;
 	onToggleCheck: (id: string) => void;
 	/**
@@ -94,6 +102,8 @@ const MessageListItemComponent = ({
 	accountId,
 	isSelected,
 	isFocused = false,
+	isTabStop = false,
+	onFocusRow,
 	isChecked,
 	onToggleCheck,
 	onRowSelect,
@@ -116,22 +126,41 @@ const MessageListItemComponent = ({
 	// Desktop mouse selection semantics. Plain click falls through to the Link's
 	// navigation; shift / cmd / ctrl click is routed to selection and the
 	// navigation is suppressed. On mobile this is a no-op so taps still open.
+	//
+	// A modified click must preventDefault: the router skips navigation for any
+	// modified click and leaves the anchor's own default in place, which in a
+	// browser means shift-click opens a new window and cmd-click a new tab.
+	// Shift-click also drags a native text selection across the rows it spans,
+	// so drop it — the row highlight is the selection the user asked for.
 	const handleRowClick = useCallback(
 		(e: MouseEvent) => {
 			if (!isDesktop) return;
-			const handled = onRowSelect(messageId, {
+			const modifiers = {
 				shiftKey: e.shiftKey,
 				metaKey: e.metaKey,
 				ctrlKey: e.ctrlKey,
-			});
-			if (handled) {
-				e.preventDefault();
-				e.stopPropagation();
+			};
+			const handled = onRowSelect(messageId, modifiers);
+			if (!handled) return;
+			e.preventDefault();
+			e.stopPropagation();
+			if (modifiers.shiftKey) {
+				window.getSelection()?.removeAllRanges();
 			}
 		},
 		[isDesktop, onRowSelect, messageId],
 	);
 
+	// Shift-click starts a native text selection on mousedown; suppressing it
+	// there keeps the drag from painting a text range over the rows.
+	const handleRowMouseDown = useCallback(
+		(e: MouseEvent) => {
+			if (!isDesktop) return;
+			if (e.shiftKey) e.preventDefault();
+		},
+		[isDesktop],
+	);
+
 	const handleLongPress = useCallback(() => {
 		onLongPress?.(messageId);
 	}, [onLongPress, messageId]);
@@ -151,6 +180,24 @@ const MessageListItemComponent = ({
 		);
 	}, [queryClient, thread.messageId]);
 
+	const handleRowFocus = useCallback(() => {
+		prefetchMessage();
+		onFocusRow?.(messageId);
+	}, [prefetchMessage, onFocusRow, messageId]);
+
+	// Listbox semantics + roving tabindex, shared by both densities.
+	const rowInteractionProps = {
+		"data-message-row": true,
+		"data-message-id": messageId,
+		role: "option" as const,
+		"aria-selected": isChecked,
+		tabIndex: isTabStop ? 0 : -1,
+		onClick: handleRowClick,
+		onMouseDown: handleRowMouseDown,
+		onMouseEnter: prefetchMessage,
+		onFocus: handleRowFocus,
+	};
+
 	const unread = !thread.isRead;
 
 	if (density === "compact") {
@@ -162,13 +209,11 @@ const MessageListItemComponent = ({
 					...prev,
 					selectedMessageId: thread.messageId,
 				})}
-				data-message-row
-				onClick={handleRowClick}
-				onMouseEnter={prefetchMessage}
-				onFocus={prefetchMessage}
+				{...rowInteractionProps}
 				{...(!isDesktop && longPressHandlers.handlers)}
 				className={cn(
 					compactRowClass({ active: isSelected, focused: isFocused }),
+					"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
 					isChecked && "bg-accent-soft",
 					!isDesktop && "min-h-11",
 				)}
@@ -189,14 +234,12 @@ const MessageListItemComponent = ({
 				...prev,
 				selectedMessageId: thread.messageId,
 			})}
-			data-message-row
-			onClick={handleRowClick}
-			onMouseEnter={prefetchMessage}
-			onFocus={prefetchMessage}
+			{...rowInteractionProps}
 			{...(!isDesktop && longPressHandlers.handlers)}
 			className={cn(
 				"group",
 				comfortableRowClass({ active: isSelected, focused: isFocused }),
+				"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
 				isChecked && "bg-accent-soft",
 				!isDesktop && "min-h-11",
 			)}
@@ -222,6 +265,10 @@ const MessageListItemComponent = ({
 				/>
 				<button
 					type="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={handleCheckboxClick}
 					className={cn(
 						"absolute inset-0 size-7 rounded-full border items-center justify-center transition-opacity",

package/src/components/mail/SwipeableMessageRow.tsx

@@ -25,6 +25,10 @@ interface SwipeableMessageRowProps {
 	isSelected: boolean;
 	/** Roving keyboard focus cursor — renders the left accent rail (#429). */
 	isFocused?: boolean;
+	/** The one row in the tab order (roving tabindex). */
+	isTabStop?: boolean;
+	/** Called when the row takes DOM focus, so the cursor follows it. */
+	onFocusRow?: (messageId: string) => void;
 	isChecked: boolean;
 	onToggleCheck: (id: string) => void;
 	onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
@@ -63,6 +67,8 @@ export const SwipeableMessageRow = ({
 	accountId,
 	isSelected,
 	isFocused,
+	isTabStop,
+	onFocusRow,
 	isChecked,
 	onToggleCheck,
 	onRowSelect,
@@ -104,6 +110,8 @@ export const SwipeableMessageRow = ({
 				accountId={accountId}
 				isSelected={isSelected}
 				isFocused={isFocused}
+				isTabStop={isTabStop}
+				onFocusRow={onFocusRow}
 				isChecked={isChecked}
 				onToggleCheck={onToggleCheck}
 				onRowSelect={onRowSelect}

package/src/components/ui/ConfirmDialog.tsx

@@ -66,13 +66,15 @@ export const ConfirmDialog = ({
 	if (!isOpen) return null;
 
 	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			aria-hidden="true"
-			onClick={onCancel}
-		>
-			{/* Backdrop */}
-			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			{/* Backdrop. It carries the click-to-dismiss and the aria-hidden: the
+			    dialog itself must stay in the accessibility tree, and an
+			    aria-hidden ancestor would take it out. */}
+			<div
+				className="absolute inset-0 bg-canvas/80 backdrop-blur-sm"
+				aria-hidden="true"
+				onClick={onCancel}
+			/>
 
 			{/* Dialog */}
 			<div

package/src/hooks/useTriageKeyboard.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import type { TriageAction } from "@/lib/keymap";
 import {
 	dispatchKey,
+	isControlTarget,
 	isEditableTarget,
 	type SequencePrefix,
 } from "@/lib/keymap-dispatch";
@@ -27,14 +28,17 @@ interface UseTriageKeyboardOptions {
  * even Esc is left to the focused field's own handler) and carrying the `g …`
  * go-to sequence prefix across keystrokes with a timeout.
  *
- * Routing is intentionally NOT fully unified yet: this hook owns the action
- * verbs + go-to keys, while the list-local navigation keys (j/k/x/Enter/d,
- * Shift+arrow, Delete/Backspace) are still routed by MessageList's legacy
- * `useKeyboardNavigation`, `/` by SearchBar, and `?` by the mail layout — three
- * separate window listeners, each with its own (consistent) input-guard. The
- * `@/lib/keymap` module is the single source of truth for the DISPLAYED
- * bindings (the `?` overlay + tooltips), but not yet for routing. Consolidating
- * every binding through `dispatchKey` is a follow-up; see #429.
+ * List navigation and selection route through here and nowhere else: the
+ * message list publishes its commands upward (see `MessageListCommands`) and
+ * the route wires them into the handler table, so `@/lib/keymap` is the source
+ * of truth for both the displayed bindings and the routed ones. The list used
+ * to run a second window listener claiming the same keys, which is what made
+ * Enter unusable on every focused button in the app (#43).
+ *
+ * Other window-level keydown listeners still exist for keys this layer does not
+ * own — `?` at the mail layout, `/` in SearchBar, Esc in the compose and
+ * conversation views. They bind disjoint keys; only the list's competing
+ * listener was removed.
  *
  * Per-action targeting (focused row vs selection) and the actual mutations live
  * in the handlers the caller passes in — this hook only dispatches.
@@ -70,6 +74,7 @@ export function useTriageKeyboard({
 					ctrlKey: event.ctrlKey,
 					altKey: event.altKey,
 					inEditable: isEditableTarget(event.target),
+					onControl: isControlTarget(event.target),
 				},
 				prefixRef.current,
 			);

package/src/lib/keymap-dispatch.test.ts

@@ -12,6 +12,7 @@ const stroke = (partial: Partial<KeyStroke> & { key: string }): KeyStroke => ({
 	ctrlKey: false,
 	altKey: false,
 	inEditable: false,
+	onControl: false,
 	...partial,
 });
 
@@ -61,6 +62,82 @@ describe("dispatchKey — plain bindings", () => {
 	});
 });
 
+describe("dispatchKey — list navigation", () => {
+	const cases: Array<[string, string]> = [
+		["ArrowDown", "focusNext"],
+		["ArrowUp", "focusPrevious"],
+		["Home", "focusFirst"],
+		["End", "focusLast"],
+		[" ", "toggleSelect"],
+		["Delete", "delete"],
+		["Backspace", "delete"],
+	];
+
+	for (const [key, action] of cases) {
+		test(`'${key}' → ${action}`, () => {
+			const result = run({ key });
+			assert.strictEqual(result.action, action);
+			assert.strictEqual(result.preventDefault, true);
+		});
+	}
+
+	test("Shift+Arrow extends the selection instead of moving the cursor", () => {
+		assert.strictEqual(
+			run({ key: "ArrowDown", shiftKey: true }).action,
+			"extendSelectDown",
+		);
+		assert.strictEqual(
+			run({ key: "ArrowUp", shiftKey: true }).action,
+			"extendSelectUp",
+		);
+	});
+
+	test("⌘A / Ctrl+A selects every loaded row", () => {
+		assert.strictEqual(run({ key: "a", metaKey: true }).action, "selectAll");
+		assert.strictEqual(run({ key: "a", ctrlKey: true }).action, "selectAll");
+		assert.strictEqual(
+			run({ key: "a", metaKey: true }).preventDefault,
+			true,
+			"the browser's select-all-text default must be replaced",
+		);
+	});
+});
+
+describe("dispatchKey — controls keep their activation keys", () => {
+	// The regression behind #43: a global Enter binding cancelled the default
+	// action of whatever the user had tabbed to, so no button in the app could
+	// be activated from the keyboard.
+	test("Enter on a focused control is left to the control", () => {
+		const result = run({ key: "Enter", onControl: true });
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.preventDefault, false);
+	});
+
+	test("Space on a focused control is left to the control", () => {
+		const result = run({ key: " ", onControl: true });
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.preventDefault, false);
+	});
+
+	test("Enter and Space still drive the list away from a control", () => {
+		assert.strictEqual(run({ key: "Enter" }).action, "openFocused");
+		assert.strictEqual(run({ key: " " }).action, "toggleSelect");
+	});
+
+	test("non-activation keys still fire from a focused control", () => {
+		// Tabbing to a toolbar button must not strand the rest of the keymap.
+		assert.strictEqual(run({ key: "j", onControl: true }).action, "focusNext");
+		assert.strictEqual(run({ key: "r", onControl: true }).action, "reply");
+	});
+
+	test("an Enter released to a control still cancels a pending g prefix", () => {
+		assert.strictEqual(
+			run({ key: "Enter", onControl: true }, "g").nextPrefix,
+			null,
+		);
+	});
+});
+
 describe("dispatchKey — input suppression", () => {
 	test("plain keys are inert in an editable surface", () => {
 		assert.strictEqual(run({ key: "j", inEditable: true }).action, null);
@@ -98,8 +175,8 @@ describe("dispatchKey — modifiers", () => {
 	});
 
 	test("other meta combos are left to the browser", () => {
-		assert.strictEqual(run({ key: "a", metaKey: true }).action, null);
 		assert.strictEqual(run({ key: "c", metaKey: true }).action, null);
+		assert.strictEqual(run({ key: "f", metaKey: true }).action, null);
 	});
 
 	test("Shift+J / Shift+K extend the selection", () => {

package/src/lib/keymap-dispatch.ts

@@ -19,6 +19,15 @@ export interface KeyStroke {
 	altKey: boolean;
 	/** Whether the event originated inside an editable surface. */
 	inEditable: boolean;
+	/**
+	 * Whether the event originated on an activatable control that is not a
+	 * message-list row — a button, link, `role="button"`, `<summary>`. Enter and
+	 * Space are that control's activation keys, so the layer releases them; every
+	 * other binding still fires. Without this a global Enter binding cancels the
+	 * default action of whatever the user tabbed to, and no button in the app can
+	 * be activated from the keyboard.
+	 */
+	onControl: boolean;
 }
 
 /** Pending sequence-prefix state. `"g"` means a `g` was pressed recently. */
@@ -69,7 +78,14 @@ interface PlainBinding {
 const PLAIN_BINDINGS: Record<string, PlainBinding> = {
 	j: { action: "focusNext" },
 	k: { action: "focusPrevious" },
+	arrowdown: { action: "focusNext" },
+	arrowup: { action: "focusPrevious" },
+	home: { action: "focusFirst" },
+	end: { action: "focusLast" },
 	enter: { action: "openFocused" },
+	" ": { action: "toggleSelect" },
+	delete: { action: "delete" },
+	backspace: { action: "delete" },
 	u: { action: "toggleRead" },
 	x: { action: "toggleSelect" },
 	r: { action: "reply" },
@@ -118,12 +134,26 @@ export function dispatchKey(
 		return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
 	}
 
+	// Enter / Space belong to whatever control has focus. Releasing them here is
+	// what keeps Tab-to-a-button-then-Enter working anywhere in the app; the
+	// list's own rows are excluded from `onControl`, so the roving cursor still
+	// opens and selects.
+	if (stroke.onControl && (lower === "enter" || lower === " ")) {
+		return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
+	}
+
 	// ⌘N / Ctrl+N → compose. Checked before the prefix/plain tables so the
 	// browser's "new window" is the only thing we intercept among meta combos.
 	if (meta && lower === "n") {
 		return { action: "compose", nextPrefix: null, preventDefault: true };
 	}
 
+	// ⌘A / Ctrl+A → select every loaded row, replacing the browser's
+	// select-all-text default.
+	if (meta && lower === "a") {
+		return { action: "selectAll", nextPrefix: null, preventDefault: true };
+	}
+
 	// Any other meta/ctrl combo is left to the browser/OS.
 	if (meta) return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
 
@@ -145,13 +175,17 @@ export function dispatchKey(
 		return { action: null, nextPrefix: "g", preventDefault: true };
 	}
 
-	// Shift+J / Shift+K extend the selection.
-	if (stroke.shiftKey && (lower === "j" || lower === "k")) {
-		return {
-			action: lower === "j" ? "extendSelectDown" : "extendSelectUp",
-			nextPrefix: null,
-			preventDefault: true,
-		};
+	// Shift+J/K and Shift+Arrow extend the selection.
+	if (stroke.shiftKey) {
+		const down = lower === "j" || lower === "arrowdown";
+		const up = lower === "k" || lower === "arrowup";
+		if (down || up) {
+			return {
+				action: down ? "extendSelectDown" : "extendSelectUp",
+				nextPrefix: null,
+				preventDefault: true,
+			};
+		}
 	}
 
 	// Plain single-key bindings.
@@ -185,3 +219,26 @@ export function isEditableTarget(target: EventTarget | null): boolean {
 		target.isContentEditable
 	);
 }
+
+/**
+ * Marks an element as a message-list row. Rows are anchors, so they would
+ * otherwise read as ordinary controls; the list owns Enter/Space on them.
+ */
+export const ROW_ATTRIBUTE = "data-message-row";
+
+const CONTROL_SELECTOR =
+	'button, a[href], summary, [role="button"], [role="menuitem"], [role="tab"], [role="switch"], [role="checkbox"]';
+
+/**
+ * Whether the event target sits inside an activatable control that is not a
+ * message-list row. See {@link KeyStroke.onControl}.
+ */
+export function isControlTarget(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+	const control = target.closest(CONTROL_SELECTOR);
+	if (!control) return false;
+	// The nearest control wins. A row is an anchor and so matches the selector,
+	// but the list owns Enter/Space on its rows; a control nested *inside* a row
+	// (the select checkbox) is a control like any other and keeps its own keys.
+	return !control.hasAttribute(ROW_ATTRIBUTE);
+}

package/src/lib/keymap.ts

@@ -13,12 +13,15 @@ export type TriageAction =
 	// list navigation / focus model
 	| "focusNext"
 	| "focusPrevious"
+	| "focusFirst"
+	| "focusLast"
 	| "openFocused"
 	| "back"
 	// selection
 	| "toggleSelect"
 	| "extendSelectDown"
 	| "extendSelectUp"
+	| "selectAll"
 	// message verbs (focused row / selection)
 	| "reply"
 	| "replyAll"
@@ -76,6 +79,14 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 				keys: ["k"],
 				description: "Focus previous message",
 			},
+			{ action: "focusNext", keys: ["↓"], description: "Focus next message" },
+			{
+				action: "focusPrevious",
+				keys: ["↑"],
+				description: "Focus previous message",
+			},
+			{ action: "focusFirst", keys: ["Home"], description: "Focus first" },
+			{ action: "focusLast", keys: ["End"], description: "Focus last" },
 			{
 				action: "openFocused",
 				keys: ["Enter"],
@@ -88,6 +99,7 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 		title: "Selection",
 		hints: [
 			{ action: "toggleSelect", keys: ["x"], description: "Toggle select" },
+			{ action: "toggleSelect", keys: ["Space"], description: "Toggle select" },
 			{
 				action: "extendSelectDown",
 				keys: ["Shift", "j"],
@@ -98,6 +110,17 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 				keys: ["Shift", "k"],
 				description: "Extend selection up",
 			},
+			{
+				action: "extendSelectDown",
+				keys: ["Shift", "↓"],
+				description: "Extend selection down",
+			},
+			{
+				action: "extendSelectUp",
+				keys: ["Shift", "↑"],
+				description: "Extend selection up",
+			},
+			{ action: "selectAll", keys: ["⌘", "A"], description: "Select all" },
 		],
 	},
 	{

package/src/lib/list-focus.test.ts

@@ -0,0 +1,25 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { tabStopId } from "./list-focus.ts";
+
+const ids = ["a", "b", "c"];
+
+describe("tabStopId", () => {
+	test("the cursor row holds the tab stop", () => {
+		assert.strictEqual(tabStopId(ids, "b"), "b");
+	});
+
+	test("an untouched list puts the tab stop on the first row", () => {
+		assert.strictEqual(tabStopId(ids, undefined), "a");
+	});
+
+	test("a cursor that no longer exists falls back to the first row", () => {
+		// After a delete or a refetch the cursor can name a row that is gone; the
+		// list must keep a tab stop or Tab skips over it entirely.
+		assert.strictEqual(tabStopId(ids, "zzz"), "a");
+	});
+
+	test("an empty list has no tab stop", () => {
+		assert.strictEqual(tabStopId([], "a"), undefined);
+	});
+});

package/src/lib/list-focus.ts

@@ -0,0 +1,24 @@
+/**
+ * Roving-tabindex math for the message list.
+ *
+ * A virtualized list of hundreds of rows must expose exactly one tab stop:
+ * Tab then moves focus into the list at the keyboard cursor and Shift+Tab moves
+ * back out to the side panel, instead of walking every row. Pure so the rule is
+ * testable without a DOM.
+ */
+
+/**
+ * The id of the row that holds the list's tab stop. The keyboard cursor owns it
+ * while it points at a loaded row; otherwise the first row does, so an untouched
+ * list is still reachable with one Tab.
+ */
+export function tabStopId(
+	orderedIds: string[],
+	focusedId: string | undefined,
+): string | undefined {
+	if (orderedIds.length === 0) return undefined;
+	if (focusedId !== undefined && orderedIds.includes(focusedId)) {
+		return focusedId;
+	}
+	return orderedIds[0];
+}