🎨 Palette: Improve Coverage Page Accessibility#215
🎨 Palette: Improve Coverage Page Accessibility#215EffortlessSteven wants to merge 2 commits intomainfrom
Conversation
- Added `aria-pressed` to coverage filter buttons - Added `aria-label` to search input - Added `aria-live="polite"` to table container - Updated JS to toggle `aria-pressed` - Fixed script/style escaping in `maud` templates - Added integration test `ui_accessibility.rs`
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again! |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR enhances the accessibility of the Coverage page UI by adding proper ARIA attributes for assistive technologies and fixes a bug where inline CSS/JavaScript was being HTML-escaped by the Maud template engine.
Changes:
- Added
PreEscaped()wrapper to prevent HTML escaping of dynamically generated CSS and JavaScript in Maud templates - Added
aria-pressedattributes to filter buttons with proper initial states and JavaScript updates - Added
aria-labelto the search input for screen reader context - Added
aria-live="polite"to the table container to announce dynamic content updates
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 | Fixed PreEscaped usage for inline styles/scripts; added ARIA attributes to filter buttons, search input, and table container; updated JavaScript to manage aria-pressed state |
| crates/app-http/tests/ui_accessibility.rs | Added comprehensive accessibility tests verifying ARIA attributes are present and correctly configured |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Formatted `crates/app-http/tests/ui_accessibility.rs` - Reordered imports in `crates/http-platform/src/ui.rs`
Test Results283 tests 245 ✅ 11m 49s ⏱️ Results for commit d5782ec. |
💡 What: Added ARIA attributes to the Coverage page filters and search input, and ensured dynamic content updates are announced by screen readers.
🎯 Why: To improve accessibility for users relying on assistive technologies.
♿ Accessibility:
- Filter buttons now announce their state (pressed/not pressed).
- Search input has a proper label.
- Table updates (filtering) are announced via
aria-live.- Fixed a bug where inline scripts/styles were being HTML-escaped, breaking functionality.
PR created automatically by Jules for task 12181070790270084933 started by @EffortlessSteven