From 4b86f7064713a3739b96f64bb89b98f511cd1453 Mon Sep 17 00:00:00 2001
From: Ghvst <impoissants@gmail.com>
Date: Sun, 12 Apr 2026 22:13:16 +0100
Subject: [PATCH] fix(ui): add ARIA labels, semantic HTML, and non-color status
 indicators

Several UI components relied on color alone to convey state, which is
inaccessible to colorblind users and screen reader users. This commit
addresses accessibility gaps across the component tree.

- AiStatusCard: add progressbar role with aria-valuenow/min/max to
  budget bar; show "Critical" / "Low" text labels alongside color
- TaskRow: add aria-label to all state toggle buttons (pending,
  in_progress, review, done, dismissed), drag handle, edit, and
  comment buttons
- ProjectItem: add sr-only text for the red notification dot so
  screen readers announce "Has tasks awaiting review"
- AgentControls: add aria-label to the icon-only pause/resume button
- SchedulingSection: wrap time inputs in <label> elements with
  sr-only text ("Start time" / "End time")
- BudgetSection: add aria-label to the budget ceiling slider
- ProjectList: convert project list from <div> to <ul>/<li> with
  aria-label for proper list semantics

SUSTN-Task: 631e29c5-0740-4528-b5ab-b8093031a9e4
---
 src/ui/components/main/AgentControls.tsx      |  1 +
 .../settings/sections/BudgetSection.tsx       |  1 +
 .../settings/sections/SchedulingSection.tsx   | 59 +++++++++++--------
 src/ui/components/sidebar/AiStatusCard.tsx    | 27 +++++++--
 src/ui/components/sidebar/ProjectItem.tsx     | 10 +++-
 src/ui/components/sidebar/ProjectList.tsx     | 17 +++---
 src/ui/components/tasks/TaskRow.tsx           | 10 +++-
 7 files changed, 88 insertions(+), 37 deletions(-)

