veza/docs/archive/root-md/FIX_APPLICATION_INSTRUCTIONS.md

Instructions pour Appliquer les Corrections

✅ Corrections Appliquées

Le design-system a été rebuildé avec les corrections :

• ✅ focus: → focus-visible: (focus visible seulement au clavier)
• ✅ Border cyan avec 60% d'opacité
• ✅ Ring supprimé

🔄 Étapes pour Appliquer les Corrections

Option 1 : Redémarrer le Serveur Dev (Recommandé)

1. Arrêter le serveur dev :

   # Dans le terminal où le serveur dev tourne
   Ctrl+C
   

2. Redémarrer le serveur dev :

   cd apps/web
   npm run dev
   

3. Vider le cache du navigateur :

   • Chrome/Edge : Ctrl+Shift+R (ou Cmd+Shift+R sur Mac)
   • Firefox : Ctrl+F5 (ou Cmd+Shift+R sur Mac)

Option 2 : Forcer le Rechargement (Si Option 1 ne fonctionne pas)

1. Arrêter le serveur dev

2. Nettoyer les caches :

   cd apps/web
   rm -rf node_modules/.vite
   rm -rf dist
   

3. Redémarrer :

   npm run dev
   

4. Vider le cache du navigateur (voir Option 1)

✅ Vérification

Après redémarrage, vérifier que :

1. Au chargement de la page : Aucun input n'a de contour cyan
2. Au clic souris : Pas de contour cyan
3. Navigation clavier (Tab) : Contour cyan discret visible (60% opacité)
4. Après clic ailleurs : Le contour disparaît

🐛 Si le Problème Persiste

1. Vérifier dans les DevTools (F12) → Elements → Inspecter un input
2. Vérifier que les classes contiennent focus-visible: et non focus:
3. Si les classes sont encore focus:, le cache n'a pas été vidé

Solution :

• Vider complètement le cache du navigateur
• Redémarrer le serveur dev
• Vérifier que packages/design-system/dist/index.js contient focus-visible:border-kodo-cyan/60