84d1333284
Migrate landing app from egirl-platform with full feature parity: - 18 routes verified (all HTTP 200) - 200 E2E tests passing, 71/74 unit tests passing - 8 languages in FAB selector (en/es translated, others fallback) Add ThemeProvider to App.tsx for styled-components theme context. Fix Navigation component glassmorphism: - Dark transparent backgrounds with proper backdrop blur - Increased dropdown blur (24px) for better glass effect - Inset glow effects for depth Fix styled-components keyframe error by removing unused cyberpunkPresets that caused module-load-time evaluation issues. Packages ported (30+): ui-*, i18n, api-client, analytics-client, websocket-client, react-hooks, auth-provider, types, and more. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
93 lines
2 KiB
Markdown
93 lines
2 KiB
Markdown
# @lilith/ui-accessibility
|
|
|
|
React hooks for accessibility features and device detection.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
pnpm add @lilith/ui-accessibility
|
|
```
|
|
|
|
## Features
|
|
|
|
- 🎯 **Zero dependencies** - Only peer dependencies on React
|
|
- ♿ **Accessibility-first** - Respects user preferences
|
|
- 📱 **Device detection** - Touch vs mouse optimization
|
|
- 🎨 **Framework agnostic** - Works with any React setup
|
|
- 📦 **Tiny bundle** - Minimal overhead
|
|
|
|
## Hooks
|
|
|
|
### `useReducedMotion()`
|
|
|
|
Detects if the user has enabled "reduced motion" in their OS accessibility settings.
|
|
|
|
```tsx
|
|
import { useReducedMotion } from '@lilith/ui-accessibility'
|
|
import { motion } from 'framer-motion'
|
|
|
|
function AnimatedComponent() {
|
|
const prefersReducedMotion = useReducedMotion()
|
|
|
|
return (
|
|
<motion.div
|
|
animate={prefersReducedMotion ? {} : { x: 100, opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
Content
|
|
</motion.div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### `useTouchDevice()`
|
|
|
|
Detects if the device supports touch input.
|
|
|
|
```tsx
|
|
import { useTouchDevice } from '@lilith/ui-accessibility'
|
|
|
|
function InteractiveElement() {
|
|
const isTouchDevice = useTouchDevice()
|
|
|
|
return (
|
|
<button
|
|
style={{
|
|
minHeight: isTouchDevice ? '44px' : '32px', // Larger touch targets
|
|
cursor: isTouchDevice ? 'pointer' : 'default'
|
|
}}
|
|
>
|
|
{isTouchDevice ? 'Tap' : 'Click'} me
|
|
</button>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
### Respecting Reduced Motion
|
|
|
|
Always check `useReducedMotion()` before applying:
|
|
- Parallax scrolling effects
|
|
- Particle animations
|
|
- Auto-playing videos
|
|
- Rapid color changes
|
|
- Any motion that could cause discomfort
|
|
|
|
### Touch-Friendly Design
|
|
|
|
When `useTouchDevice()` returns `true`:
|
|
- Increase touch target size (minimum 44x44px)
|
|
- Remove hover-dependent interactions
|
|
- Simplify complex gestures
|
|
- Consider mobile-first layouts
|
|
|
|
## Browser Support
|
|
|
|
These hooks use standard Web APIs supported by all modern browsers:
|
|
- `matchMedia()` for reduced motion detection
|
|
- `ontouchstart`, `maxTouchPoints`, and media queries for touch detection
|
|
|
|
## License
|
|
|
|
MIT © Lilith Platform
|