diff --git a/src/ui/components/main/AgentControls.tsx b/src/ui/components/main/AgentControls.tsx
index 4e37ace..8bb1906 100644
--- a/src/ui/components/main/AgentControls.tsx
+++ b/src/ui/components/main/AgentControls.tsx
@@ -36,6 +36,7 @@ export function AgentControls({
                 onClick={toggleAgent}
                 disabled={updateConfig.isPending}
                 title={isEnabled ? "Pause agent" : "Resume agent"}
+                aria-label={isEnabled ? "Pause agent" : "Resume agent"}
             >
                 {isEnabled ? (
                     <Pause className="h-3.5 w-3.5" />
diff --git a/src/ui/components/settings/sections/BudgetSection.tsx b/src/ui/components/settings/sections/BudgetSection.tsx
index 7b329f1..f788b1f 100644
--- a/src/ui/components/settings/sections/BudgetSection.tsx
+++ b/src/ui/components/settings/sections/BudgetSection.tsx
@@ -53,6 +53,7 @@ export function BudgetSection() {
                                 max={100}
                                 step={5}
                                 className="w-full"
+                                aria-label={`Budget ceiling: ${ceiling}% of weekly budget`}
                             />
                             <div className="flex items-center justify-between">
                                 <p className="text-sm font-medium text-foreground">
diff --git a/src/ui/components/settings/sections/SchedulingSection.tsx b/src/ui/components/settings/sections/SchedulingSection.tsx
index ea3f12a..edbf8ca 100644
--- a/src/ui/components/settings/sections/SchedulingSection.tsx
+++ b/src/ui/components/settings/sections/SchedulingSection.tsx
@@ -194,31 +194,44 @@ export function SchedulingSection() {
                                 sublabel={`The agent will work between ${settings.scheduleStart} and ${settings.scheduleEnd}. Times are in ${settings.scheduleTimezone || detectedTimezone}.`}
                             >
                                 <div className="flex items-center gap-2">
-                                    <input
-                                        type="time"
-                                        value={settings.scheduleStart}
-                                        onChange={(e) =>
-                                            updateSetting({
-                                                key: "scheduleStart",
-                                                value: e.target.value,
-                                            })
-                                        }
-                                        className="rounded-md border border-input bg-transparent px-2 py-1.5 text-xs outline-none focus:ring-1 focus:ring-ring"
-                                    />
-                                    <span className="text-xs text-muted-foreground">
+                                    <label className="flex items-center gap-1.5">
+                                        <span className="sr-only">
+                                            Start time
+                                        </span>
+                                        <input
+                                            type="time"
+                                            value={settings.scheduleStart}
+                                            onChange={(e) =>
+                                                updateSetting({
+                                                    key: "scheduleStart",
+                                                    value: e.target.value,
+                                                })
+                                            }
+                                            className="rounded-md border border-input bg-transparent px-2 py-1.5 text-xs outline-none focus:ring-1 focus:ring-ring"
+                                        />
+                                    </label>
+                                    <span
+                                        className="text-xs text-muted-foreground"
+                                        aria-hidden="true"
+                                    >
                                         to
                                     </span>
-                                    <input
-                                        type="time"
-                                        value={settings.scheduleEnd}
-                                        onChange={(e) =>
-                                            updateSetting({
-                                                key: "scheduleEnd",
-                                                value: e.target.value,
-                                            })
-                                        }
-                                        className="rounded-md border border-input bg-transparent px-2 py-1.5 text-xs outline-none focus:ring-1 focus:ring-ring"
-                                    />
+                                    <label className="flex items-center gap-1.5">
+                                        <span className="sr-only">
+                                            End time
+                                        </span>
+                                        <input
+                                            type="time"
+                                            value={settings.scheduleEnd}
+                                            onChange={(e) =>
+                                                updateSetting({
+                                                    key: "scheduleEnd",
+                                                    value: e.target.value,
+                                                })
+                                            }
+                                            className="rounded-md border border-input bg-transparent px-2 py-1.5 text-xs outline-none focus:ring-1 focus:ring-ring"
+                                        />
+                                    </label>
                                 </div>
                             </SettingsRow>
                         </div>
diff --git a/src/ui/components/sidebar/AiStatusCard.tsx b/src/ui/components/sidebar/AiStatusCard.tsx
index 43a963c..b757af8 100644
--- a/src/ui/components/sidebar/AiStatusCard.tsx
+++ b/src/ui/components/sidebar/AiStatusCard.tsx
@@ -33,10 +33,16 @@ export function AiStatusCard() {
             : 0;
     const remainingPercent = 100 - usedPercent;
 
-    // Bar color
+    // Bar color and budget level label
     let barColor = "bg-foreground";
-    if (remainingPercent <= 10) barColor = "bg-red-500";
-    else if (remainingPercent <= 30) barColor = "bg-amber-500";
+    let budgetLevel = "";
+    if (remainingPercent <= 10) {
+        barColor = "bg-red-500";
+        budgetLevel = "Critical";
+    } else if (remainingPercent <= 30) {
+        barColor = "bg-amber-500";
+        budgetLevel = "Low";
+    }
 
     // Status display
     let icon: React.ReactNode;
@@ -136,7 +142,14 @@ export function AiStatusCard() {
                 {/* Budget bar */}
                 {budget && (
                     <div className="mt-2.5">
-                        <div className="h-1 w-full rounded-full bg-sidebar-border/40 overflow-hidden">
+                        <div
+                            role="progressbar"
+                            aria-label="Budget remaining"
+                            aria-valuenow={Math.round(remainingPercent)}
+                            aria-valuemin={0}
+                            aria-valuemax={100}
+                            className="h-1 w-full rounded-full bg-sidebar-border/40 overflow-hidden"
+                        >
                             <div
                                 className={`h-full rounded-full transition-all ${barColor}`}
                                 style={{
@@ -145,6 +158,12 @@ export function AiStatusCard() {
                             />
                         </div>
                         <p className="mt-1 text-[10px] tabular-nums text-sidebar-foreground/50">
+                            {budgetLevel && (
+                                <span className="font-medium">
+                                    {budgetLevel}
+                                    {" \u00B7 "}
+                                </span>
+                            )}
                             {Math.round(available / 1000)}k remaining
                         </p>
                     </div>
diff --git a/src/ui/components/sidebar/ProjectItem.tsx b/src/ui/components/sidebar/ProjectItem.tsx
index 131bbd9..e02233e 100644
--- a/src/ui/components/sidebar/ProjectItem.tsx
+++ b/src/ui/components/sidebar/ProjectItem.tsx
@@ -61,7 +61,15 @@ export function ProjectItem({
                     {initial}
                 </span>
                 {hasUnseenReview && (
-                    <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-red-500 ring-2 ring-sidebar" />
+                    <>
+                        <span
+                            className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-red-500 ring-2 ring-sidebar"
+                            aria-hidden="true"
+                        />
+                        <span className="sr-only">
+                            Has tasks awaiting review
+                        </span>
+                    </>
                 )}
             </span>
             <span className="flex-1 truncate text-[13px] font-medium">
diff --git a/src/ui/components/sidebar/ProjectList.tsx b/src/ui/components/sidebar/ProjectList.tsx
index a1dd8b1..cb5eadb 100644
--- a/src/ui/components/sidebar/ProjectList.tsx
+++ b/src/ui/components/sidebar/ProjectList.tsx
@@ -38,16 +38,17 @@ export function ProjectList({ search }: ProjectListProps) {
 
     return (
         <ScrollArea className="flex-1">
-            <div className="space-y-1 px-3">
+            <ul className="space-y-1 px-3" aria-label="Projects">
                 {filtered.map((repo) => (
-                    <ProjectItem
-                        key={repo.id}
-                        repository={repo}
-                        isSelected={selectedRepositoryId === repo.id}
-                        onSelect={() => setSelectedRepository(repo.id)}
-                    />
+                    <li key={repo.id}>
+                        <ProjectItem
+                            repository={repo}
+                            isSelected={selectedRepositoryId === repo.id}
+                            onSelect={() => setSelectedRepository(repo.id)}
+                        />
+                    </li>
                 ))}
-            </div>
+            </ul>
         </ScrollArea>
     );
 }
diff --git a/src/ui/components/tasks/TaskRow.tsx b/src/ui/components/tasks/TaskRow.tsx
index b4ade6c..d0d681a 100644
--- a/src/ui/components/tasks/TaskRow.tsx
+++ b/src/ui/components/tasks/TaskRow.tsx
@@ -129,7 +129,7 @@ export function TaskRow({
     const stateIcon = (() => {
         if (isQueued) {
             return (
-                <span className="shrink-0">
+                <span className="shrink-0" aria-label="Queued">
                     <Clock className="h-4 w-4 text-violet-500" />
                 </span>
             );
@@ -141,6 +141,7 @@ export function TaskRow({
                     <button
                         type="button"
                         onClick={handleToggleDone}
+                        aria-label="Mark as done"
                         className="group/circle shrink-0"
                     >
                         <Circle className="h-4 w-4 text-muted-foreground/40 transition-colors group-hover/circle:text-green-500" />
@@ -151,6 +152,7 @@ export function TaskRow({
                     <button
                         type="button"
                         onClick={handleToggleDone}
+                        aria-label="Mark as done (currently in progress)"
                         className="group/circle shrink-0"
                     >
                         <Loader2 className="h-4 w-4 text-blue-500 animate-spin transition-colors group-hover/circle:text-green-500 group-hover/circle:animate-none" />
@@ -161,6 +163,7 @@ export function TaskRow({
                     <button
                         type="button"
                         onClick={handleToggleDone}
+                        aria-label="Mark as done (currently awaiting review)"
                         className="group/circle shrink-0"
                     >
                         <GitPullRequest className="h-4 w-4 text-amber-500 transition-colors group-hover/circle:text-green-500" />
@@ -171,6 +174,7 @@ export function TaskRow({
                     <button
                         type="button"
                         onClick={handleToggleDone}
+                        aria-label="Mark as pending (currently done)"
                         className="shrink-0"
                     >
                         <CheckCircle2 className="h-4 w-4 text-green-500" />
@@ -181,6 +185,7 @@ export function TaskRow({
                     <button
                         type="button"
                         onClick={handleToggleDone}
+                        aria-label="Mark as pending (currently dismissed)"
                         className="shrink-0"
                     >
                         <XCircle className="h-4 w-4 text-muted-foreground/50" />
@@ -203,6 +208,7 @@ export function TaskRow({
                 {showActions ? (
                     <button
                         type="button"
+                        aria-label="Drag to reorder"
                         className="mt-0.5 cursor-grab touch-none text-muted-foreground/30 hover:text-muted-foreground"
                         {...attributes}
                         {...listeners}
@@ -281,6 +287,7 @@ export function TaskRow({
                     <div className="mt-0.5 flex items-center gap-0.5">
                         <button
                             type="button"
+                            aria-label="Edit task"
                             className="rounded-md p-1 text-muted-foreground/50 hover:text-foreground hover:bg-accent transition-colors"
                             onClick={handleStartEdit}
                         >
@@ -288,6 +295,7 @@ export function TaskRow({
                         </button>
                         <button
                             type="button"
+                            aria-label="Add comment"
                             className="rounded-md p-1 text-muted-foreground/50 hover:text-foreground hover:bg-accent transition-colors"
                             onClick={handleToggleComment}
                         >