fix(vue-fiches): accessibilité et contrôles M8 (Lighthouse 24/24 ≥ 95)
Nom accessible de la carte-fiche = son contenu ; résumé et « Sans localisation » en color-mix(--text 78 %) ; libellé du tri gardé pour les lecteurs d'écran sous 768 px ; lien « sans adresse » hors du parcours clavier quand le compteur est masqué ; bouton Chatbot flottant en fond plein ; option sélectionnée explicite des <select> (rendu serveur) ; pastille « Sans adresse » ; cluster allumé au survol ; pas d'init Leaflet sur un conteneur détaché. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SCt6e8wWiYqRXLJAuKqP5i
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
a98342c5f1
commit
d4e72942fc
@@ -11,7 +11,6 @@
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="fiche-mini-card__ouvrir"
|
class="fiche-mini-card__ouvrir"
|
||||||
:aria-label="fiche.nom"
|
|
||||||
@click="emit('open')"
|
@click="emit('open')"
|
||||||
>
|
>
|
||||||
<span class="fiche-mini-card__nom">{{ fiche.nom }}</span>
|
<span class="fiche-mini-card__nom">{{ fiche.nom }}</span>
|
||||||
@@ -145,7 +144,8 @@ const emit = defineEmits<{
|
|||||||
margin-top: var(--space-2xs);
|
margin-top: var(--space-2xs);
|
||||||
font-size: var(--fs-xs);
|
font-size: var(--fs-xs);
|
||||||
line-height: var(--lh-base);
|
line-height: var(--lh-base);
|
||||||
color: var(--text-muted);
|
/* --text-muted ne donne que 3,7:1 sur --surface (DESIGN-SYSTEM §Navigation) */
|
||||||
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
@@ -165,6 +165,6 @@ const emit = defineEmits<{
|
|||||||
.fiche-mini-card__no-geo {
|
.fiche-mini-card__no-geo {
|
||||||
margin-top: var(--space-2xs);
|
margin-top: var(--space-2xs);
|
||||||
font-size: var(--fs-xs);
|
font-size: var(--fs-xs);
|
||||||
color: var(--text-subtle);
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -681,8 +681,10 @@ watch(() => props.vf.largeur, (l) => { if (l && l !== 'telephone') feuilleOuvert
|
|||||||
.vf-filtrer { display: inline-flex; align-items: center; }
|
.vf-filtrer { display: inline-flex; align-items: center; }
|
||||||
.vf-filtres { display: none; }
|
.vf-filtres { display: none; }
|
||||||
.vf-compteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
|
.vf-compteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
|
||||||
|
/* compteur lu par les lecteurs d'écran seulement : rien de focalisable dedans */
|
||||||
|
.vf-compteur button, .vf-compteur__sep { display: none; }
|
||||||
.vf-select--groupe { display: none; }
|
.vf-select--groupe { display: none; }
|
||||||
.vf-select span:not(.vf-sr) { display: none; }
|
.vf-select span:not(.vf-sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
|
||||||
.vf-liste { padding: var(--space-sm); }
|
.vf-liste { padding: var(--space-sm); }
|
||||||
|
|
||||||
.vf--fiches .vf-pastilles--tel,
|
.vf--fiches .vf-pastilles--tel,
|
||||||
|
|||||||
+1
-2
@@ -79,8 +79,7 @@
|
|||||||
:style="`
|
:style="`
|
||||||
bottom: ${basFlottants}px;
|
bottom: ${basFlottants}px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background: var(--nav-primary);
|
background: var(--nav-primary-solid);
|
||||||
opacity: 0.92;
|
|
||||||
color: var(--nav-text-on-primary);
|
color: var(--nav-text-on-primary);
|
||||||
box-shadow: 0 4px 16px rgba(26,34,56,0.25);
|
box-shadow: 0 4px 16px rgba(26,34,56,0.25);
|
||||||
font-family: var(--nav-font);
|
font-family: var(--nav-font);
|
||||||
|
|||||||
+1
-2
@@ -69,8 +69,7 @@
|
|||||||
:style="`
|
:style="`
|
||||||
bottom: ${basFlottants}px;
|
bottom: ${basFlottants}px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background: var(--nav-primary);
|
background: var(--nav-primary-solid);
|
||||||
opacity: 0.92;
|
|
||||||
color: var(--nav-text-on-primary);
|
color: var(--nav-text-on-primary);
|
||||||
box-shadow: 0 4px 16px rgba(26,34,56,0.25);
|
box-shadow: 0 4px 16px rgba(26,34,56,0.25);
|
||||||
font-family: var(--nav-font);
|
font-family: var(--nav-font);
|
||||||
|
|||||||
Reference in New Issue
Block a user