Skip to content

feat(html-reporter): add state filter toggle functionality#38843

Closed
BogaPurushotham wants to merge 1 commit intomicrosoft:mainfrom
BogaPurushotham:feat/html-reporter-state-filter-toggle
Closed

feat(html-reporter): add state filter toggle functionality#38843
BogaPurushotham wants to merge 1 commit intomicrosoft:mainfrom
BogaPurushotham:feat/html-reporter-state-filter-toggle

Conversation

@BogaPurushotham
Copy link

Implement toggle behavior for state filter buttons (Item #1 from issue #35212):

  • Add aria-pressed attribute to state filter buttons for accessibility
  • Add visual feedback with aria-pressed styling in CSS
  • Clicking an active filter now toggles it off instead of keeping it active
  • Clicking an inactive filter toggles other filters of same type off

This improves UX by making filters behave like expected toggle buttons.

Implement toggle behavior for state filter buttons (Item microsoft#1 from issue microsoft#35212):
- Add aria-pressed attribute to state filter buttons for accessibility
- Add visual feedback with aria-pressed styling in CSS
- Clicking an active filter now toggles it off instead of keeping it active
- Clicking an inactive filter toggles other filters of same type off

This improves UX by making filters behave like expected toggle buttons.
Copy link
Member

@Skn0tt Skn0tt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add acceptance tests to reporter-html.spec.ts.

@pavelfeldman
Copy link
Member

These are not stateful filters, they are buttons for filter presets.

BogaPurushotham pushed a commit to BogaPurushotham/playwright that referenced this pull request Jan 29, 2026
…essibility

Addresses feedback from PR microsoft#38843 and implements Item microsoft#1 from issue microsoft#35212.

Changes:
- Add role='button' and aria-pressed attribute to state filter buttons
- Add visual feedback styling for active filters via aria-pressed
- Maintain existing preset behavior (filters are mutually exclusive)
- Fix if-else chain in filter.ts for proper prefix assignment

This improves accessibility for screen readers while preserving the
design intent that state filters are preset buttons, not toggles.
As clarified by @pavelfeldman: 'These are not stateful filters, they
are buttons for filter presets.'

The aria-pressed attribute indicates which preset is currently active
without changing the underlying preset behavior where clicking a
filter replaces other filters of the same type.

Refs: microsoft#35212
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants