jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): chip actif en fond plein sur tout le site, survol réservé aux pointeurs

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0174RrDEQFQTtySXkTcsUKuv
This commit is contained in:
Jules Neny
2026-09-29 00:26:05 +02:00
co-authored by Claude Opus 5.5
parent 6ac5a2bdf7
commit 74337c0bcb
2 changed files with 40 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chip.vue
+31 -24
View File
@@ -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);