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

Complete 4.2.1: WCAG AA compliant interactive state implementation

Browse source
This commit is contained in:
VinnyNC 2025-09-29 23:02:09 -04:00
parent f3776b86b0
commit 45f07f763f
3 changed files with 140 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI_UPDATE.MD
View file

@ -461,9 +461,9 @@ All utilities follow the established pattern of using CSS custom properties from
### Sub-task 4.2: Interactive States and Feedback
#### 4.2.1: State Implementation
- [ ] Design comprehensive hover states
- [ ] Implement focus indicators meeting WCAG standards
- [ ] Add active and pressed state styling
- [x] Design comprehensive hover states
- [x] Implement focus indicators meeting WCAG standards
- [x] Add active and pressed state styling
#### 4.2.2: Form Validation
- [ ] Implement visual form validation feedback

139
static/css/components.css
View file

@ -123,10 +123,11 @@
background: rgba(var(--color-primary-rgb), 0.1);
}
/* Focus states for accessibility */
/* Focus states for accessibility - WCAG AA compliant */
.btn:focus-visible {
outline: 2px solid var(--color-focus);
outline: 3px solid var(--color-focus);
outline-offset: 2px;
box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 4px var(--dodgers-blue-100);
}
/* Loading state */
@ -225,8 +226,68 @@
}
.card:focus-visible {
outline: 2px solid var(--color-focus);
outline: 3px solid var(--color-focus);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--dodgers-blue-100);
}
/* Form focus states - WCAG AA compliant */
.form-control:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--dodgers-blue-100);
border-color: var(--color-focus);
}
.chat__input input:focus {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--dodgers-blue-100);
}
/* Link focus states */
a:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
text-decoration: underline;
}
/* Dashboard and control focus states */
.dashboard__toggle-btn:focus-visible {
outline: 3px solid var(--dodgers-white);
outline-offset: 2px;
background: rgba(255,255,255,0.3);
}
.video-player__quality-selector:focus-visible,
.video-player__toggle-chat-btn:focus-visible,
.stream-stats__refresh-btn:focus-visible {
outline: 3px solid var(--dodgers-white);
outline-offset: 2px;
background: rgba(255,255,255,0.3);
}
/* Chat admin controls focus */
.chat__admin-btn:focus-visible {
outline: 3px solid var(--dodgers-gold);
outline-offset: 1px;
}
/* Mobile navigation focus */
.mobile-nav-btn:focus-visible {
outline: 3px solid var(--dodgers-white);
outline-offset: 2px;
background: rgba(255,255,255,0.15);
}
/* FAB focus */
.fab:focus-visible {
outline: 3px solid var(--dodgers-white);
outline-offset: 2px;
box-shadow: 0 0 0 1px var(--dodgers-blue-400), var(--elevation-5);
}
/* Card variants */
@ -1754,6 +1815,78 @@
.chat__input button:active {
transform: translateY(0);
box-shadow: var(--elevation-1);
}
/* Active states for links and form elements */
a:active {
transform: scale(0.98);
}
/* Form elements pressed states */
.form-control:active {
transform: translateY(0);
}
.form-input:active,
.form-textarea:active,
.form-select:active {
transform: translateY(0);
box-shadow: 0 0 0 2px var(--dodgers-blue-200);
}
/* Dashboard controls active states */
.dashboard__toggle-btn:active {
transform: translateY(0);
background: rgba(255,255,255,0.4);
}
.stats-card:active {
transform: translateY(-1px);
box-shadow: var(--elevation-2);
}
/* Video controls pressed states */
.video-player__quality-selector:active,
.video-player__toggle-chat-btn:active,
.stream-stats__refresh-btn:active {
transform: translateY(0);
background: rgba(255,255,255,0.3);
}
/* Chat admin controls active states */
.chat__admin-btn:active {
transform: translateY(0);
background: rgba(255,215,0,0.6);
}
/* Message actions pressed states */
.delete-btn:active, .ban-btn:active {
transform: scale(0.95);
}
/* Mobile navigation active states */
.mobile-nav-btn:active {
transform: scale(0.95) translateY(0);
background: rgba(255,255,255,0.15);
}
/* FAB active states */
.fab:active, .fab.secondary:active {
transform: scale(1.05);
box-shadow: var(--elevation-3);
}
/* Toast notifications active states */
.toast:active {
transform: translateX(-50%) scale(0.95);
}
/* Activity and user item active states */
.activity-item:active,
.user-item:active {
transform: scale(0.98);
background: var(--color-surface-variant);
}
.chat__empty-state {

1
static/css/variables.css
View file

@ -109,6 +109,7 @@
--hover-overlay: rgba(255, 255, 255, 0.1);
--active-overlay: rgba(255, 255, 255, 0.2);
--focus-ring: rgba(0, 90, 156, 0.5);
--color-focus: var(--dodgers-blue-400); /* WCAG AA compliant focus color */
/* Borders & Dividers */
--border-color: #1a2332;