From b9987a42647d63ddfaa4c69990cedb051cd6fa66 Mon Sep 17 00:00:00 2001
From: Sumit-5002 <173078713+Sumit-5002@users.noreply.github.com>
Date: Thu, 26 Mar 2026 06:19:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20workspace?=
 =?UTF-8?q?=20accessibility=20and=20safety?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces several micro-UX and accessibility enhancements to the tool runners and workspace:
- Added descriptive ARIA labels and titles to all icon-only buttons (Remove, Preview, Move Up/Down) in `PdfMergeTool` and `ImageResizeTool`, including the filename for context.
- Replaced plain text 'x' and '×' markers with proper Lucide icons for better visual consistency.
- Implemented a confirmation dialog for the 'Clear All' action in `ToolWorkspace` to prevent accidental loss of uploaded files.
- Improved the 'Clear All' button label by removing the underscore.
- Ensured all changes are under the 50-line limit per file.

♿ Accessibility: Icon-only buttons are now screen-reader friendly and have helpful tooltips.
🎯 Why: Prevents accidental data loss and ensures a consistent, accessible experience across tool runners.
---
 .../tools/runners/common/ToolWorkspace.jsx       | 13 +++++++++++--
 .../tools/runners/image/ImageResizeTool.jsx      | 12 ++++++++++--
 src/features/tools/runners/pdf/PdfMergeTool.jsx  | 16 ++++++++++------
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/features/tools/runners/common/ToolWorkspace.jsx b/src/features/tools/runners/common/ToolWorkspace.jsx
index 2b61e5f..37d3773 100644
--- a/src/features/tools/runners/common/ToolWorkspace.jsx
+++ b/src/features/tools/runners/common/ToolWorkspace.jsx
@@ -168,9 +168,18 @@ function ToolWorkspace({
                         </>
                     )}
                     {showHeaderActions && onReset && (
-                        <button className="btn-reset-workspace bg-red-500/10 hover:bg-red-500/20 text-red-500 rounded-xl px-4 py-2 text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2" onClick={onReset}>
+                        <button
+                            className="btn-reset-workspace bg-red-500/10 hover:bg-red-500/20 text-red-500 rounded-xl px-4 py-2 text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2"
+                            onClick={() => {
+                                if (window.confirm('Are you sure you want to clear all files? This action cannot be undone.')) {
+                                    onReset();
+                                }
+                            }}
+                            title="Clear all files from workspace"
+                            aria-label="Clear all files from workspace"
+                        >
                             <Trash2 size={14} />
-                            <span>Clear_All</span>
+                            <span>Clear All</span>
                         </button>
                     )}
                 </div>
diff --git a/src/features/tools/runners/image/ImageResizeTool.jsx b/src/features/tools/runners/image/ImageResizeTool.jsx
index 583417d..07d2f56 100644
--- a/src/features/tools/runners/image/ImageResizeTool.jsx
+++ b/src/features/tools/runners/image/ImageResizeTool.jsx
@@ -5,7 +5,7 @@ import ToolWorkspace from '../common/ToolWorkspace';
 import FileUploader from '../../../../components/ui/FileUploader';
 import useParallelFileProcessor from '../../../../hooks/useParallelFileProcessor';
 import FileThumbnail from '../../../../components/tools/shared/FileThumbnail';
-import { Maximize, Settings, ImageIcon, Check } from 'lucide-react';
+import { Maximize, Settings, ImageIcon, Check, X } from 'lucide-react';
 import '../common/ToolWorkspace.css';
 
 const getBaseName = (name) => name.replace(/\.[^/.]+$/, '');
@@ -179,7 +179,15 @@ function ImageResizeTool({ tool, onFilesAdded: parentOnFilesAdded }) {
                                     <div className="text-slate-600 text-[10px] font-black uppercase tracking-widest">Queued</div>
                                 )}
                             </div>
-                            <button className="text-slate-500 hover:text-red-500 p-1 rounded-lg hover:bg-red-500/10 transition-colors" onClick={() => removeFile(id)} disabled={processing}>x</button>
+                            <button
+                                className="text-slate-500 hover:text-red-500 p-1 rounded-lg hover:bg-red-500/10 transition-colors"
+                                onClick={() => removeFile(id)}
+                                disabled={processing}
+                                title={`Remove ${file.name}`}
+                                aria-label={`Remove ${file.name}`}
+                            >
+                                <X size={14} />
+                            </button>
                         </div>
                     </div>
                 ))}
diff --git a/src/features/tools/runners/pdf/PdfMergeTool.jsx b/src/features/tools/runners/pdf/PdfMergeTool.jsx
index 091fc04..7aa24e1 100644
--- a/src/features/tools/runners/pdf/PdfMergeTool.jsx
+++ b/src/features/tools/runners/pdf/PdfMergeTool.jsx
@@ -3,7 +3,7 @@ import pdfService from '../../../../services/pdfService';
 import serverProcessingService from '../../../../services/serverProcessingService';
 import FileUploader from '../../../../components/ui/FileUploader';
 import ToolWorkspace from '../common/ToolWorkspace';
-import { FileText, ArrowUpDown, ChevronUp, ChevronDown, Eye } from 'lucide-react';
+import { FileText, ArrowUpDown, ChevronUp, ChevronDown, Eye, X } from 'lucide-react';
 import '../common/ToolWorkspace.css';
 
 function PdfMergeTool({ tool, onFilesAdded: parentOnFilesAdded }) {
@@ -112,7 +112,8 @@ function PdfMergeTool({ tool, onFilesAdded: parentOnFilesAdded }) {
                             <button
                                 className="btn-icon"
                                 onClick={() => handlePreview(file)}
-                                title="Preview PDF"
+                                title={`Preview ${file.name}`}
+                                aria-label={`Preview ${file.name}`}
                             >
                                 <Eye size={16} />
                             </button>
@@ -121,7 +122,8 @@ function PdfMergeTool({ tool, onFilesAdded: parentOnFilesAdded }) {
                                     className="btn-icon"
                                     onClick={() => handleMove(i, -1)}
                                     disabled={i === 0}
-                                    title="Move Up"
+                                    title={`Move ${file.name} Up`}
+                                    aria-label={`Move ${file.name} Up`}
                                 >
                                     <ChevronUp size={14} />
                                 </button>
@@ -129,7 +131,8 @@ function PdfMergeTool({ tool, onFilesAdded: parentOnFilesAdded }) {
                                     className="btn-icon"
                                     onClick={() => handleMove(i, 1)}
                                     disabled={i === files.length - 1}
-                                    title="Move Down"
+                                    title={`Move ${file.name} Down`}
+                                    aria-label={`Move ${file.name} Down`}
                                 >
                                     <ChevronDown size={14} />
                                 </button>
@@ -137,9 +140,10 @@ function PdfMergeTool({ tool, onFilesAdded: parentOnFilesAdded }) {
                             <button
                                 className="btn-icon-danger"
                                 onClick={() => setFiles(files.filter((_, idx) => idx !== i))}
-                                title="Remove File"
+                                title={`Remove ${file.name}`}
+                                aria-label={`Remove ${file.name}`}
                             >
-                                ×
+                                <X size={16} />
                             </button>
                         </div>
                     </div>