68 lines
1.7 KiB
Markdown
68 lines
1.7 KiB
Markdown
|
# 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** :
|
||
|
|
```bash
|
||
|
|
# Dans le terminal où le serveur dev tourne
|
||
|
|
Ctrl+C
|
||
|
|
```
|
||
|
|
|
||
|
|
2. **Redémarrer le serveur dev** :
|
||
|
|
```bash
|
||
|
|
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** :
|
||
|
|
```bash
|
||
|
|
cd apps/web
|
||
|
|
rm -rf node_modules/.vite
|
||
|
|
rm -rf dist
|
||
|
|
```
|
||
|
|
|
||
|
|
3. **Redémarrer** :
|
||
|
|
```bash
|
||
|
|
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`
|
||
|
|
|