🎨 Palette: Improve AC Coverage page accessibility and fix inline scripts

[EffortlessSteven]

💡 What:

• Added aria-label to the Acceptance Criteria search input.
• Converted filter buttons to accessible toggle buttons using aria-pressed.
• Fixed a critical issue where inline CSS and JS were being HTML-escaped by maud, causing scripts to fail (including filter logic) and potential styling issues. Used maud::PreEscaped to fix this.
• Added a regression test test_coverage_filters_have_accessibility in crates/app-http/tests/ui_contract_dom.rs.

🎯 Why:

• Screen reader users could not identify the purpose of the search input or the state of the filter buttons.
• The filter functionality was broken because the JavaScript was being escaped (e.g., => becoming =>), preventing users from filtering the coverage list.

📸 Before/After:

• Before: Search input had no label. Filter buttons were static div-like buttons. Filters didn't work (JS error).
• After: Search input is labeled. Filter buttons announce "pressed" state. Filters work correctly.

♿ Accessibility:

• Added aria-label="Filter acceptance criteria".
• Added aria-pressed="true/false" to filter buttons.
• Synced aria-pressed state via JavaScript and CSS.

---

PR created automatically by Jules for task 2108349110075544111 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]

Summary by CodeRabbit

• Tests

  • Added comprehensive accessibility test for Coverage page filter controls, validating proper ARIA attributes and DOM structure.

• New Features

  • Enhanced Coverage page with improved accessibility: ARIA attributes for filter button state management and descriptive labels for search input.

Walkthrough

This pull request adds accessibility enhancements to the Coverage page UI by introducing ARIA attributes for filter button states, including a search input label, and implementing corresponding state management in templates and JavaScript. A new DOM accessibility test validates these changes.

Changes

Cohort / File(s)	Summary
UI Accessibility Enhancements crates/http-platform/src/ui.rs	Introduced PreEscaped wrappers for inline CSS and JS in Maud templates. Added aria-pressed attributes to filter buttons (All button defaults to true, others to false) and aria-label to search input. Updated JavaScript to synchronize filter button aria-pressed state during interactions and CSS selector to account for both .active class and aria-pressed attribute.
Accessibility Test Coverage crates/app-http/tests/ui_contract_dom.rs	Added new test function test_coverage_filters_have_accessibility() to verify coverage page DOM structure and accessibility attributes, including search input aria-label validation and filter button default aria-pressed states.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hop through accessibility!

Filter buttons now speak with aria-pressed delight,
Search boxes labeled for all to find just right,
PreEscaped scripts flow without a care,
And tests verify the changes fair! ✨

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

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

[Copilot]

Pull request overview

This PR improves the AC Coverage UI’s accessibility and restores broken filter functionality by preventing Maud from HTML-escaping inline CSS/JS in the coverage page.

Changes:

• Wrap inline <style> / <script> contents with maud::PreEscaped so CSS/JS is emitted verbatim.
• Add accessibility attributes: aria-label on the search input and aria-pressed toggle state on filter buttons (kept in sync via JS/CSS).
• Add a regression DOM test to validate coverage filter accessibility attributes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
crates/http-platform/src/ui.rs	Uses PreEscaped for inline CSS/JS; adds aria-label and aria-pressed support and synchronizes pressed state in the coverage filter UI.
crates/app-http/tests/ui_contract_dom.rs	Adds a regression test asserting the coverage page search input and filter buttons include the expected accessibility attributes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.