🎨 Palette: Improve AC Coverage search and filter accessibility

[EffortlessSteven]

🎨 Palette: Improve AC Coverage search and filter accessibility

💡 What:

• Added aria-label="Search by AC ID or title" to the #search-box input field.
• Refactored the "All", "Passing", "Failing", and "Unknown" filter buttons to utilize aria-pressed to indicate their current toggled state to screen readers.
• Removed client-side DOMContentLoaded logic that dynamically set the initial .active state and instead configured the default .active class and aria-pressed="true" attribute server-side inside the Maud template to avoid Flash of Unstyled Content (FOUC).
• Implemented symmetrically across crates/app-http/src/platform/ui.rs and crates/http-platform/src/ui.rs.

🎯 Why:

• Inputs without visible labels must have aria-label attributes for screen readers. Relying solely on placeholder attributes is an accessibility anti-pattern.
• The filter buttons behave as a toggle group but lacked semantic state indicators (aria-pressed), leaving screen reader users unaware of which filter was currently active.
• Rendering the initial state on the server prevents a brief moment where no filter appears selected, and ensures screen readers report the active state immediately upon page load.

📸 Before/After:

• Visually identical, but the DOM structure is much more semantic. FOUC is eliminated on initial page load.

♿ Accessibility:

• Resolves missing label issue on search input.
• Adds semantic state tracking (aria-pressed) to interactive toggle elements.

---

PR created automatically by Jules for task 5336955938987230710 started by @EffortlessSteven

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8934eb5c-a5ae-404c-b2ad-29a2a8582fe5

📥 Commits

Reviewing files that changed from the base of the PR and between 90fd4d1 and 79f29a4.

📒 Files selected for processing (2)

• crates/app-http/src/platform/ui.rs
• crates/http-platform/src/ui.rs

---

Summary by CodeRabbit

• Bug Fixes
  • Coverage page filter controls and search input now have improved support for assistive technologies.

Walkthrough

The coverage page's filter UI now explicitly synchronizes button selection state through ARIA attributes. Filter buttons include aria-pressed attributes reflecting their active status, the search input gains an aria-label, and the DOMContentLoaded initialization handler was removed since the default state is now in the static markup.

Changes

Cohort / File(s)	Summary
Coverage Filter UI Accessibility crates/app-http/src/platform/ui.rs, crates/http-platform/src/ui.rs	Added aria-pressed attributes to filter buttons; "All" button defaults to aria-pressed="true" while others default to "false". Search input now includes aria-label. Removed DOMContentLoaded handler that previously initialized the default active class, as state is now declared in initial markup. Client-side filter selection updates both the .active class and aria-pressed attribute.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A button pressed, at last it speaks!
With aria-pressed through all the weeks,
No more the DOM waits to unfold—
The markup tells the truth it's told,
Accessibility, clear and keen! 🌟

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: improving accessibility for the AC Coverage search and filter UI through ARIA enhancements.
Description check	✅ Passed	The description is well-related to the changeset, providing detailed context on what was changed, why, and how it improves accessibility.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch jules-palette-a11y-coverage-filters-5336955938987230710

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Test Results

283 tests   245 ✅  10m 45s ⏱️
 25 suites   38 💤
  1 files      0 ❌

Results for commit 14469c5.

♻️ This comment has been updated with latest results.