jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: improve header navigation accessibility

Browse Source 
- Current page in nav is now a span instead of a link (no self-links)
- Logo links to home page, except when already on home
- Use aria-current="page" with accent underline for current page indicator
- Extract logo_content, logo_inner, and nav_item helper components
- Update CSS to target both a and span elements in .shop-nav

This follows WCAG accessibility guidelines - links that point to
the current page are confusing for screen reader users.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood
2026-01-19 23:43:54 +00:00
parent fe29c1ad36
commit 50d7f135bc
2 changed files with 142 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/theme-semantic.css
View File

@@ -221,17 +221,19 @@
}
/* Nav link styling with active state indicator */
.shop-nav a {
.shop-nav a,
.shop-nav span {
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
&:hover {
color: var(--t-text-primary);
}
&[aria-current="page"] {
color: var(--t-text-primary);
border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
}
}
.shop-nav a:hover {
color: var(--t-text-primary);
}
.shop-nav a[aria-current="page"],
.shop-nav span[aria-current="page"] {
color: var(--t-text-primary);
border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
}