From 92c0579a494d1fbf941a053331df698cd83e5780 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Sun, 19 Apr 2026 21:21:54 +0800
Subject: [PATCH] fix: resolve all a11y lint warnings in collage preview

Add proper ARIA roles and keyboard handlers to interactive overlays,
replace drag handle div with semantic button element.
---
 apps/web/src/components/tools/collage-preview.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/tools/collage-preview.tsx b/apps/web/src/components/tools/collage-preview.tsx
index 20d90b76..41bfe2bd 100644
--- a/apps/web/src/components/tools/collage-preview.tsx
+++ b/apps/web/src/components/tools/collage-preview.tsx
@@ -495,9 +495,12 @@ function CollageCell({
       {/* Top bar — drag handle + fit/fill toggle */}
       {isSelected && image && !isLoading && (
         <div
+          role="toolbar"
+          aria-label="Image controls"
           className="absolute top-1.5 right-1.5 flex items-center gap-1"
           onClick={(e) => e.stopPropagation()}
           onDoubleClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
         >
           <button
             type="button"
@@ -522,16 +525,16 @@ function CollageCell({
               </>
             )}
           </button>
-          <div
+          <button
+            type="button"
             ref={setDragRef}
             {...listeners}
             {...attributes}
-            role="group"
             aria-label="Drag to reorder"
             className="bg-black/50 backdrop-blur-sm text-white rounded p-1 cursor-grab active:cursor-grabbing hover:bg-black/70 transition-colors"
           >
             <GripVertical className="h-3.5 w-3.5" />
-          </div>
+          </button>
         </div>
       )}
 
@@ -546,6 +549,7 @@ function CollageCell({
           )}
           onClick={(e) => e.stopPropagation()}
           onDoubleClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
           onPointerDown={(e) => e.stopPropagation()}
         >
           <input