From 5bd67e88175eb141ea08f51b5350c017fee52479 Mon Sep 17 00:00:00 2001
From: iyiolacak <iyiolacak0@gmail.com>
Date: Sun, 31 Aug 2025 22:45:12 +0300
Subject: [PATCH 1/2] fix(media-overlay): add cursor-pointer when clickable

---
 .../web/src/components/editor/media-panel/drag-overlay.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
index e1fd257ec..d4196c7b8 100644
--- a/apps/web/src/components/editor/media-panel/drag-overlay.tsx
+++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
@@ -1,4 +1,4 @@
-import { Upload, Plus, Image } from "lucide-react";
+import { Upload } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 interface MediaDragOverlayProps {
@@ -27,7 +27,10 @@ export function MediaDragOverlay({
 
   return (
     <div
-      className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"
+      className={[
+        "flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8",
+        !isProcessing && onClick ? "cursor-pointer" : "cursor-default"
+      ].join(" ")}
       onClick={handleClick}
     >
       <div className="flex items-center justify-center">

From b3fd01ba2df39ebe45d9da7df4d7af33565fd408 Mon Sep 17 00:00:00 2001
From: iyiolacak <iyiolacak0@gmail.com>
Date: Sun, 31 Aug 2025 23:02:49 +0300
Subject: [PATCH 2/2] fix(media-overlay): add cursor-pointer when clickable,
 use cn, and improve a11y

- Use cn() instead of manual array.join for cleaner class handling
- Apply cursor-pointer only when overlay is clickable (&& onClick)
- Add role=button, tabIndex, aria-disabled, and onKeyDown for keyboard accessibility
---
 .../editor/media-panel/drag-overlay.tsx       | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
index d4196c7b8..553abef90 100644
--- a/apps/web/src/components/editor/media-panel/drag-overlay.tsx
+++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
@@ -1,5 +1,7 @@
 import { Upload } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
 
 interface MediaDragOverlayProps {
   isVisible: boolean;
@@ -24,14 +26,27 @@ export function MediaDragOverlay({
     e.stopPropagation();
     onClick();
   };
+  const isClickable = !isProcessing && !!onClick;
 
   return (
     <div
-      className={[
+      className={cn(
         "flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8",
-        !isProcessing && onClick ? "cursor-pointer" : "cursor-default"
-      ].join(" ")}
+        isClickable ? "cursor-pointer" : "cursor-default"
+      )}
       onClick={handleClick}
+      
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      aria-disabled={isProcessing || !onClick || undefined}
+      // Without onKeyDown: only mouse users can trigger it. With onKeyDown; also keyboard users.
+      onKeyDown={(e) => {
+        if (!isClickable) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
     >
       <div className="flex items-center justify-center">
         <Upload className="h-10 w-10 text-foreground" />