juanatsap
93b471b7e3
feat: add zoom control with accessibility and persistence
UI Components:
- Fixed bottom-center zoom slider (50%-200% range, step 5%)
- Modern glass-morphism design with gradient slider track
- Reset button with smooth rotation animation
- Real-time zoom percentage display
- Fully responsive (desktop/tablet/mobile)
Functionality:
- CSS transform-based zoom (GPU accelerated)
- localStorage persistence across sessions
- Keyboard shortcuts: Ctrl/Cmd +/-/0
- Smooth transitions with debouncing (50ms)
- Scroll position preservation during zoom
- Print mode: Temporarily resets to 100%
Accessibility (WCAG AA):
- Complete ARIA labels and live regions
- Keyboard navigation support
- Focus indicators on all interactive elements
- Screen reader compatible (announces zoom level)
- Touch-friendly (44px+ targets)
Integration:
- Follows existing toggle patterns (length, logos, theme)
- Initializes in initPreferences()
- Works with print-friendly mode
- Hidden in print (.no-print class)
- Bilingual support (English/Spanish)
Performance:
- will-change: transform for compositor layer
- Debounced slider input for smooth dragging
- requestAnimationFrame for scroll preservation
- No layout thrashing (transform-only changes)
Technical Details:
- Range: 50-200 (prevents unusability, allows 2x mag)
- Transform origin: top center (maintains alignment)
- Transition: 300ms cubic-bezier (material design)
- Storage key: 'cv-zoom'
- Default: 100% (normal view)