From 1e3689c99c6bc20581f1d53d44f9e00ac2bacb4f Mon Sep 17 00:00:00 2001
From: Daniel Jankowski <djank0113@gmail.com>
Date: Sat, 23 Aug 2025 15:39:08 -0400
Subject: [PATCH] feat(ui): add accessibility attributes to action buttons

Add type, aria-label, and aria-hidden attributes to action and icon buttons across task and document components to improve accessibility and assistive technology support.
---
 .../components/project-tasks/DocumentCard.tsx |  7 ++++--
 .../project-tasks/DraggableTaskCard.tsx       | 22 ++++++++++++++-----
 .../project-tasks/TaskTableView.tsx           | 16 ++++++++++----
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/archon-ui-main/src/components/project-tasks/DocumentCard.tsx b/archon-ui-main/src/components/project-tasks/DocumentCard.tsx
index 096b7319..e6ec5b9b 100644
--- a/archon-ui-main/src/components/project-tasks/DocumentCard.tsx
+++ b/archon-ui-main/src/components/project-tasks/DocumentCard.tsx
@@ -99,17 +99,20 @@ export const DocumentCard: React.FC<DocumentCardProps> = ({
           {document.id.slice(0, 8)}...
         </span>
         <button 
+          type="button"
           onClick={handleCopyId}
           className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
           title="Copy Document ID to clipboard"
+          aria-label="Copy Document ID to clipboard"
         >
-          <Clipboard className="w-3 h-3" />
+          <Clipboard className="w-3 h-3" aria-hidden="true" />
         </button>
       </div>
       
       {/* Delete Button */}
       {showDelete && !isActive && (
         <button
+          type="button"
           onClick={(e) => {
             e.stopPropagation();
             if (confirm(`Delete "${document.title}"?`)) {
@@ -120,7 +123,7 @@ export const DocumentCard: React.FC<DocumentCardProps> = ({
           aria-label={`Delete ${document.title}`}
           title="Delete document"
         >
-          <X className="w-4 h-4" />
+          <X className="w-4 h-4" aria-hidden="true" />
         </button>
       )}
     </div>
diff --git a/archon-ui-main/src/components/project-tasks/DraggableTaskCard.tsx b/archon-ui-main/src/components/project-tasks/DraggableTaskCard.tsx
index 64c18f61..a610030f 100644
--- a/archon-ui-main/src/components/project-tasks/DraggableTaskCard.tsx
+++ b/archon-ui-main/src/components/project-tasks/DraggableTaskCard.tsx
@@ -145,31 +145,37 @@ export const DraggableTaskCard = ({
               {/* Action buttons group */}
               <div className="ml-auto flex items-center gap-1.5">
                 <button 
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     onDelete(task);
                   }} 
                   className="w-5 h-5 rounded-full flex items-center justify-center bg-red-100/80 dark:bg-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-500/30 hover:shadow-[0_0_10px_rgba(239,68,68,0.3)] transition-all duration-300"
                   title="Delete task"
+                  aria-label="Delete task"
                 >
-                  <Trash2 className="w-3 h-3" />
+                  <Trash2 className="w-3 h-3" aria-hidden="true" />
                 </button>
                 <button 
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     onView();
                   }} 
                   className="w-5 h-5 rounded-full flex items-center justify-center bg-cyan-100/80 dark:bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
                   title="Edit task"
+                  aria-label="Edit task"
                 >
-                  <Edit className="w-3 h-3" />
+                  <Edit className="w-3 h-3" aria-hidden="true" />
                 </button>
                 <button 
+                  type="button"
                   onClick={toggleFlip} 
                   className="w-5 h-5 rounded-full flex items-center justify-center bg-cyan-100/80 dark:bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
                   title="View task details"
+                  aria-label="View task details"
                 >
-                  <RefreshCw className="w-3 h-3" />
+                  <RefreshCw className="w-3 h-3" aria-hidden="true" />
                 </button>
               </div>
             </div>
@@ -191,6 +197,7 @@ export const DraggableTaskCard = ({
                 <span className="text-gray-600 dark:text-gray-400 text-xs">{task.assignee?.name || 'User'}</span>
               </div>
               <button 
+                type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                   navigator.clipboard.writeText(task.id);
@@ -204,8 +211,9 @@ export const DraggableTaskCard = ({
                 }}
                 className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
                 title="Copy Task ID to clipboard"
+                aria-label="Copy Task ID to clipboard"
               >
-                <Clipboard className="w-3 h-3" />
+                <Clipboard className="w-3 h-3" aria-hidden="true" />
                 <span>Task ID</span>
               </button>
             </div>
@@ -225,11 +233,13 @@ export const DraggableTaskCard = ({
                 {task.title}
               </h4>
               <button 
+                type="button"
                 onClick={toggleFlip} 
                 className="ml-auto w-5 h-5 rounded-full flex items-center justify-center bg-cyan-100/80 dark:bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
                 title="Flip back to front"
+                aria-label="Flip back to front"
               >
-                <RefreshCw className="w-3 h-3" />
+                <RefreshCw className="w-3 h-3" aria-hidden="true" />
               </button>
             </div>
             
@@ -241,7 +251,7 @@ export const DraggableTaskCard = ({
             </div>
           </div>
         </div>
-      </div> 
+      </div>
     </div>
   );
 }; 
\ No newline at end of file
diff --git a/archon-ui-main/src/components/project-tasks/TaskTableView.tsx b/archon-ui-main/src/components/project-tasks/TaskTableView.tsx
index 76a2d20f..795a758a 100644
--- a/archon-ui-main/src/components/project-tasks/TaskTableView.tsx
+++ b/archon-ui-main/src/components/project-tasks/TaskTableView.tsx
@@ -366,28 +366,35 @@ const DraggableTaskRow = ({
       <td className="p-3">
         <div className="flex justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
           <button 
+            type="button"
             onClick={() => onTaskDelete(task)}
             className="p-1.5 rounded-full bg-red-500/20 text-red-500 hover:bg-red-500/30 hover:shadow-[0_0_10px_rgba(239,68,68,0.3)] transition-all duration-300"
             title="Delete task"
+            aria-label="Delete task"
           >
-            <Trash2 className="w-3.5 h-3.5" />
+            <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
           </button>
           <button 
+            type="button"
             onClick={() => onTaskComplete(task.id)} 
             className="p-1.5 rounded-full bg-green-500/20 text-green-500 hover:bg-green-500/30 hover:shadow-[0_0_10px_rgba(34,197,94,0.3)] transition-all duration-300"
             title="Mark task as complete"
+            aria-label="Mark task as complete"
           >
-            <Check className="w-3.5 h-3.5" />
+            <Check className="w-3.5 h-3.5" aria-hidden="true" />
           </button>
           <button 
+            type="button"
             onClick={() => onTaskView(task)} 
             className="p-1.5 rounded-full bg-cyan-500/20 text-cyan-500 hover:bg-cyan-500/30 hover:shadow-[0_0_10px_rgba(34,211,238,0.3)] transition-all duration-300"
             title="Edit task"
+            aria-label="Edit task"
           >
-            <Edit className="w-3.5 h-3.5" />
+            <Edit className="w-3.5 h-3.5" aria-hidden="true" />
           </button>
           {/* Copy Task ID Button - Matching Board View */}
           <button 
+            type="button"
             onClick={(e) => {
               e.stopPropagation();
               navigator.clipboard.writeText(task.id);
@@ -401,8 +408,9 @@ const DraggableTaskRow = ({
             }}
             className="p-1.5 rounded-full bg-gray-500/20 text-gray-500 hover:bg-gray-500/30 hover:shadow-[0_0_10px_rgba(107,114,128,0.3)] transition-all duration-300"
             title="Copy Task ID to clipboard"
+            aria-label="Copy Task ID to clipboard"
           >
-            <Clipboard className="w-3.5 h-3.5" />
+            <Clipboard className="w-3.5 h-3.5" aria-hidden="true" />
           </button>
         </div>
       </td>