veza/apps/web/ANALYSE_PROBLEME_VISUEL.md

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

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:

// 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:

/* 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