mirror of
https://github.com/MaksTinyWorkshop/_Assistant_Lead_Tech
synced 2026-04-27 23:08:16 +02:00
chore(capitalisation): integrate triage entries and anchor new knowledge
This commit is contained in:
@@ -176,3 +176,25 @@ return (
|
||||
</>
|
||||
);
|
||||
```
|
||||
---
|
||||
|
||||
<a id="pattern-navigation-overlay-focus-trap"></a>
|
||||
## Pattern : Overlay/drawer accessible avec focus trap
|
||||
|
||||
### Synthèse
|
||||
Teleport + backdrop + Escape + scroll-lock n'est pas suffisant : le focus trap est obligatoire.
|
||||
|
||||
### Analyse
|
||||
Sans focus trap, le clavier peut sortir de la sheet/panel et casser l'ordre de navigation.
|
||||
|
||||
### Validation
|
||||
- Validé le : 09-04-2026
|
||||
- Contexte technique : Vue 3 / accessibilité overlays — RL799_V2
|
||||
- Applicable à tout drawer/sheet/modal custom en SPA (desktop et mobile clavier).
|
||||
|
||||
### Implémentation
|
||||
- Capturer le focus à l'ouverture (premier élément interactif).
|
||||
- Boucler Tab/Shift+Tab dans le conteneur.
|
||||
- Restaurer le focus au trigger à la fermeture.
|
||||
|
||||
---
|
||||
|
||||
@@ -187,3 +187,24 @@ Ne jamais :
|
||||
- [ ] Garde-fou explicite contre les doubles actions
|
||||
- [ ] Refresh explicite après mutation réussie
|
||||
- [ ] Tests sur succès, erreur et action concurrente
|
||||
|
||||
---
|
||||
|
||||
<a id="pattern-state-hydratation-auth-async"></a>
|
||||
## Pattern : Hydratation auth asynchrone avec états explicites
|
||||
|
||||
### Synthèse
|
||||
Lors d'un passage sync -> async au boot, exposer un statut d'hydratation explicite (`idle`/`hydrating`/`ready`).
|
||||
|
||||
### Analyse
|
||||
Sans état transitoire formel, les guards lisent des valeurs incomplètes et déclenchent des redirections erronées.
|
||||
|
||||
### Validation
|
||||
- Validé le : 18-04-2026
|
||||
- Contexte technique : Vue 3 / Pinia / boot async — RL799_V2
|
||||
- Applicable à toute initialisation critique : session, feature flags, restore état persistant.
|
||||
|
||||
### Implémentation (exemple minimal)
|
||||
- Store : `hydrateStatus` + promesse partagée en cours pour les appels concurrents.
|
||||
- Guards : `await hydrate()` avant toute décision d'accès.
|
||||
- UI : fallback de rendu tant que l'hydratation n'est pas `ready`.
|
||||
|
||||
@@ -132,3 +132,24 @@ expect(aBeforeB).toBe(true);
|
||||
### Risque associé
|
||||
|
||||
`boundingBox().y` vérifie la position visuelle rendue par CSS, pas l'ordre dans le DOM. De plus `boundingBox()` retourne `null` pour les éléments hors viewport → crash non déterministe.
|
||||
|
||||
---
|
||||
|
||||
<a id="pattern-tests-selecteurs-e2e-stables"></a>
|
||||
## Pattern : Sélecteurs E2E stables orientés intention
|
||||
|
||||
### Synthèse
|
||||
Les tests E2E doivent cibler des sélecteurs stables (`data-testid`, role/name) et non la structure CSS/XPath.
|
||||
|
||||
### Analyse
|
||||
Les classes et la structure DOM changent fréquemment sans régression fonctionnelle.
|
||||
|
||||
### Validation
|
||||
- Validé le : 14-04-2026
|
||||
- Contexte technique : Playwright / sélecteurs robustes — RL799_V2
|
||||
- Ce pattern s'applique à Playwright/Cypress sur toutes les UIs réactives.
|
||||
|
||||
### Implémentation
|
||||
- Préférer `data-testid` paramétré par identifiant métier stable.
|
||||
- Éviter `locator.first()` si l'ordre peut muter.
|
||||
- Isoler les tests mutateurs avec stratégie de remise à l'état (snapshot/restore).
|
||||
|
||||
Reference in New Issue
Block a user