🎨 Palette: Improve filter button accessibility and eliminate FOUC#316
🎨 Palette: Improve filter button accessibility and eliminate FOUC#316EffortlessSteven wants to merge 2 commits intomainfrom
Conversation
- Set initial filter button states server-side in Maud instead of waiting for client-side DOMContentLoaded - Add `aria-pressed` toggling logic to `filterData` JavaScript to correctly represent filter status to screen readers - Apply symmetrically to both `app-http` and `http-platform` UI codebases
|
👋 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. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✨ 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 |
Test Results283 tests 245 ✅ 11m 38s ⏱️ Results for commit 3bb5dc2. ♻️ This comment has been updated with latest results. |
- Set initial filter button states server-side in Maud instead of waiting for client-side DOMContentLoaded - Add `aria-pressed` toggling logic to `filterData` JavaScript to correctly represent filter status to screen readers - Apply symmetrically to both `app-http` and `http-platform` UI codebases ## Scope Type: Security Intent: Update dependencies to fix `rustls-webpki` and `astral-tokio-tar` vulnerabilities (RUSTSEC-2026-0049 and RUSTSEC-2026-0066). Touchpoints: `Cargo.lock`, `crates/adapters-db-sqlx/Cargo.toml` Evidence: Dependency scanner flagged vulnerabilities in CI; updating versions fixes the security advisories.
1 participant
💡 What: Added dynamic
aria-pressedstates to the AC Coverage filter buttons, and moved their initial class state to server-side rendering.🎯 Why: Previously, the filter buttons lacked ARIA roles to denote their pressed state, making it difficult for screen readers to determine the active filter. Additionally, relying on
DOMContentLoadedto add the.activeclass to the "All" button caused a brief flash of unstyled content (FOUC) and temporary accessibility inconsistency.📸 Before/After: No major layout changes; the "All" button is now instantly active on load without FOUC, and DOM states transition cleanly between true/false for
aria-pressedwhen toggling.♿ Accessibility:
aria-pressed="true"oraria-pressed="false"attributes to all filter buttonsaria-pressedsynchronously with the visual.activeclassPR created automatically by Jules for task 2105895924610576422 started by @EffortlessSteven