SPEC — Refonte Graphique & UX de la Recherche Pagefind
SPEC — Refonte Graphique & UX de la Recherche Pagefind
Documentation technique
Cycle : DOC → SPEC → CODE → TEST
Scope : Alignement complet du composantSearchModalsur le design et l’expérience utilisateur officielle de Pagefind.
Destination Spec :docs/PM/phase0-search-ui-refinement.spec.md
1. Analyse Comparative (Screenshots Utilisateur)
| Élément | État Actuel (1 & 3) | Target Pagefind Official (2 & 4) |
|---|---|---|
| Typographie | Police avec empattement (serif) héritée | Police moderne sans-serif (system-ui, sans-serif) |
| Bouton Déclencheur (Header) | Bouton plat compact | Boîte de recherche type input avec 2 badges séparés <kbd>Ctrl</kbd> <kbd>K</kbd> |
| Champ de recherche Modal | Simple bordure inférieure | Champ encadré arrondi avec contour actif (focus ring bleu 2px) |
| Pied de Modale (Keyboard Shortcuts) | Aucun | Barre de raccourcis : <kbd>esc</kbd> close, <kbd>↓</kbd><kbd>↑</kbd> navigate, <kbd>↵</kbd> select |
| Navigation Clavier dans les Résultats | Aucune (souris uniquement) | Flèches Haut/Bas pour surligner un résultat, Entrée pour ouvrir la page |
2. Spécifications Techniques (CODE)
2.1 Bouton Déclencheur dans le Header (Header.astro / SearchModal.astro)
- Boîte aux coins arrondis (
8px), fond blanc/gris très clair (#f8fafc), bordure#e2e8f0. - Icône de loupe grise à gauche.
- Texte
"Search"ou"Rechercher...". - Deux touches distinctes à droite :
<kbd>Ctrl</kbd>(ou<kbd>⌘</kbd>sur Mac) et<kbd>K</kbd>.
2.2 Modale de Recherche (SearchModal.astro)1/2
- Cadre du champ de recherche :
- Boîte d’entrée distincte avec bordure arrondie (
10px). - Outline bleu vif (
border-color: #2563eb,box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15)) lorsqu’il est actif.
- Boîte d’entrée distincte avec bordure arrondie (
- Pied de modale (Footer Shortcuts) :
- Bandeau inférieur séparé par une bordure fine
#f1f5f9. - Badges clavier
<kbd>esc</kbd> close,<kbd>↓</kbd><kbd>↑</kbd> navigate,<kbd>↵</kbd> select.
- Bandeau inférieur séparé par une bordure fine
2.2 Modale de Recherche (SearchModal.astro)2/2
- Navigation au clavier :
ArrowDown: sélectionne l’élément suivant dans la liste des résultats.ArrowUp: sélectionne l’élément précédent.Enter: navigue vers le lien de l’élément sélectionné.
- Typographie Sans-serif :
- Forcer
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serifsur l’ensemble de la modale et du déclencheur.
- Forcer
3. Matrice de Validation & Critères d’Acceptation (TEST)1/2
- Visuel Déclencheur Header : Style identique à l’image 2 de Pagefind avec 2 badges
<kbd>Ctrl</kbd><kbd>K</kbd>. - Visuel Champ Modal : Champ encadré avec contour d’activation bleu (image 4).
- Typographie : Police sans-serif propre sur la modale et les résultats (image 4).
3. Matrice de Validation & Critères d’Acceptation (TEST)2/2
- Footer Raccourcis Clavier : Présence des explications
esc,navigate,selecten bas de la modale. - Navigation Flèches Clavier : Navigation fluide avec
↑/↓et validation parEnter. - Contrôle des Types :
npx pnpm@12.3.4 typecheck-> 0 erreurs.