[Web UI] Add aria-pressed to filter buttons

[santoshkumarradha]

Summary

Filter toggle buttons in ExecutionFilters and similar components lack the aria-pressed attribute, making it unclear to screen reader users which filters are currently active.

Current State

• File: control-plane/web/client/src/components/ExecutionFilters.tsx
• Issue: Filter buttons don't indicate pressed/selected state to assistive technologies

Tasks

1. Add aria-pressed attribute to filter toggle buttons
2. Set aria-pressed="true" when filter is active, aria-pressed="false" when inactive
3. Ensure visual state matches ARIA state

Example Fix

// Before
<Button
  variant={isActive ? "default" : "outline"}
  onClick={() => toggleFilter(filterKey)}
>
  {filterLabel}
</Button>

// After
<Button
  variant={isActive ? "default" : "outline"}
  onClick={() => toggleFilter(filterKey)}
  aria-pressed={isActive}
>
  {filterLabel}
</Button>

Related Components

Check and update all filter toggle buttons in:

• ExecutionFilters.tsx
• NodeFilters.tsx (if exists)
• Any other filter components

Acceptance Criteria

• All filter toggle buttons have aria-pressed attribute
• aria-pressed value matches visual active state
• Screen readers correctly announce button state
• Linting passes (npm run lint)

Files

• control-plane/web/client/src/components/ExecutionFilters.tsx
• Other filter components as applicable

---

Using AI to solve this issue? Read our AI-Assisted Contributions guide for testing requirements, prompt strategies, and common pitfalls to avoid.

[iammohitvs]

Hello @santoshkumarradha !

This issue seems open, ok if i take it up?

[github-actions]

Thanks for picking this up, @iammohitvs! 🎉

Here's what to expect:

• We'll check in after 7 days if we haven't heard an update
• After 14 days, we'll send a second reminder
• After 21 days without activity, we'll unassign to let others contribute

Tips for success:

• Drop a comment when you start working on it
• Share any blockers - we're here to help!
• Link your PR with Fixes #117 in the description

Happy coding! 🚀

[iammohitvs]

HI @santoshkumarradha

Pr raised. Let me know if it is acceptable, or what changes i can make to it further!

[AbirAbbas]

Hey, I think the original issue was incorrect, Radix UI components already expose aria labels and also these components aren't used anywhere.

the actual filters used are on /ui/executions come from PageHeader.tsx with CompactExecutionsTable.tsx.

Sorry about that. Will close the issue

[iammohitvs]

No worries!