fix(a11y): chip actif en fond plein sur tout le site, survol réservé aux pointeurs
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:
co-authored by
Claude Opus 5.5
parent
6ac5a2bdf7
commit
74337c0bcb
+23
-16
@@ -77,8 +77,12 @@ const emit = defineEmits<{
|
||||
}
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
/* 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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@media (hover: hover) {
|
||||
.chip--posture:hover {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
}
|
||||
.chip--posture.chip--active {
|
||||
background: var(--accent);
|
||||
|
||||
@@ -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) {
|
||||
/* 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: 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;
|
||||
}
|
||||
.field-group :deep(.chip--secondaire.chip--active:hover) {
|
||||
background: transparent !important;
|
||||
border-color: var(--nav-primary-solid) !important;
|
||||
color: var(--nav-text) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user