mirrors/archon
1
0
Fork 0
mirror of https://github.com/coleam00/Archon.git synced 2026-01-04 21:58:47 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add accessibility attributes to action buttons

Browse Source 
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.
This commit is contained in:
Daniel Jankowski
2025-08-23 15:39:08 -04:00
committed by Wirasm
parent 8cfdd91a82
commit 1e3689c99c
3 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
archon-ui-main/src/components/project-tasks/DocumentCard.tsx
View File

@@ -99,17 +99,20 @@ export const DocumentCard: React.FC<DocumentCardProps> = ({
{document.id.slice(0, 8)}... {document.id.slice(0, 8)}...
</span> </span>
<button <button
type="button"
onClick={handleCopyId} 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" 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" 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> </button>
</div> </div>
{/* Delete Button */} {/* Delete Button */}
{showDelete && !isActive && ( {showDelete && !isActive && (
<button <button
type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (confirm(`Delete "${document.title}"?`)) { if (confirm(`Delete "${document.title}"?`)) {
@@ -120,7 +123,7 @@ export const DocumentCard: React.FC<DocumentCardProps> = ({
aria-label={`Delete ${document.title}`} aria-label={`Delete ${document.title}`}
title="Delete document" title="Delete document"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" aria-hidden="true" />
</button> </button>
)} )}
</div> </div>

22
archon-ui-main/src/components/project-tasks/DraggableTaskCard.tsx
View File

@@ -145,31 +145,37 @@ export const DraggableTaskCard = ({
{/* Action buttons group */} {/* Action buttons group */}
<div className="ml-auto flex items-center gap-1.5"> <div className="ml-auto flex items-center gap-1.5">
<button <button
type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onDelete(task); 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" 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" title="Delete task"
aria-label="Delete task"
> >
<Trash2 className="w-3 h-3" /> <Trash2 className="w-3 h-3" aria-hidden="true" />
</button> </button>
<button <button
type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onView(); 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" 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" title="Edit task"
aria-label="Edit task"
> >
<Edit className="w-3 h-3" /> <Edit className="w-3 h-3" aria-hidden="true" />
</button> </button>
<button <button
type="button"
onClick={toggleFlip} 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" 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" 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> </button>
</div> </div>
</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> <span className="text-gray-600 dark:text-gray-400 text-xs">{task.assignee?.name || 'User'}</span>
</div> </div>
<button <button
type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigator.clipboard.writeText(task.id); 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" 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" 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> <span>Task ID</span>
</button> </button>
</div> </div>
@@ -225,11 +233,13 @@ export const DraggableTaskCard = ({
{task.title} {task.title}
</h4> </h4>
<button <button
type="button"
onClick={toggleFlip} 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" 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" 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> </button>
</div> </div>
@@ -241,7 +251,7 @@ export const DraggableTaskCard = ({
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };

16
archon-ui-main/src/components/project-tasks/TaskTableView.tsx
View File

@@ -366,28 +366,35 @@ const DraggableTaskRow = ({
<td className="p-3"> <td className="p-3">
<div className="flex justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button <button
type="button"
onClick={() => onTaskDelete(task)} 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" 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" 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>
<button <button
type="button"
onClick={() => onTaskComplete(task.id)} 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" 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" 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>
<button <button
type="button"
onClick={() => onTaskView(task)} 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" 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" 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> </button>
{/* Copy Task ID Button - Matching Board View */} {/* Copy Task ID Button - Matching Board View */}
<button <button
type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
navigator.clipboard.writeText(task.id); 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" 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" 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> </button>
</div> </div>
</td> </td>