Skip to content

Commit 66b69c5

Browse files
wei201806wei201806
committed
Merge PR winfunc#403: Add screen reader labels to icon-only buttons for accessibility
2 parents 354f5df + 59456c4 commit 66b69c5

23 files changed

+138
-14
lines changed

‎src/components/AgentExecution.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -549,6 +549,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
549549
title={t('agentExecution.back')}
550550
>
551551
<ArrowLeft className="h-4 w-4" />
552+
<span className="sr-only">Back</span>
552553
</Button>
553554
<div>
554555
<h1 className="text-heading-1">{agent.name}</h1>

‎src/components/AgentRunView.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,7 @@ export const AgentRunView: React.FC<AgentRunViewProps> = ({
259259
className="h-8 w-8"
260260
>
261261
<ArrowLeft className="h-4 w-4" />
262+
<span className="sr-only">Back</span>
262263
</Button>
263264
<div className="flex items-center gap-2">
264265
{renderIcon(run.agent_icon)}

‎src/components/Agents.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,7 @@ export const Agents: React.FC = () => {
357357
<DropdownMenuTrigger asChild>
358358
<Button variant="ghost" size="icon" className="h-8 w-8">
359359
<ChevronDown className="w-4 h-4" />
360+
<span className="sr-only">Agent options</span>
360361
</Button>
361362
</DropdownMenuTrigger>
362363
<DropdownMenuContent align="end">

‎src/components/CCAgents.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@ export const CCAgents: React.FC<CCAgentsProps> = ({ onBack, className }) => {
308308
className="h-8 w-8"
309309
>
310310
<ArrowLeft className="h-4 w-4" />
311+
<span className="sr-only">Back</span>
311312
</Button>
312313
<div>
313314
<h1 className="text-heading-1">{t('agents.title')}</h1>

‎src/components/ClaudeCodeSession.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1390,7 +1390,17 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
13901390
transition={{ duration: 0.15 }}
13911391
>
13921392
<Button variant="ghost" size="icon" onClick={() => setQueuedPromptsCollapsed(prev => !prev)}>
1393-
{queuedPromptsCollapsed ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
1393+
{queuedPromptsCollapsed ? (
1394+
<>
1395+
<ChevronUp className="h-3 w-3" />
1396+
<span className="sr-only">Expand queue</span>
1397+
</>
1398+
) : (
1399+
<>
1400+
<ChevronDown className="h-3 w-3" />
1401+
<span className="sr-only">Collapse queue</span>
1402+
</>
1403+
)}
13941404
</Button>
13951405
</motion.div>
13961406
</TooltipSimple>
@@ -1424,6 +1434,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
14241434
onClick={() => setQueuedPrompts(prev => prev.filter(p => p.id !== queuedPrompt.id))}
14251435
>
14261436
<X className="h-3 w-3" />
1437+
<span className="sr-only">Remove from queue</span>
14271438
</Button>
14281439
</motion.div>
14291440
</motion.div>
@@ -1459,7 +1470,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
14591470
top: 0,
14601471
behavior: 'smooth'
14611472
});
1462-
1473+
14631474
// After smooth scroll completes, trigger a small scroll to ensure rendering
14641475
setTimeout(() => {
14651476
if (parentRef.current) {
@@ -1477,6 +1488,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
14771488
className="px-3 py-2 hover:bg-accent rounded-none"
14781489
>
14791490
<ChevronUp className="h-4 w-4" />
1491+
<span className="sr-only">Scroll to top</span>
14801492
</Button>
14811493
</motion.div>
14821494
</TooltipSimple>
@@ -1510,6 +1522,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
15101522
className="px-3 py-2 hover:bg-accent rounded-none"
15111523
>
15121524
<ChevronDown className="h-4 w-4" />
1525+
<span className="sr-only">Scroll to bottom</span>
15131526
</Button>
15141527
</motion.div>
15151528
</TooltipSimple>
@@ -1543,6 +1556,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
15431556
className="h-9 w-9 text-muted-foreground hover:text-foreground"
15441557
>
15451558
<GitBranch className={cn("h-3.5 w-3.5", showTimeline && "text-primary")} />
1559+
<span className="sr-only">Session Timeline</span>
15461560
</Button>
15471561
</motion.div>
15481562
</TooltipSimple>
@@ -1561,6 +1575,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
15611575
className="h-9 w-9 text-muted-foreground hover:text-foreground"
15621576
>
15631577
<Copy className="h-3.5 w-3.5" />
1578+
<span className="sr-only">Copy conversation</span>
15641579
</Button>
15651580
</motion.div>
15661581
</TooltipSimple>
@@ -1603,6 +1618,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
16031618
className="h-8 w-8 text-muted-foreground hover:text-foreground"
16041619
>
16051620
<Wrench className={cn("h-3.5 w-3.5", showSettings && "text-primary")} />
1621+
<span className="sr-only">Checkpoint Settings</span>
16061622
</Button>
16071623
</motion.div>
16081624
</TooltipSimple>
@@ -1655,6 +1671,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
16551671
className="h-8 w-8"
16561672
>
16571673
<X className="h-4 w-4" />
1674+
<span className="sr-only">Close timeline</span>
16581675
</Button>
16591676
</div>
16601677

‎src/components/ClaudeFileEditor.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export const ClaudeFileEditor: React.FC<ClaudeFileEditorProps> = ({
112112
className="h-8 w-8"
113113
>
114114
<ArrowLeft className="h-4 w-4" />
115+
<span className="sr-only">Back</span>
115116
</Button>
116117
<div className="min-w-0 flex-1">
117118
<h2 className="text-lg font-semibold truncate">{file.relative_path}</h2>

‎src/components/ClaudeMemoriesDropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ export const ClaudeMemoriesDropdown: React.FC<ClaudeMemoriesDropdownProps> = ({
145145
}}
146146
>
147147
<Edit2 className="h-3 w-3" />
148+
<span className="sr-only">Edit file</span>
148149
</Button>
149150
</motion.div>
150151
))}

‎src/components/CreateAgent.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
142142
title={t('agents.create.backTitle')}
143143
>
144144
<ArrowLeft className="h-4 w-4" />
145+
<span className="sr-only">Back to Agents</span>
145146
</Button>
146147
</motion.div>
147148
<div>

‎src/components/CustomTitlebar.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
9898
{isHovered && (
9999
<X size={8} className="text-red-900 opacity-60 group-hover:opacity-100" />
100100
)}
101+
<span className="sr-only">Close window</span>
101102
</button>
102103

103104
{/* Minimize button */}
@@ -112,6 +113,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
112113
{isHovered && (
113114
<Minus size={8} className="text-yellow-900 opacity-60 group-hover:opacity-100" />
114115
)}
116+
<span className="sr-only">Minimize window</span>
115117
</button>
116118

117119
{/* Maximize button */}
@@ -126,6 +128,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
126128
{isHovered && (
127129
<Square size={6} className="text-green-900 opacity-60 group-hover:opacity-100" />
128130
)}
131+
<span className="sr-only">Maximize window</span>
129132
</button>
130133
</div>
131134
</div>
@@ -157,6 +160,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
157160
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
158161
>
159162
<Bot size={16} />
163+
<span className="sr-only">Agents</span>
160164
</motion.button>
161165
</TooltipSimple>
162166
)}
@@ -170,6 +174,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
170174
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
171175
>
172176
<BarChart3 size={16} />
177+
<span className="sr-only">Usage Dashboard</span>
173178
</motion.button>
174179
</TooltipSimple>
175180
)}
@@ -189,6 +194,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
189194
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors tauri-no-drag"
190195
>
191196
<Settings size={16} />
197+
<span className="sr-only">Settings</span>
192198
</motion.button>
193199
</TooltipSimple>
194200
)}
@@ -203,6 +209,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
203209
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors flex items-center gap-1"
204210
>
205211
<MoreVertical size={16} />
212+
<span className="sr-only">More options</span>
206213
</motion.button>
207214
</TooltipSimple>
208215

‎src/components/FilePicker.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,7 @@ export const FilePicker: React.FC<FilePickerProps> = ({
383383
className="h-8 w-8"
384384
>
385385
<ArrowLeft className="h-4 w-4" />
386+
<span className="sr-only">Navigate up</span>
386387
</Button>
387388
<span className="text-sm font-mono text-muted-foreground truncate max-w-[300px]">
388389
{relativePath}
@@ -395,6 +396,7 @@ export const FilePicker: React.FC<FilePickerProps> = ({
395396
className="h-8 w-8"
396397
>
397398
<X className="h-4 w-4" />
399+
<span className="sr-only">Close</span>
398400
</Button>
399401
</div>
400402
</div>

0 commit comments

Comments
 (0)