vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 4.5.1: Keyboard Navigation - implement full keyboard accessibility with skip links, focus management, and modal controls

Browse source
This commit is contained in:
VinnyNC 2025-09-30 18:47:51 -04:00
parent 313ee80726
commit 4c2b627e2e
4 changed files with 145 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

50
static/css/utilities.css
View file

@ -1278,6 +1278,56 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* =================================================================
ACCESSIBILITY UTILITIES
================================================================= */
/* Screen reader only content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus visible states for keyboard navigation */
.focus-visible:focus {
outline: 2px solid var(--dodgers-blue);
outline-offset: 2px;
border-radius: 0.25rem;
}
/* Skip links for navigation */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--dodgers-blue);
color: white;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
z-index: 1000;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 6px;
}
/* Mobile-specific skip link only shown on mobile */
@media (min-width: 768px) {
.sr-only-mobile {
display: none;
}
}
/* =================================================================
LOADING ANIMATIONS - Phase 4.1.3 Implementation
================================================================= */