veza/docs/archive/v0-history/SMOKE_TEST_V0801.md

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é

# 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

# 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

# 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

# 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

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

# 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

# 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

# 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

# Activer "Reduce motion" dans les paramètres OS
# Naviguer sur l'application
# Vérifier: aucune animation visible (transitions instantanées)

2.5 Storybook a11y

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

curl -s http://localhost:5173/manifest.json | jq .
# Attendu: name, short_name, icons (192, 512, maskable), display: standalone, shortcuts

3.2 Install prompt

# 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

# 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

# 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

cd veza-backend-api && go test ./... -v
# Attendu: tous les tests passent, y compris preferences

4.2 Frontend

cd apps/web && npm run build
# Attendu: 0 errors

4.3 Lighthouse

# 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éé