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