From 74337c0bcb6587945cb4a0e8bf3b34b465a1dc1c Mon Sep 17 00:00:00 2001 From: Jules Neny Date: Tue, 29 Sep 2026 00:26:05 +0200 Subject: [PATCH] =?UTF-8?q?fix(a11y):=20chip=20actif=20en=20fond=20plein?= =?UTF-8?q?=20sur=20tout=20le=20site,=20survol=20r=C3=A9serv=C3=A9=20aux?= =?UTF-8?q?=20pointeurs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Chip.vue : l'actif (échelle, fonction) passe de --primary, translucide dans le thème AEP (3,96:1 composé, sous AA), à --nav-primary-solid / --nav-text-on-primary (14,62:1 ; ≈12:1 en sombre), comme le formulaire libre depuis AF4. Le survol d'un actif ne change plus de fond ; tous les :hover passent sous @media (hover: hover) (plus de chip collé au tap). Mesuré sur /, /agences, /proposer, mobile et desktop. FormLibre.vue : surcharges locales de AF4 devenues inutiles retirées (principal plein, bloc hover: none) ; le survol du secondaire passe sous (hover: hover). Secondaire en contour vérifié au toucher. Décision MOE du 29/09, veto Jules possible. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_0174RrDEQFQTtySXkTcsUKuv --- components/Chip.vue | 55 ++++++++++++++++++++++------------------ components/FormLibre.vue | 45 +++++++------------------------- 2 files changed, 40 insertions(+), 60 deletions(-) diff --git a/components/Chip.vue b/components/Chip.vue index 8fec213..1bf2da9 100644 --- a/components/Chip.vue +++ b/components/Chip.vue @@ -77,8 +77,12 @@ const emit = defineEmits<{ } } -.chip:hover { - transform: translateY(-1px); +/* Survol : uniquement sur pointeur capable de survol. Sur tactile, :hover + reste collé après un tap (chip « allumé » sans être actif). */ +@media (hover: hover) { + .chip:hover { + transform: translateY(-1px); + } } .chip:focus-visible { @@ -92,19 +96,21 @@ const emit = defineEmits<{ color: var(--text); background: transparent; } -.chip--echelle:hover { - background: var(--primary-hover); - border-color: var(--primary-hover); - color: var(--on-primary); +@media (hover: hover) { + .chip--echelle:hover { + background: var(--primary-hover); + border-color: var(--primary-hover); + color: var(--on-primary); + } } +/* Actif = fond PLEIN. --primary est translucide dans le thème AEP + (rgba(26,34,56,.6) : 4,16:1 sur le fond de page, sous AA) ; le couple + --nav-primary-solid / --nav-text-on-primary (≈14,6:1) reste lisible aussi + en sombre. Le survol d'un chip actif ne change pas de fond. */ .chip--echelle.chip--active { - background: var(--primary); - border-color: var(--primary); - color: var(--on-primary); -} -.chip--echelle.chip--active:hover { - background: var(--primary-hover); - border-color: var(--primary-hover); + background: var(--nav-primary-solid); + border-color: var(--nav-primary-solid); + color: var(--nav-text-on-primary); } /* ── Fonction/hashtag : pleine bleu, inactif = bg-alt ────────────────────── */ @@ -113,16 +119,15 @@ const emit = defineEmits<{ background: var(--bg-alt); color: var(--text); } -.chip--fonction:hover { - background: var(--primary-hover); - color: var(--on-primary); +@media (hover: hover) { + .chip--fonction:hover { + background: var(--primary-hover); + color: var(--on-primary); + } } .chip--fonction.chip--active { - background: var(--primary); - color: var(--on-primary); -} -.chip--fonction.chip--active:hover { - background: var(--primary-hover); + background: var(--nav-primary-solid); + color: var(--nav-text-on-primary); } /* ── Posture (préparée pour plus tard) : outline safran ──────────────────── */ @@ -131,9 +136,11 @@ const emit = defineEmits<{ color: var(--text); background: transparent; } -.chip--posture:hover { - background: var(--accent); - color: var(--on-accent); +@media (hover: hover) { + .chip--posture:hover { + background: var(--accent); + color: var(--on-accent); + } } .chip--posture.chip--active { background: var(--accent); diff --git a/components/FormLibre.vue b/components/FormLibre.vue index 1d9b69a..df11771 100644 --- a/components/FormLibre.vue +++ b/components/FormLibre.vue @@ -283,19 +283,11 @@ async function submit() { white-space: nowrap; } -/* ── B5-M2c : distinction principal / second choix + contraste chip actif ── - Mesuré avant modif (script de capture, af4-avant-*) : le chip actif de - Chip.vue (variant fonction, fond rgba(26,34,56,.6) sur fond de page - #f8f6f1) rend ≈ 4.16:1 au repos — sous le seuil AA 4.5:1. C'est un défaut - général de Chip.vue (touche aussi les filtres de / et /agences), signalé - hors mandat — voir rapport. On neutralise ce point pour CE formulaire - seulement, sans toucher Chip.vue : fond plein (--nav-primary-solid) au - lieu de la version translucide, pairing déjà utilisé ailleurs sur le site - (pages/trouver-du-taf.vue .taff-tab--active). Mesuré après : ≈14.6:1. */ -.field-group :deep(.chip--fonction.chip--active) { - background: var(--nav-primary-solid); - color: var(--nav-text-on-primary); -} +/* ── B5-M2c : distinction principal / second choix ── + Le principal actif (fond plein, ≈14,6:1) et le survol gardé par + @media (hover: hover) viennent de Chip.vue depuis AF5 : les surcharges + locales de AF4 (principal plein, survol collant neutralisé sur tactile) + ont été retirées. */ /* Chip secondaire (deuxième choix) : contour au lieu de plein, pour ne jamais se confondre avec le principal — ni à l'œil ni au clic. Texte @@ -306,32 +298,13 @@ async function submit() { border-color: var(--nav-primary-solid) !important; color: var(--nav-text) !important; } -.field-group :deep(.chip--secondaire.chip--active:hover) { - background: rgba(var(--nav-primary-raw), 0.08) !important; - border-color: var(--nav-primary-solid) !important; - color: var(--nav-text) !important; -} - -/* Survol collant sur tactile (le :hover de Chip.vue n'est pas gardé par - @media (hover: hover)) : neutralisé ici pour les deux chips actifs de ce - formulaire, sans toucher Chip.vue. Mesuré : le survol n'aggravait pas le - contraste du principal (6.68:1 contre 4.16:1 au repos, avant modif) mais - figeait un fond et un transform incohérents après un tap tant que rien ne - les levait. */ -@media (hover: none) { - .field-group :deep(.chip--fonction.chip--active) { - transform: none !important; - } - .field-group :deep(.chip--fonction.chip--active:hover) { - background: var(--nav-primary-solid) !important; - color: var(--nav-text-on-primary) !important; - transform: none !important; - } +/* Survol du secondaire : pointeur capable de survol seulement, comme Chip.vue + (sur tactile, :hover reste collé après un tap). */ +@media (hover: hover) { .field-group :deep(.chip--secondaire.chip--active:hover) { - background: transparent !important; + background: rgba(var(--nav-primary-raw), 0.08) !important; border-color: var(--nav-primary-solid) !important; color: var(--nav-text) !important; - transform: none !important; } }