From f444c3a63766155dbbffa9ed04388f1bb136e43e Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Wed, 18 Feb 2026 20:30:29 +0100
Subject: [PATCH] code-review-fix task 11.1: add aria-label to all toolbar
 buttons in Toolbox.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Toolbox.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Toolbox.tsx b/src/components/Toolbox.tsx
index b014091..70d57b5 100644
--- a/src/components/Toolbox.tsx
+++ b/src/components/Toolbox.tsx
@@ -125,6 +125,7 @@ export default function Toolbox({
       <div className="flex gap-1">
         <button
           onClick={() => handleToolClick('rectangle')}
+          aria-label="Rectangle annotation tool"
           className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
             activeTool === 'rectangle'
               ? 'bg-primary text-primary-foreground'
@@ -135,6 +136,7 @@ export default function Toolbox({
         </button>
         <button
           onClick={() => handleToolClick('span')}
+          aria-label="Span annotation tool"
           className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
             activeTool === 'span'
               ? 'bg-primary text-primary-foreground'
@@ -145,6 +147,7 @@ export default function Toolbox({
         </button>
         <button
           onClick={() => handleToolClick('line')}
+          aria-label="Draw line tool"
           className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
             activeTool === 'line'
               ? 'bg-primary text-primary-foreground'
@@ -155,6 +158,7 @@ export default function Toolbox({
         </button>
         <button
           onClick={() => handleToolClick('delete')}
+          aria-label="Delete annotation tool"
           className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
             activeTool === 'delete'
               ? 'bg-destructive text-destructive-foreground'
@@ -172,6 +176,7 @@ export default function Toolbox({
             <button
               key={type.id}
               onClick={() => handleToolClick(type.name)}
+              aria-label={`${type.display_name} marker tool`}
               className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
                 activeTool === type.name
                   ? 'bg-primary text-primary-foreground'
@@ -195,6 +200,7 @@ export default function Toolbox({
             <button
               key={preset.color}
               onClick={() => onColorChange(preset.color)}
+              aria-label={`Select ${preset.name} color`}
               className={`flex-1 h-6 rounded-sm border-2 transition-all ${
                 isSelected
                   ? 'scale-105 ring-1 ring-offset-1 ring-offset-sidebar'
@@ -215,6 +221,7 @@ export default function Toolbox({
       {/* Labels Section - collapsible */}
       <button
         onClick={() => setLabelsExpanded(!labelsExpanded)}
+        aria-label={labelsExpanded ? 'Collapse annotations panel' : 'Expand annotations panel'}
         className="w-full flex items-center justify-between py-1 mt-1"
       >
         <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
@@ -300,6 +307,7 @@ export default function Toolbox({
                       </div>
                       <button
                         className="p-0.5 text-muted-foreground hover:text-destructive"
+                        aria-label={`Delete annotation from ${new Date(annotation.timestamp * 1000).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`}
                         onClick={(e) => handleLabelDelete(annotation.id, e)}
                       >
                         <Trash2 className="w-3 h-3" />