feat(a11y): apply ARIA roles, landmarks, focus management, touch targets and contrast fixes across components

This commit is contained in:
DrSmoothl
2026-03-05 21:57:36 +08:00
parent c12d1ca42a
commit c658b2314d
32 changed files with 365 additions and 156 deletions

View File

@@ -228,7 +228,10 @@ export function PlannerMonitor({ autoRefresh, refreshKey }: PlannerMonitorProps)
<div
key={chat.chat_id}
className="border rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer"
role="button"
tabIndex={0}
onClick={() => handleChatClick(chat)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleChatClick(chat) } }}
>
<div className="flex items-start justify-between mb-2">
<div className="flex items-center gap-2">
@@ -327,7 +330,10 @@ export function PlannerMonitor({ autoRefresh, refreshKey }: PlannerMonitorProps)
<div
key={plan.filename}
className="border rounded-lg p-3 hover:bg-accent/50 transition-colors cursor-pointer"
role="button"
tabIndex={0}
onClick={() => handleLogClick(plan.chat_id, plan.filename)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleLogClick(plan.chat_id, plan.filename) } }}
>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-muted-foreground">

View File

@@ -228,7 +228,10 @@ export function ReplierMonitor({ autoRefresh, refreshKey }: ReplierMonitorProps)
<div
key={chat.chat_id}
className="border rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer"
role="button"
tabIndex={0}
onClick={() => handleChatClick(chat)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleChatClick(chat) } }}
>
<div className="flex items-start justify-between mb-2">
<div className="flex items-center gap-2">
@@ -327,7 +330,10 @@ export function ReplierMonitor({ autoRefresh, refreshKey }: ReplierMonitorProps)
<div
key={reply.filename}
className="border rounded-lg p-3 hover:bg-accent/50 transition-colors cursor-pointer"
role="button"
tabIndex={0}
onClick={() => handleLogClick(reply.chat_id, reply.filename)}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleLogClick(reply.chat_id, reply.filename) } }}
>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-muted-foreground">