023b8a89c6
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas - Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement - Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles - Tous les onglets de DeveloperPage sont maintenant implémentés
235 lines
8 KiB
Markdown
235 lines
8 KiB
Markdown
# Analyse Complète du Problème Visuel
|
|
|
|
## 🔍 Identification du Problème Réel
|
|
|
|
### Problème Observé
|
|
**Contour cyan très visible autour du champ Email** (et probablement autres inputs) sur les pages Login et Register.
|
|
|
|
### Ce que ce N'EST PAS
|
|
- ❌ Ce n'est PAS une ligne verticale
|
|
- ❌ Ce n'est PAS un problème de scanlines
|
|
- ❌ Ce n'est PAS un problème de scrollbar
|
|
- ❌ Ce n'est PAS un problème de bordures verticales
|
|
|
|
### Ce que c'EST
|
|
- ✅ **Problème de style de focus sur les inputs**
|
|
- ✅ Le contour cyan vient du style `focus:border-kodo-cyan` + `focus:ring-1 focus:ring-kodo-cyan`
|
|
- ✅ Le champ Email a probablement le focus automatique ou le focus persiste après interaction
|
|
|
|
---
|
|
|
|
## 🔬 Analyse de la Cause Racine
|
|
|
|
### 1. Source du Problème
|
|
**Fichier**: `packages/design-system/src/components/Input/Input.tsx:51`
|
|
|
|
```tsx
|
|
className={cn(
|
|
'w-full py-3 bg-kodo-graphite border border-kodo-steel text-white placeholder-gray-500 font-body text-base rounded-lg focus:outline-none focus:border-kodo-cyan focus:ring-1 focus:ring-kodo-cyan transition-all duration-200',
|
|
...
|
|
)}
|
|
```
|
|
|
|
**Problèmes identifiés**:
|
|
1. **Double indication de focus** : `focus:border-kodo-cyan` + `focus:ring-1 focus:ring-kodo-cyan`
|
|
- Le border cyan + le ring cyan créent un contour très visible
|
|
2. **Focus trop agressif** : Le style s'applique sur `:focus` au lieu de `:focus-visible`
|
|
- `:focus` s'applique même quand on clique avec la souris
|
|
- `:focus-visible` ne s'applique que lors de la navigation au clavier (meilleure UX)
|
|
3. **Ring trop visible** : `ring-1` avec couleur cyan très saturée (`kodo-cyan: rgb(102, 252, 241)`)
|
|
- Le ring ajoute un contour supplémentaire autour du border
|
|
- La couleur cyan est très lumineuse et distrayante
|
|
|
|
### 2. Impact Systémique
|
|
- ✅ **Présent sur Login** : Champ Email avec contour cyan visible
|
|
- ✅ **Présent sur Register** : Tous les champs avec le même problème
|
|
- ✅ **Présent partout dans l'app** : Tous les inputs utilisant `@veza/design-system` Input
|
|
- ✅ **Problème d'accessibilité** : Le focus devrait être visible mais pas distrayant
|
|
|
|
### 3. Conflits Potentiels
|
|
- **Conflit avec `global-effects.css`** : `:focus-visible { outline: 2px solid var(--veza-cyan); }`
|
|
- Double outline (un du global, un du Input)
|
|
- **Conflit avec styles personnalisés** : Certains composants peuvent override les styles
|
|
|
|
---
|
|
|
|
## 📋 Plan de Remédiation Durable
|
|
|
|
### Objectif
|
|
Corriger le style de focus des inputs pour qu'il soit :
|
|
- ✅ Visible pour l'accessibilité (navigation clavier)
|
|
- ✅ Discret et non distrayant
|
|
- ✅ Cohérent dans toute l'application
|
|
- ✅ Sans régressions (ne pas casser l'accessibilité)
|
|
|
|
### Principes
|
|
1. **Utiliser `:focus-visible` au lieu de `:focus`**
|
|
- Meilleure UX : focus visible seulement lors de la navigation clavier
|
|
2. **Un seul indicateur de focus** : border OU ring, pas les deux
|
|
3. **Couleur moins agressive** : Opacité réduite ou couleur plus subtile
|
|
4. **Cohérence** : Même style partout dans l'app
|
|
|
|
---
|
|
|
|
## 🛠️ Étapes de Remédiation
|
|
|
|
### Étape 1 : Corriger le Composant Input du Design System
|
|
**Fichier**: `packages/design-system/src/components/Input/Input.tsx`
|
|
|
|
**Changements**:
|
|
```tsx
|
|
// AVANT
|
|
'focus:outline-none focus:border-kodo-cyan focus:ring-1 focus:ring-kodo-cyan'
|
|
|
|
// APRÈS
|
|
'focus-visible:outline-none focus-visible:border-kodo-cyan/60 focus-visible:ring-0'
|
|
```
|
|
|
|
**Justification**:
|
|
- `focus-visible` : Focus visible seulement au clavier
|
|
- `border-kodo-cyan/60` : Border cyan avec 60% d'opacité (moins agressif)
|
|
- `ring-0` : Supprimer le ring (un seul indicateur suffit)
|
|
|
|
**Risque**: LOW 🔒
|
|
- Améliore l'UX sans casser l'accessibilité
|
|
- `focus-visible` est supporté par tous les navigateurs modernes
|
|
|
|
---
|
|
|
|
### Étape 2 : Vérifier et Corriger les Autres Composants Input
|
|
**Fichiers à vérifier**:
|
|
1. `apps/web/src/components/ui/input.tsx`
|
|
2. `apps/web/src/features/auth/components/AuthInput.tsx`
|
|
3. `apps/web/src/components/base/Input.tsx`
|
|
|
|
**Action**: Appliquer le même principe (`focus-visible` + border unique + opacité réduite)
|
|
|
|
**Risque**: LOW 🔒
|
|
- Cohérence dans toute l'app
|
|
- Pas de régression si on suit le même pattern
|
|
|
|
---
|
|
|
|
### Étape 3 : Corriger le Style Global de Focus
|
|
**Fichier**: `apps/web/src/styles/global-effects.css:95-99`
|
|
|
|
**Changements**:
|
|
```css
|
|
/* AVANT */
|
|
:focus-visible {
|
|
outline: 2px solid var(--veza-cyan);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* APRÈS */
|
|
:focus-visible {
|
|
outline: 2px solid rgba(102, 252, 241, 0.6); /* cyan avec 60% opacité */
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* Exception pour les inputs : pas d'outline (le border suffit) */
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible {
|
|
outline: none;
|
|
}
|
|
```
|
|
|
|
**Justification**:
|
|
- Opacité réduite pour moins d'agressivité
|
|
- Exception pour inputs : éviter double indication (outline + border)
|
|
|
|
**Risque**: LOW 🔒
|
|
- Améliore la cohérence
|
|
- Ne casse pas l'accessibilité
|
|
|
|
---
|
|
|
|
### Étape 4 : Supprimer les Fixes Temporaires
|
|
**Fichiers à nettoyer**:
|
|
1. `apps/web/src/utils/aggressiveVisualFix.ts` (supprimer ou désactiver)
|
|
2. `apps/web/src/utils/fixDisplayIssues.ts` (nettoyer les fixes liés aux "lignes verticales")
|
|
|
|
**Action**:
|
|
- Supprimer les fixes qui masquent les scrollbars (on veut les garder discrètes mais visibles)
|
|
- Supprimer les fixes qui suppriment les bordures verticales (ce n'était pas le problème)
|
|
- Garder uniquement les outils de diagnostic si utiles
|
|
|
|
**Risque**: LOW 🔒
|
|
- Ces fixes étaient des solutions à un problème mal identifié
|
|
- Leur suppression ne causera pas de régression
|
|
|
|
---
|
|
|
|
### Étape 5 : Tests de Validation
|
|
|
|
#### Tests Manuels
|
|
1. **Page Login**:
|
|
- [ ] Ouvrir `/login`
|
|
- [ ] Vérifier qu'aucun input n'a de contour cyan au chargement
|
|
- [ ] Cliquer dans le champ Email : pas de contour cyan
|
|
- [ ] Naviguer avec Tab : contour cyan visible (discret, 60% opacité)
|
|
- [ ] Vérifier que le contour disparaît quand on clique ailleurs
|
|
|
|
2. **Page Register**:
|
|
- [ ] Même tests que Login
|
|
- [ ] Vérifier tous les champs (email, username, password, password_confirm)
|
|
|
|
3. **Autres Pages**:
|
|
- [ ] Tester les inputs dans d'autres pages (dashboard, profil, etc.)
|
|
- [ ] Vérifier la cohérence du style de focus
|
|
|
|
#### Tests d'Accessibilité
|
|
1. **Navigation Clavier**:
|
|
- [ ] Tab : Focus visible avec contour cyan discret
|
|
- [ ] Shift+Tab : Focus visible
|
|
- [ ] Entrée : Action déclenchée
|
|
|
|
2. **Lecteurs d'Écran**:
|
|
- [ ] Vérifier que les labels sont correctement associés
|
|
- [ ] Vérifier que les états de focus sont annoncés
|
|
|
|
---
|
|
|
|
## 📊 Ordre d'Exécution Recommandé
|
|
|
|
1. ✅ **Étape 1** : Corriger Input du Design System (impact immédiat sur toute l'app)
|
|
2. ✅ **Étape 2** : Corriger les autres composants Input (cohérence)
|
|
3. ✅ **Étape 3** : Corriger le style global (cohérence globale)
|
|
4. ✅ **Étape 4** : Nettoyer les fixes temporaires (code propre)
|
|
5. ✅ **Étape 5** : Tests de validation (vérification)
|
|
|
|
---
|
|
|
|
## ⚠️ Points d'Attention
|
|
|
|
### Régressions Possibles
|
|
1. **Accessibilité** : S'assurer que le focus reste visible au clavier
|
|
- ✅ Solution : Utiliser `focus-visible` (visible au clavier, invisible à la souris)
|
|
2. **Cohérence** : S'assurer que tous les inputs ont le même style
|
|
- ✅ Solution : Corriger tous les composants Input
|
|
3. **Compatibilité Navigateurs** : `focus-visible` est supporté depuis 2018
|
|
- ✅ Pas de problème de compatibilité
|
|
|
|
### Rollback
|
|
Si problème après correction :
|
|
1. Revenir à `focus:` au lieu de `focus-visible:`
|
|
2. Garder le border cyan mais avec opacité réduite
|
|
3. Supprimer le ring pour éviter la double indication
|
|
|
|
---
|
|
|
|
## 📝 Résumé
|
|
|
|
**Problème Identifié** : Contour cyan trop visible sur les inputs en focus
|
|
**Cause Racine** : Style de focus agressif (`focus:` + border + ring + couleur saturée)
|
|
**Solution** : `focus-visible:` + border unique + opacité réduite
|
|
**Impact** : Toute l'application (Login, Register, et toutes les pages avec inputs)
|
|
**Risque** : LOW 🔒 (amélioration UX sans casser l'accessibilité)
|
|
|
|
---
|
|
|
|
**Date**: 2025-01-27
|
|
**Statut**: ✅ Analyse complète, prêt pour remédiation
|