558e0ac1e2
Photo Management (per specs/photo-management.md): - Sharp integration for 3-size compression (thumb/medium/full) - WebP output with 80-90% quality - Client-side compression with browser-image-compression - PhotoUpload component with camera/drag-drop support - Upload API with bulk support and stats endpoint Testing: - Backend: Jest tests for all major API endpoints - Frontend: Vitest tests for utilities and API clients - CI: Updated Forgejo workflow for test execution Specs (100% coverage): - visitor-management.md (Phase 8) - messaging.md (Phase 9) - audit-and-documents.md (Phase 10) - accessibility-i18n.md (Phase 11) - hardware-integration.md (Phase 12) - advanced-features.md (Phase 13) Documentation: - OpenAPI 3.0 spec (docs/openapi.yaml) - All endpoints documented with schemas
160 lines
2.9 KiB
Markdown
160 lines
2.9 KiB
Markdown
# Feature Spec: Accessibility & Internationalization
|
|
|
|
**Priority**: 🟢 Important
|
|
**Phase**: 11
|
|
**Status**: ✅ Implemented
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
Make the application accessible to all users regardless of ability or language. WCAG 2.1 AA compliance.
|
|
|
|
---
|
|
|
|
## Accessibility (a11y)
|
|
|
|
### WCAG 2.1 AA Requirements
|
|
|
|
#### Perceivable
|
|
|
|
- [x] Text alternatives for images
|
|
- [x] Color contrast ratio ≥ 4.5:1
|
|
- [x] Text resizable to 200%
|
|
- [x] Content reflows at 320px width
|
|
|
|
#### Operable
|
|
|
|
- [x] Full keyboard navigation
|
|
- [x] Focus visible indicators
|
|
- [x] Skip to main content link
|
|
- [x] Touch targets ≥ 44x44px
|
|
- [x] No keyboard traps
|
|
|
|
#### Understandable
|
|
|
|
- [x] Language attribute on HTML
|
|
- [x] Consistent navigation
|
|
- [x] Error identification
|
|
- [x] Labels for form inputs
|
|
|
|
#### Robust
|
|
|
|
- [x] Valid HTML
|
|
- [x] ARIA roles where needed
|
|
- [x] Screen reader compatible
|
|
|
|
### Implementation
|
|
|
|
#### CSS Utilities
|
|
|
|
```css
|
|
.sr-only /* Screen reader only */
|
|
.focus-visible /* Focus ring */
|
|
.high-contrast /* High contrast mode */
|
|
.reduced-motion /* Respects prefers-reduced-motion */
|
|
```
|
|
|
|
#### React Hooks
|
|
|
|
- `usePrefersReducedMotion()` - Detect motion preference
|
|
- `useFocusTrap(ref)` - Trap focus in modals
|
|
|
|
#### Components
|
|
|
|
- `VisuallyHidden` - Hide but keep in DOM
|
|
- `SkipLink` - Skip to main content
|
|
- `LiveRegion` - Announce to screen readers
|
|
|
|
---
|
|
|
|
## Internationalization (i18n)
|
|
|
|
### Supported Languages
|
|
|
|
1. English (en) - Default
|
|
2. Spanish (es) - Primary translation
|
|
|
|
### Implementation
|
|
|
|
#### Library
|
|
|
|
- `react-i18next` for translations
|
|
- `i18next-browser-languagedetector` for auto-detection
|
|
|
|
#### Translation Structure
|
|
|
|
```
|
|
/frontend/src/locales/
|
|
├── en/
|
|
│ └── translation.json
|
|
└── es/
|
|
└── translation.json
|
|
```
|
|
|
|
#### Usage
|
|
|
|
```tsx
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
function Component() {
|
|
const { t } = useTranslation();
|
|
return <h1>{t('dashboard.title')}</h1>;
|
|
}
|
|
```
|
|
|
|
### Translation Keys
|
|
|
|
#### Common
|
|
|
|
- `common.save`, `common.cancel`, `common.delete`
|
|
- `common.loading`, `common.error`
|
|
- `common.yes`, `common.no`
|
|
|
|
#### Navigation
|
|
|
|
- `nav.dashboard`, `nav.tasks`, `nav.rooms`
|
|
- `nav.batches`, `nav.supplies`
|
|
|
|
#### Forms
|
|
|
|
- `form.required`, `form.invalid`
|
|
- `form.submit`, `form.cancel`
|
|
|
|
---
|
|
|
|
## User Preferences
|
|
|
|
### PreferencesContext
|
|
|
|
- `theme`: 'light' | 'dark' | 'system'
|
|
- `language`: 'en' | 'es'
|
|
- `fontSize`: 'small' | 'medium' | 'large'
|
|
- `highContrast`: boolean
|
|
- `reducedMotion`: boolean
|
|
- `soundEnabled`: boolean
|
|
- `notificationsEnabled`: boolean
|
|
- `compactMode`: boolean
|
|
|
|
### Persistence
|
|
|
|
- Stored in localStorage
|
|
- Synced across tabs
|
|
- Applied on app load
|
|
|
|
---
|
|
|
|
## Testing
|
|
|
|
### Accessibility Testing
|
|
|
|
- Lighthouse accessibility audit
|
|
- axe-core browser extension
|
|
- Manual keyboard navigation test
|
|
- Screen reader testing (VoiceOver, NVDA)
|
|
|
|
### i18n Testing
|
|
|
|
- All strings extracted to JSON
|
|
- No hardcoded strings in components
|
|
- RTL layout support (future)
|