Skip to content

feat(ui): improve accessibility for coverage page#220

Draft
EffortlessSteven wants to merge 2 commits intomainfrom
palette/ui-accessibility-fixes-537960714043794473
Draft

feat(ui): improve accessibility for coverage page#220
EffortlessSteven wants to merge 2 commits intomainfrom
palette/ui-accessibility-fixes-537960714043794473

Conversation

@EffortlessSteven
Copy link
Member

This PR improves the accessibility of the AC Coverage page by adding proper ARIA attributes to interactive elements.

Changes:

  1. Accessibility:
    • Added aria-label to the search input which lacked a visible label.
    • Added aria-pressed to filter buttons to indicate the active filter state to screen readers.
  2. Bug Fix:
    • Fixed a regression (or latent bug) where embedded JavaScript and CSS in crates/http-platform/src/ui.rs were being HTML-escaped by the maud macro, breaking the filter functionality. Wrapped them in PreEscaped.
  3. Testing:
    • Added crates/app-http/tests/ui_accessibility.rs with scraper-based integration tests to verify the presence and initial state of these attributes.

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

- Added aria-label="Search acceptance criteria" to the search input.
- Added aria-pressed attributes to filter buttons (All/Passing/Failing/Unknown).
- Updated embedded JavaScript to toggle aria-pressed state on click.
- Fixed HTML escaping issue in embedded script and styles by using maud::PreEscaped.
- Added integration tests in crates/app-http/tests/ui_accessibility.rs to verify accessibility attributes.
Copilot AI review requested due to automatic review settings February 26, 2026 02:18
@google-labs-jules
Copy link

👋 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
Copy link

Warning

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

@coderabbitai
Copy link

coderabbitai bot commented Feb 26, 2026

Warning

Rate limit exceeded

@EffortlessSteven has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 2 minutes and 36 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 90fd4d1 and 214c4e1.

📒 Files selected for processing (2)
  • crates/app-http/tests/ui_accessibility.rs
  • crates/http-platform/src/ui.rs
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch palette/ui-accessibility-fixes-537960714043794473

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

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

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Improves the AC Coverage UI page accessibility and fixes inline CSS/JS rendering so client-side filtering/search works reliably with Maud templates.

Changes:

  • Wrap inline CSS/JS in maud::PreEscaped(...) to prevent HTML-escaping from breaking embedded code.
  • Add aria-label to the coverage search input and aria-pressed (plus JS updates) to coverage filter buttons.
  • Add integration tests validating the rendered coverage page includes the expected accessibility attributes and initial states.

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 <style>/<script>, adds ARIA attributes to coverage controls, and syncs aria-pressed in filter JS.
crates/app-http/tests/ui_accessibility.rs Adds scraper-based integration tests asserting the presence/initial values of coverage ARIA attributes.

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

- Ran `cargo fmt` to fix code style issues in `crates/app-http/tests/ui_accessibility.rs` and `crates/http-platform/src/ui.rs`.
- Fixed import ordering and line wrapping to satisfy CI lint checks.
@github-actions
Copy link

Test Results

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

Results for commit 214c4e1.

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.

2 participants