fix(a11y): add aria-pressed to date preset and day-of-week toggle buttons

[bluzername]

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.

[greptile-apps]

Greptile Summary

This PR adds aria-pressed to two sets of toggle buttons — the date-range preset buttons in Costs.tsx and the day-of-week selector in ScheduleEditor.tsx — so screen readers can announce the current selection state. The implementation is correct and minimal: aria-pressed is the right ARIA attribute for these toggle-button patterns, and the boolean values are derived directly from existing active-state comparisons.\n\nFindings:\n- The code changes themselves are correct and safe to merge.\n- The PR description is missing the "thinking path" and an explicit risks section that CONTRIBUTING.md requires. Please add a thinking-path block (step-by-step reasoning from the project level down to this specific fix) and note any risks (even "no known risks" is useful). See CONTRIBUTING.md for the expected format.\n- No visual UI changes are introduced (ARIA attributes are invisible), so before/after screenshots are not needed.

Confidence Score: 5/5

Safe to merge — two one-line ARIA additions with no logic or visual risk.

Both changes are a single attribute added to existing JSX props; they don't alter any logic, state, or rendering. No P0/P1 issues exist. The only open item is a process concern (missing thinking path in the PR description), which doesn't affect code correctness.

No files require special attention.

Important Files Changed

Filename	Overview
ui/src/pages/Costs.tsx	Adds aria-pressed={preset === key} to the date preset toggle buttons — correct attribute, correct value, minimal change.
ui/src/components/ScheduleEditor.tsx	Adds aria-pressed={dayOfWeek === d.value} to the day-of-week toggle buttons — correct attribute, correct value, minimal change.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: ui/src/pages/Costs.tsx
Line: 557

Comment:
**PR description is missing a thinking path and risks section**

Per CONTRIBUTING.md, PR descriptions should include a **thinking path** — a top-down chain of reasoning from the project level down to the specific change — as well as explicit details on risks (even if there are none). For example:

> - Paperclip orchestrates AI agents for zero-human companies
> - Humans and assistive-technology users interact with the web UI
> - Screen-reader users rely on ARIA attributes to understand widget state
> - Toggle button groups in the UI were missing `aria-pressed`, so their active state was invisible to screen readers
> - This PR adds `aria-pressed` to the date-preset and day-of-week toggle groups
> - **Risks:** None — ARIA attributes are purely additive and have no effect on visual rendering or logic

Please add both sections to the PR description so reviewers have the full context the guide asks for.

**Context Used:** CONTRIBUTING.md has a guide for a good PR message ... ([source](https://app.greptile.com/review/custom-context?memory=instruction-0))

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "fix(a11y): add aria-pressed to toggle bu..." | Re-trigger Greptile}

[greptile-apps]

PR description is missing a thinking path and risks section

Per CONTRIBUTING.md, PR descriptions should include a thinking path — a top-down chain of reasoning from the project level down to the specific change — as well as explicit details on risks (even if there are none). For example:

• Paperclip orchestrates AI agents for zero-human companies
• Humans and assistive-technology users interact with the web UI
• Screen-reader users rely on ARIA attributes to understand widget state
• Toggle button groups in the UI were missing aria-pressed, so their active state was invisible to screen readers
• This PR adds aria-pressed to the date-preset and day-of-week toggle groups
• Risks: None — ARIA attributes are purely additive and have no effect on visual rendering or logic

Please add both sections to the PR description so reviewers have the full context the guide asks for.

Context Used: CONTRIBUTING.md has a guide for a good PR message ... (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: ui/src/pages/Costs.tsx
Line: 557

Comment:
**PR description is missing a thinking path and risks section**

Per CONTRIBUTING.md, PR descriptions should include a **thinking path** — a top-down chain of reasoning from the project level down to the specific change — as well as explicit details on risks (even if there are none). For example:

> - Paperclip orchestrates AI agents for zero-human companies
> - Humans and assistive-technology users interact with the web UI
> - Screen-reader users rely on ARIA attributes to understand widget state
> - Toggle button groups in the UI were missing `aria-pressed`, so their active state was invisible to screen readers
> - This PR adds `aria-pressed` to the date-preset and day-of-week toggle groups
> - **Risks:** None — ARIA attributes are purely additive and have no effect on visual rendering or logic

Please add both sections to the PR description so reviewers have the full context the guide asks for.

**Context Used:** CONTRIBUTING.md has a guide for a good PR message ... ([source](https://app.greptile.com/review/custom-context?memory=instruction-0))

How can I resolve this? If you propose a fix, please make it concise.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}