trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

code-review-fix task 11.1: add aria-label to all toolbar buttons in Toolbox.tsx

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marko Djordjevic 2026-02-18 20:30:29 +01:00
parent e5ce5cb2e4
commit f444c3a637
1 changed files with 8 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Toolbox.tsx
View file

@ -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" />