From 84d3211a1cbbf8f713d05ab7d036389cb3b53dfd Mon Sep 17 00:00:00 2001
From: Leon-JavaScript <70959426+Leon-JavaScript@users.noreply.github.com>
Date: Sun, 15 Feb 2026 14:26:32 +0100
Subject: [PATCH] feat: enhance DialogContent with keyboard navigation support

---
 src/components/ui/dialog.tsx | 75 +++++++++++++++++++++++++++---------
 1 file changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index eb875e5..8420cf1 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -32,25 +32,61 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-state-open:bg-accent data-state-open:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
+>(({ className, children, onKeyDown, ...props }, ref) => {
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      onKeyDown?.(event as React.KeyboardEvent<HTMLDivElement>)
+      if (event.defaultPrevented) return
+      if (event.key !== "Enter") return
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+
+      const target = event.target as HTMLElement | null
+      if (!target) return
+      if (target.isContentEditable || target.tagName === "TEXTAREA") return
+
+      const content = event.currentTarget as HTMLElement
+      const explicitTarget = content.querySelector<HTMLElement>(
+        "[data-dialog-submit='true'], button[type='submit']"
+      )
+      const footerButtons = Array.from(
+        content.querySelectorAll<HTMLElement>(
+          "[data-dialog-footer] button:not([disabled])"
+        )
+      )
+      const fallbackTarget =
+        footerButtons[footerButtons.length - 1] ??
+        content.querySelector<HTMLElement>("button:not([disabled])")
+
+      const actionTarget = explicitTarget ?? fallbackTarget
+      if (!actionTarget) return
+
+      event.preventDefault()
+      actionTarget.click()
+    },
+    [onKeyDown]
+  )
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 sm:rounded-lg",
+          className
+        )}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-state-open:bg-accent data-state-open:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+})
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
@@ -76,6 +112,7 @@ const DialogFooter = ({
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
       className
     )}
+    data-dialog-footer
     {...props}
   />
 )