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.
This commit is contained in:
parent
8a93a0de4c
commit
be8ae528c4
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue