Skip to content

Accessibility: color-only status indicators and missing ARIA labels throughout UI #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ghvstcode wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Accessibility: color-only status indicators and missing ARIA labels throughout UI #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/ui/components/main/AgentControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
1 change: 1 addition & 0 deletions src/ui/components/settings/sections/BudgetSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
59 changes: 36 additions & 23 deletions src/ui/components/settings/sections/SchedulingSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
27 changes: 23 additions & 4 deletions src/ui/components/sidebar/AiStatusCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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={{
Expand All @@ -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>
Expand Down
10 changes: 9 additions & 1 deletion src/ui/components/sidebar/ProjectItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
17 changes: 9 additions & 8 deletions src/ui/components/sidebar/ProjectList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
10 changes: 9 additions & 1 deletion src/ui/components/tasks/TaskRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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" />
Expand All @@ -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}
Expand Down Expand Up @@ -281,13 +287,15 @@ 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}
>
<Pencil className="h-3.5 w-3.5" />
</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}
>
Expand Down
Loading