🎨 Palette: Improve accessibility and prevent FOUC in UI components#304
🎨 Palette: Improve accessibility and prevent FOUC in UI components#304EffortlessSteven wants to merge 4 commits intomainfrom
Conversation
- Adds server-side `aria-current="page"` to the active navigation link. - Upgrades the search input to `type="search"` and adds `aria-label`. - Renders default filter button states with `aria-pressed="true"` server-side to prevent FOUC. - Updates inline JS filter toggling to manage `aria-pressed` states correctly without relying on DOMContentLoaded. - Applies changes to both `app-http` and `http-platform` UI components to ensure symmetry.
|
👋 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 (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 |
Test Results283 tests 245 ✅ 11m 46s ⏱️ Results for commit 9d1016d. ♻️ This comment has been updated with latest results. |
1 participant
💡 What:
aria-current="page"to the active navigation link to indicate current state for screen readers.type="search"and includes a descriptivearia-label..activeandaria-pressedstates on the server, removing the reliance on a client-sideDOMContentLoadedlistener.aria-pressedattributes dynamically when filters are applied.crates/app-http/src/platform/ui.rsandcrates/http-platform/src/ui.rs.🎯 Why:
The previous implementation relied on a client-side script to highlight the default active filter, leading to a Flash of Unstyled Content (FOUC) while the page loads. Additionally, the navigation and form elements lacked standard ARIA indicators, making it slightly more difficult for users using assistive technologies to understand their current context within the page.
📸 Before/After:
(No major visual change, mostly structural and under-the-hood a11y states, but the initial flash of un-highlighted buttons on the Coverage page is gone).
♿ Accessibility:
aria-current.type="search"andaria-label.aria-pressed.PR created automatically by Jules for task 12828626699108674130 started by @EffortlessSteven