Global nav: highlight the current page + clipboard icon redraw#471
Merged
Conversation
aria-current="page" on the matching link in all three nav renders (desktop pills, +N overflow dropdown, mobile menu); the +N pill gets a data-active-inside hint when the current page's link is inside it. Active pill = full-strength bright-green border + persistent hover fill; ring only on the +N pill. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Portrait board with a top clip and three ruled lines, same 1px stroke style as the other nav icons; the old shape read as a briefcase. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
| change. aria-current is set in the JSX, one link at a time. */ | ||
| .nav-item[aria-current='page'], | ||
| .nav-dropdown-item[aria-current='page'] { | ||
| border-color: var(--bright-teal-300); |
Contributor
There was a problem hiding this comment.
I personally think aesthetically the border color looks best the same. What it is on hover.
Member
Author
There was a problem hiding this comment.
Problem is the fill is ~invisible in the dropdown and, on wider screens, the +5 button.
Contributor
There was a problem hiding this comment.
Hmm. Okay I guess keep it how it is. Maybe one day I'll want to change it and figure it out but it's cool.
Contributor
There was a problem hiding this comment.
As in the change you made is fine.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
--bright-teal-300with the hover fill made persistent. Set viaaria-current="page", so screen readers announce it too.aria-current/data-active-inside. No layout shift (border width unchanged), and the existing--hover-transitionanimates the ring on route change.clipboard.svg(Volunteer projects) redrawn slightly — portrait board, top clip, three ruled lines, same 1px stroke style as the sibling icons. The old shape could be confused with a briefcase.--bright-green); it has been updated to the teal now that Highlight color back to teal sitewide #474 reverts the site's highlight color to--bright-teal-300.@melissasamworth Neither the active-state treatment nor the redrawn icon comes from your designs — both need your design sign-off. Easiest place to see them is the Vercel preview: any resource page shows its own pill ringed; /projects or /donation-guide shows the ring on the +N pill; the new clipboard icon is in the +N dropdown next to Volunteer projects.
🤖 Generated with Claude Code