From be8ae528c4919b151aa0e425a2a81149c18b7141 Mon Sep 17 00:00:00 2001
From: Evyatar Bluzer <bluzername@users.noreply.github.com>
Date: Thu, 2 Jul 2026 03:14:57 +0700
Subject: [PATCH] fix(a11y): add aria-pressed to date preset and day-of-week
 toggle buttons (#1913)

## Thinking Path

> - Paperclip orchestrates ai-agents for zero-human companies
> - But humans want to watch the agents and oversee their work
> - Human users interact with the dashboard UI to monitor costs,
schedules, and agent behavior
> - The UI has toggle button groups where you click one option and other
become unselected (like date range presets, day-of-week selectors)
> - Visually the active button look different (filled vs outlined), but
screen reader users hear no difference - all buttons sound same
> - The `aria-pressed` attribute is what screen readers need to announce
which toggle is active and which is not
> - I searched entire UI codebase for `aria-pressed` and found zero
usage anywhere
> - This pull request adds `aria-pressed={isActive}` to two toggle
button groups: date range presets in Costs page and day-of-week selector
in ScheduleEditor
> - Now screen reader users can tell which button is currently selected
without relying on visual styling only

## Problem

The app has button groups that work like toggles - you click one button
to select it and the others become unselected. Visually this work fine
because the active button change to a different variant (filled vs
outlined). But for screen reader users, ALL buttons sound exactly the
same - just "button, 7 days", "button, 30 days", etc with no way to tell
which one is currently active.

I searched the entire UI codebase for `aria-pressed` and found zero
results. This attribute is what screen readers need to announce "7 days,
pressed" vs "30 days, not pressed" for toggle button groups.

## What I changed

Added `aria-pressed={isActive}` to two toggle button groups:

1. **Costs.tsx** - Date range preset buttons (7d, 30d, 90d, Custom).
Screen reader now announce which date range is selected.

2. **ScheduleEditor.tsx** - Day of week selector (Mon, Tue, Wed...).
Screen reader now announce which day is selected for weekly schedule.

## How to test

1. Go to Costs page, use VoiceOver (Cmd+F5 on Mac)
2. Tab through the date preset buttons
3. Active button should announce "pressed", others "not pressed"
4. Same for ScheduleEditor - create/edit trigger with weekly preset, tab
through day buttons

2 files, 2 lines added.
---
 ui/src/components/ScheduleEditor.tsx | 1 +
 ui/src/pages/Costs.tsx               | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/src/components/ScheduleEditor.tsx b/ui/src/components/ScheduleEditor.tsx
index 2d991d5bf6..12331ae458 100644
--- a/ui/src/components/ScheduleEditor.tsx
+++ b/ui/src/components/ScheduleEditor.tsx
@@ -368,6 +368,7 @@ export function ScheduleEditor({
                     variant={dayOfWeek === d.value ? "default" : "outline"}
                     size="sm"
                     className="h-7 px-2 text-xs"
+                    aria-pressed={dayOfWeek === d.value}
                     onClick={() => {
                       setDayOfWeek(d.value);
                       emitChange(preset, hour, minute, d.value, dayOfMonth, customCron);
diff --git a/ui/src/pages/Costs.tsx b/ui/src/pages/Costs.tsx
index 5d3a81e825..c78f8f54a6 100644
--- a/ui/src/pages/Costs.tsx
+++ b/ui/src/pages/Costs.tsx
@@ -554,6 +554,7 @@ export function Costs() {
                   variant={preset === key ? "secondary" : "ghost"}
                   size="sm"
                   onClick={() => setPreset(key)}
+                  aria-pressed={preset === key}
                 >
                   {PRESET_LABELS[key]}
                 </Button>