From 9fe833bcfc82503d45884097072fa130dae19baa Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Wed, 18 Feb 2026 20:33:41 +0100
Subject: [PATCH] code-review-fix task 11.4: add aria-pressed to span drawing
 and prediction toggle buttons

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

diff --git a/src/components/PredictionPanel.tsx b/src/components/PredictionPanel.tsx
index 2ef01a9..baa3922 100644
--- a/src/components/PredictionPanel.tsx
+++ b/src/components/PredictionPanel.tsx
@@ -160,6 +160,7 @@ export default function PredictionPanel({
                 <label className="text-[10px] text-muted-foreground">Show on chart</label>
                 <button
                   onClick={onToggleVisibility}
+                  aria-pressed={visible}
                   className={`px-2 py-0.5 text-[10px] rounded transition-colors ${
                     visible
                       ? 'bg-primary/20 text-primary'
diff --git a/src/components/Toolbox.tsx b/src/components/Toolbox.tsx
index 70d57b5..894faee 100644
--- a/src/components/Toolbox.tsx
+++ b/src/components/Toolbox.tsx
@@ -126,6 +126,7 @@ export default function Toolbox({
         <button
           onClick={() => handleToolClick('rectangle')}
           aria-label="Rectangle annotation tool"
+          aria-pressed={activeTool === 'rectangle'}
           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'
@@ -137,6 +138,7 @@ export default function Toolbox({
         <button
           onClick={() => handleToolClick('span')}
           aria-label="Span annotation tool"
+          aria-pressed={activeTool === 'span'}
           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'
@@ -148,6 +150,7 @@ export default function Toolbox({
         <button
           onClick={() => handleToolClick('line')}
           aria-label="Draw line tool"
+          aria-pressed={activeTool === 'line'}
           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'
@@ -159,6 +162,7 @@ export default function Toolbox({
         <button
           onClick={() => handleToolClick('delete')}
           aria-label="Delete annotation tool"
+          aria-pressed={activeTool === 'delete'}
           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'
@@ -177,6 +181,7 @@ export default function Toolbox({
               key={type.id}
               onClick={() => handleToolClick(type.name)}
               aria-label={`${type.display_name} marker tool`}
+              aria-pressed={activeTool === type.name}
               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'