🎨 Palette: [UX improvement] Add active state and aria-current to navigation#313
🎨 Palette: [UX improvement] Add active state and aria-current to navigation#313EffortlessSteven wants to merge 2 commits intomainfrom
Conversation
Added `nav_link` helper closure to dynamically set `aria-current="page"` on the active navigation item based on the current page context. Added CSS styling (`font-weight`, `text-decoration`, `color`) to visually distinguish the active 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 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 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 (1)
✨ 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 |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience and accessibility of the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the UI navigation by introducing a nav_link helper function to dynamically generate navigation links and set the aria-current="page" attribute for the active page. Corresponding CSS styling has been added to highlight the active navigation item. The review suggests an improvement to the CSS by grouping selectors to avoid duplication of the text-decoration: underline property, enhancing maintainability.
| nav a[aria-current="page"] { | ||
| font-weight: 700; | ||
| text-decoration: underline; | ||
| color: #4c51bf; | ||
| } |
There was a problem hiding this comment.
There's a small duplication of text-decoration: underline; which is also present in the nav a:hover rule. To improve maintainability and avoid them getting out of sync in the future, you could group the selectors for this shared property.
For example:
nav a:hover,
nav a[aria-current="page"] {
text-decoration: underline;
}
nav a[aria-current="page"] {
font-weight: 700;
color: #4c51bf;
}This would involve modifying the nav a:hover rule (which is outside this specific change), but it would make the styling more robust and easier to maintain.
…erabilities Upgraded astral-tokio-tar to v0.5.6 -> v0.6.0+ to resolve RUSTSEC-2026-0066 Upgraded rustls-webpki to v0.103.9 -> v0.103.10+ to resolve RUSTSEC-2026-0049
Test Results283 tests 245 ✅ 10m 48s ⏱️ Results for commit 84505b9. |
1 participant
💡 What: Added a visual active state (bold, underline, purple color) and the
aria-current="page"attribute to the main navigation links in theapp-httpUI.🎯 Why: To improve usability and accessibility by clearly indicating to users which page they are currently viewing, mirroring the existing behavior in the
http-platformUI.📸 Before/After: Visual change in the navigation bar. Active links are now visibly styled differently.
♿ Accessibility: Added
aria-current="page"to the active link to ensure screen readers correctly announce the current page context, adhering to WAI-ARIA best practices for navigation.Scope
Type: UX/Accessibility Improvement
Intent: Enhance navigation usability and screen reader support by indicating the active page
Touchpoints: crates/app-http/src/platform/ui.rs
Evidence: Local UI testing (Playwright) confirmed visual state and DOM attributes. cargo test and cargo fmt passed successfully.
PR created automatically by Jules for task 7667996071145187860 started by @EffortlessSteven