da20e83e09
Add Release Scope, Implementation Plan, and Smoke Test for 7 versions: - v0.703: Go Live & Streaming Complet (Phase 7 Finale) - v0.801: UX/UI Polish, Accessibilite & PWA (Phase 8) - v0.802: Cloud Complet, Fichiers & Gear Avance (Phase 8) - v0.803: Securite, Compliance & Outillage Dev (Phase 8) - v0.901: Marketplace Complet & Analytics Avances (Phase 9) - v0.902: Social Complet, Chat & Notifications (Phase 9) - v0.903: Stabilisation v1.0 & Launch Readiness (Phase 9) 21 documents total (3 per version), covering all remaining features needed to reach v1.0 from v0.702.
179 lines
4.4 KiB
Markdown
179 lines
4.4 KiB
Markdown
# Smoke Test v0.801 — UX/UI Polish, Accessibilité & PWA
|
|
|
|
## Prérequis
|
|
|
|
- `veza-backend-api` compilé et démarré
|
|
- PostgreSQL avec migrations appliquées jusqu'à 118
|
|
- Frontend build OK (`npm run build`)
|
|
- Navigateur moderne (Chrome 90+, Firefox 90+, Safari 15+)
|
|
|
|
---
|
|
|
|
## 1. Thèmes avancés (UX1)
|
|
|
|
### 1.1 Mode contraste élevé
|
|
|
|
```bash
|
|
# Frontend: Settings → Appearance → activer "High Contrast"
|
|
# Vérifier: textes en noir pur sur blanc (light) ou blanc pur sur noir (dark)
|
|
# Vérifier: bordures visibles et distinctes
|
|
# Vérifier: toggle persiste après refresh
|
|
```
|
|
|
|
### 1.2 Mode compact/confortable
|
|
|
|
```bash
|
|
# Settings → Appearance → sélectionner "Compact"
|
|
# Vérifier: espacement réduit, font plus petite (13px)
|
|
# Sélectionner "Comfortable"
|
|
# Vérifier: espacement standard, font plus grande (15px)
|
|
# Vérifier: persiste après refresh
|
|
```
|
|
|
|
### 1.3 Couleur d'accent
|
|
|
|
```bash
|
|
# Settings → Appearance → color picker accent
|
|
# Choisir une couleur (ex: rouge, vert, violet)
|
|
# Vérifier: boutons primaires, liens, focus ring changent de couleur
|
|
# Vérifier: contraste reste lisible
|
|
# Refresh → couleur persiste
|
|
```
|
|
|
|
### 1.4 Taille de police
|
|
|
|
```bash
|
|
# Settings → Appearance → slider "Font Size"
|
|
# Glisser vers 20px max
|
|
# Vérifier: textes agrandis proportionnellement
|
|
# Glisser vers 14px min
|
|
# Vérifier: textes réduits
|
|
```
|
|
|
|
### 1.5 Persistence backend
|
|
|
|
```bash
|
|
curl -s -X PUT http://localhost:8080/api/v1/users/me/preferences \
|
|
-H "Authorization: Bearer {TOKEN}" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"theme":"dark","contrast":"high","density":"compact","accentHue":220}' | jq .
|
|
# Attendu: 200, preferences sauvegardées
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Accessibilité WCAG AA (UX2)
|
|
|
|
### 2.1 Navigation clavier
|
|
|
|
```bash
|
|
# Depuis la page d'accueil, naviguer uniquement au clavier (Tab, Shift+Tab, Enter, Space, Escape)
|
|
# Vérifier: tous les éléments interactifs sont atteignables
|
|
# Vérifier: les modales se ferment avec Escape
|
|
# Vérifier: les menus dropdown s'ouvrent avec Enter/Space, navigables avec Arrow keys
|
|
```
|
|
|
|
### 2.2 Focus visible
|
|
|
|
```bash
|
|
# Naviguer au clavier
|
|
# Vérifier: outline 2px visible sur chaque élément focused
|
|
# Vérifier: skip-to-content link visible au premier Tab
|
|
```
|
|
|
|
### 2.3 Screen reader
|
|
|
|
```bash
|
|
# Activer VoiceOver (macOS) ou NVDA (Windows)
|
|
# Naviguer sur Dashboard, Marketplace, Settings
|
|
# Vérifier: boutons icônes annoncent leur label (ex: "Close", "Search", "Play")
|
|
# Vérifier: modales annoncent leur titre
|
|
# Vérifier: tables annoncent les en-têtes de colonnes
|
|
```
|
|
|
|
### 2.4 prefers-reduced-motion
|
|
|
|
```bash
|
|
# Activer "Reduce motion" dans les paramètres OS
|
|
# Naviguer sur l'application
|
|
# Vérifier: aucune animation visible (transitions instantanées)
|
|
```
|
|
|
|
### 2.5 Storybook a11y
|
|
|
|
```bash
|
|
cd apps/web && npm run storybook
|
|
# Vérifier: onglet "Accessibility" visible dans le panel Storybook
|
|
# Naviguer sur plusieurs composants
|
|
# Vérifier: 0 violations critiques (no "critical" or "serious" issues)
|
|
```
|
|
|
|
---
|
|
|
|
## 3. PWA (UX3)
|
|
|
|
### 3.1 Manifest
|
|
|
|
```bash
|
|
curl -s http://localhost:5173/manifest.json | jq .
|
|
# Attendu: name, short_name, icons (192, 512, maskable), display: standalone, shortcuts
|
|
```
|
|
|
|
### 3.2 Install prompt
|
|
|
|
```bash
|
|
# Chrome: naviguer vers l'app
|
|
# Vérifier: icône "Install" apparaît dans la barre d'adresse (ou Settings → Install)
|
|
# Vérifier: bouton "Install App" visible dans Settings de l'app
|
|
```
|
|
|
|
### 3.3 Offline
|
|
|
|
```bash
|
|
# Visiter quelques pages (Dashboard, Marketplace, Settings)
|
|
# Couper le réseau (DevTools → Network → Offline)
|
|
# Naviguer vers une page déjà visitée
|
|
# Vérifier: page affichée depuis le cache (ou page offline fallback)
|
|
```
|
|
|
|
### 3.4 Background playback
|
|
|
|
```bash
|
|
# Mobile: lancer une track, puis réduire le navigateur
|
|
# Vérifier: audio continue en background
|
|
# Vérifier: contrôles dans la notification OS (via Media Session API — v0.703)
|
|
```
|
|
|
|
---
|
|
|
|
## 4. Tests automatisés
|
|
|
|
### 4.1 Backend
|
|
|
|
```bash
|
|
cd veza-backend-api && go test ./... -v
|
|
# Attendu: tous les tests passent, y compris preferences
|
|
```
|
|
|
|
### 4.2 Frontend
|
|
|
|
```bash
|
|
cd apps/web && npm run build
|
|
# Attendu: 0 errors
|
|
```
|
|
|
|
### 4.3 Lighthouse
|
|
|
|
```bash
|
|
# Chrome DevTools → Lighthouse → PWA + Accessibility
|
|
# Attendu: PWA score ≥ 90, Accessibility score ≥ 90
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Documentation
|
|
|
|
- [ ] `CHANGELOG.md` contient entrée v0.801
|
|
- [ ] `docs/PROJECT_STATE.md` : Dernier tag = v0.801
|
|
- [ ] `docs/FEATURE_STATUS.md` : section "Livré en v0.801"
|
|
- [ ] `git tag v0.801` créé
|