Skip to content

Commit e17428d

Browse files
SolidRhinoclaude
andcommitted
Fix skip link visibility - hide until keyboard focus
Bug: Skip link was visible on page load instead of hidden until Tab focus. Fix: Add proper CSS for .skip-link class: - Position absolute with top: -40px (visually hidden) - On focus: top: 0 (slides into view) - Ubuntu orange background with white text - High z-index to appear above content This implements the standard WCAG 2.1 skip link pattern for keyboard navigation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent a567361 commit e17428d

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

src/index.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,23 @@ code {
2121
monospace;
2222
}
2323

24+
/* Skip link for keyboard navigation */
25+
.skip-link {
26+
position: absolute;
27+
top: -40px;
28+
left: 0;
29+
background: var(--ubuntu-orange);
30+
color: white;
31+
padding: 8px 16px;
32+
text-decoration: none;
33+
border-radius: 0 0 4px 0;
34+
z-index: 100;
35+
}
36+
37+
.skip-link:focus {
38+
top: 0;
39+
}
40+
2441
/* Focus indicators for accessibility */
2542
*:focus {
2643
outline: 3px solid var(--ubuntu-orange);

0 commit comments

Comments
 (0)