@remit/ui 0.0.108 → 0.0.109

package/package.json

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