@remit/ui 0.0.107 → 0.0.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.107",
+  "version": "0.0.109",
   "type": "module",
   "files": [
     "src"

package/src/components/confirm-dialog.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
+import { DialogBackdrop } from "./dialog-backdrop.js";
 
 export interface ConfirmDialogProps {
 	isOpen: boolean;
@@ -80,13 +81,10 @@ export const ConfirmDialog = ({
 		// confirmation is the decision blocking whatever is under it, and a drawer
 		// portalled to the body at the same level would cover it.
 		<div className="fixed inset-0 z-[60] 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}
+			<DialogBackdrop
+				label="Dismiss confirmation"
+				onDismiss={onCancel}
+				className="backdrop-blur-sm"
 			/>
 
 			{/* Dialog */}
@@ -99,8 +97,6 @@ export const ConfirmDialog = ({
 					"bg-surface border border-line rounded-sm shadow-lg",
 					"p-6",
 				)}
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
 			>
 				<h2 className="text-lg font-semibold">{title}</h2>
 				{description && (

package/src/components/dialog-backdrop.tsx

@@ -0,0 +1,30 @@
+import { cn } from "../lib/cn.js";
+
+export interface DialogBackdropProps {
+	/** Names the dismissal to assistive technology, e.g. `"Close"`. */
+	label: string;
+	onDismiss: () => void;
+	className?: string;
+}
+
+/**
+ * The scrim behind a modal and the click-to-dismiss on it, in the shape
+ * `BottomSheet` already uses: a real button rather than a click handler on a
+ * div, out of the tab order because Escape and the dialog's own Close are the
+ * keyboard's way out. It sits as a sibling of the dialog card, never its
+ * ancestor, so a click on the card is not a click on the scrim and nothing has
+ * to stop propagation to survive.
+ */
+export const DialogBackdrop = ({
+	label,
+	onDismiss,
+	className,
+}: DialogBackdropProps) => (
+	<button
+		type="button"
+		aria-label={label}
+		tabIndex={-1}
+		onClick={onDismiss}
+		className={cn("absolute inset-0 bg-canvas/80", className)}
+	/>
+);

package/src/components/dialog.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useCallback, useEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
+import { DialogBackdrop } from "./dialog-backdrop.js";
 
 export interface DialogProps {
 	open: boolean;
@@ -64,7 +65,6 @@ export function Dialog({
 	const isRight = anchor === "right";
 
 	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: outer overlay closes dialog on click; role=presentation lets inner role=dialog own the AT semantics
 		<div
 			className={cn(
 				"fixed inset-0 z-50 flex",
@@ -74,10 +74,8 @@ export function Dialog({
 						? "items-stretch justify-end"
 						: "items-center justify-center px-4",
 			)}
-			role="presentation"
-			onClick={onClose}
 		>
-			<div className="absolute inset-0 bg-canvas/80" />
+			<DialogBackdrop label="Dismiss dialog" onDismiss={onClose} />
 			<div
 				ref={dialogRef}
 				role="dialog"
@@ -94,8 +92,6 @@ export function Dialog({
 							: "w-full max-w-lg rounded-md border",
 					className,
 				)}
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
 			>
 				<h2 id="dialog-title" className="sr-only">
 					{title}

package/src/components/nav-link-surface.interaction.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Mounted against jsdom rather than `renderToString`, since focus and clicks
+ * need a real `document`. Enter-to-activate is the browser's own behaviour and
+ * jsdom does not implement it for anchors; `detail-surface.stories.tsx` covers
+ * that in Chromium.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement, type MouseEvent } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { NavLinkSurface } from "./nav-link-surface.js";
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.MouseEvent = dom.window.MouseEvent;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+function mount(props: Parameters<typeof NavLinkSurface>[0]) {
+	act(() => {
+		root.render(createElement(NavLinkSurface, props, "Daily brief"));
+	});
+	const link = container.querySelector("a");
+	assert.ok(link, "no anchor rendered");
+	return link;
+}
+
+function click(target: Element, init: { metaKey?: boolean } = {}) {
+	act(() => {
+		target.dispatchEvent(
+			new dom.window.MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				...init,
+			}),
+		);
+	});
+}
+
+describe("NavLinkSurface interaction", () => {
+	it("puts a link with an href in the tab order", () => {
+		const link = mount({ href: "/mail/brief" });
+		link.focus();
+		assert.equal(dom.window.document.activeElement, link);
+	});
+
+	it("keeps a link with no href out of the tab order", () => {
+		const link = mount({});
+		link.focus();
+		assert.notEqual(dom.window.document.activeElement, link);
+	});
+
+	it("passes a modified click through with its modifier intact", () => {
+		const seen: boolean[] = [];
+		const link = mount({
+			href: "/mail/brief",
+			onClick: (event: MouseEvent<HTMLAnchorElement>) => {
+				event.preventDefault();
+				seen.push(event.metaKey);
+			},
+		});
+
+		click(link);
+		click(link, { metaKey: true });
+
+		assert.deepEqual(seen, [false, true]);
+	});
+
+	it("adds no click handling of its own when the caller passes none", () => {
+		const link = mount({ href: "/mail/brief" });
+		const event = new dom.window.MouseEvent("click", {
+			bubbles: true,
+			cancelable: true,
+		});
+		act(() => {
+			link.dispatchEvent(event);
+		});
+		assert.equal(event.defaultPrevented, false);
+	});
+});

package/src/components/nav-link-surface.render.test.ts

@@ -0,0 +1,126 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { NavLinkSurface } from "./nav-link-surface.js";
+
+describe("NavLinkSurface", () => {
+	it("renders a real anchor carrying the href", () => {
+		const html = renderToString(
+			createElement(NavLinkSurface, { href: "/mail/brief" }, "Daily brief"),
+		);
+		assert.match(html, /^<a /);
+		assert.match(html, /href="\/mail\/brief"/);
+		assert.match(html, /Daily brief/);
+	});
+
+	it("renders no href attribute when given none", () => {
+		const html = renderToString(
+			createElement(NavLinkSurface, {}, "Daily brief"),
+		);
+		assert.doesNotMatch(html, /href=/);
+	});
+
+	it("marks the current destination and styles it", () => {
+		const html = renderToString(
+			createElement(
+				NavLinkSurface,
+				{ href: "/mail/brief", current: "page" },
+				"Daily brief",
+			),
+		);
+		assert.match(html, /aria-current="page"/);
+		assert.match(html, /bg-accent-2-soft/);
+		assert.doesNotMatch(html, /text-fg-muted/);
+	});
+
+	it("styles a caller-supplied aria-current the same way", () => {
+		const html = renderToString(
+			createElement(
+				NavLinkSurface,
+				{ href: "/mail/brief", "aria-current": "page" },
+				"Daily brief",
+			),
+		);
+		assert.match(html, /aria-current="page"/);
+		assert.match(html, /bg-accent-2-soft/);
+	});
+
+	it("treats aria-current=false as not current", () => {
+		const html = renderToString(
+			createElement(
+				NavLinkSurface,
+				{ href: "/mail/brief", "aria-current": "false" },
+				"Daily brief",
+			),
+		);
+		assert.match(html, /text-fg-muted/);
+		assert.doesNotMatch(html, /bg-accent-2-soft/);
+	});
+
+	it("carries a focus ring on every variant", () => {
+		for (const variant of ["nav", "row", "inline"] as const) {
+			const html = renderToString(
+				createElement(NavLinkSurface, { href: "/x", variant }, "x"),
+			);
+			assert.match(html, /focus-visible:ring-2/, variant);
+			assert.match(html, /focus-visible:ring-ring/, variant);
+		}
+	});
+
+	it("rings a full-bleed row inside its own edge", () => {
+		const html = renderToString(
+			createElement(NavLinkSurface, { href: "/x", variant: "row" }, "x"),
+		);
+		assert.match(html, /focus-visible:ring-inset/);
+		assert.doesNotMatch(html, /ring-offset/);
+	});
+
+	it("rings a nav entry outside its own edge", () => {
+		const html = renderToString(
+			createElement(NavLinkSurface, { href: "/x", variant: "nav" }, "x"),
+		);
+		assert.match(html, /focus-visible:ring-offset-1/);
+		assert.doesNotMatch(html, /ring-inset/);
+	});
+
+	it("underlines the inline variant on hover", () => {
+		const html = renderToString(
+			createElement(NavLinkSurface, { href: "/x", variant: "inline" }, "x"),
+		);
+		assert.match(html, /hover:underline/);
+		assert.match(html, /text-accent/);
+	});
+
+	it("lets a caller's className override the variant's own colours", () => {
+		const html = renderToString(
+			createElement(
+				NavLinkSurface,
+				{ href: "/x", className: "text-danger" },
+				"x",
+			),
+		);
+		assert.match(html, /text-danger/);
+		assert.doesNotMatch(html, /text-fg-muted/);
+	});
+
+	it("passes anchor attributes straight through", () => {
+		const html = renderToString(
+			createElement(
+				NavLinkSurface,
+				{
+					href: "https://example.com",
+					target: "_blank",
+					rel: "noopener noreferrer",
+					"data-testid": "nav-link",
+					title: "Example",
+				},
+				"x",
+			),
+		);
+		assert.match(html, /target="_blank"/);
+		assert.match(html, /rel="noopener noreferrer"/);
+		assert.match(html, /data-testid="nav-link"/);
+		assert.match(html, /title="Example"/);
+	});
+});

package/src/components/nav-link-surface.tsx

@@ -0,0 +1,97 @@
+import type { AnchorHTMLAttributes, AriaAttributes, Ref } from "react";
+import { cn } from "../lib/cn.js";
+
+export type NavLinkSurfaceVariant = "nav" | "row" | "inline";
+
+/** Every `aria-current` value ARIA defines, minus the absent case. */
+export type NavLinkCurrent = NonNullable<AriaAttributes["aria-current"]>;
+
+export interface NavLinkSurfaceProps
+	extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	variant?: NavLinkSurfaceVariant;
+	/**
+	 * Which kind of "current" this destination is. Sets `aria-current` and turns
+	 * on the current-state styling together, so the two cannot disagree. A
+	 * caller that already sets `aria-current` — the router binding does — gets
+	 * the same styling without passing this.
+	 */
+	current?: NavLinkCurrent;
+	ref?: Ref<HTMLAnchorElement>;
+	/** `data-status` is what the router's link props mark an active link with. */
+	[key: `data-${string}`]: unknown;
+}
+
+const OFFSET_RING =
+	"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface";
+
+/** A full-bleed row has no margin to spend on an offset ring. */
+const INSET_RING =
+	"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
+
+const variants: Record<
+	NavLinkSurfaceVariant,
+	{ base: string; rest: string; current: string }
+> = {
+	nav: {
+		base: cn(
+			"flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors",
+			OFFSET_RING,
+		),
+		rest: "text-fg-muted hover:bg-surface hover:text-fg",
+		current: "bg-accent-2-soft font-medium text-accent-2",
+	},
+	row: {
+		base: cn(
+			"relative flex w-full items-start text-left transition-colors",
+			INSET_RING,
+		),
+		rest: "hover:bg-surface-sunken",
+		current: "bg-accent-2-soft",
+	},
+	inline: {
+		base: cn(
+			"rounded-sm underline-offset-2 transition-colors hover:underline",
+			OFFSET_RING,
+		),
+		rest: "text-accent hover:text-accent-hover",
+		current: "font-medium text-accent",
+	},
+};
+
+function isCurrent(value: NavLinkCurrent | undefined): boolean {
+	return value !== undefined && value !== false && value !== "false";
+}
+
+/**
+ * The design system's navigation link: a real `<a>`, so middle-click, cmd-click,
+ * "copy link address" and the browser's own Enter handling all work without a
+ * single handler of ours. It carries appearance and accessible state only —
+ * where the link goes is the router binding's business, and this package imports
+ * no router.
+ */
+export function NavLinkSurface({
+	variant = "nav",
+	current,
+	"aria-current": ariaCurrent,
+	className,
+	children,
+	ref,
+	...props
+}: NavLinkSurfaceProps) {
+	const resolved = current ?? ariaCurrent;
+	const style = variants[variant];
+	return (
+		<a
+			ref={ref}
+			aria-current={resolved}
+			className={cn(
+				style.base,
+				isCurrent(resolved) ? style.current : style.rest,
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</a>
+	);
+}

package/src/index.ts

@@ -167,6 +167,10 @@ export {
 	type DangerZoneSectionProps,
 } from "./components/danger-zone-section.js";
 export { Dialog, type DialogProps } from "./components/dialog.js";
+export {
+	DialogBackdrop,
+	type DialogBackdropProps,
+} from "./components/dialog-backdrop.js";
 export type { EmailFrameVariant } from "./components/email-frame-css.js";
 export {
 	FieldLabel,
@@ -362,6 +366,7 @@ export {
 	MobileSearchView,
 	type MobileSearchViewProps,
 } from "./components/mobile-search-view.js";
+export { NavLinkSurface } from "./components/nav-link-surface.js";
 export {
 	NavSidebar,
 	type NavSidebarProps,