[Résolu] Champ de saisie avec bouton loupe pour version DARK

Bonjour,

Champ de saisie avec bouton de soumission en forme de loupe, un classique, voir le codepen.

Bon, déjà j'accepte la discussion sur le code en question, c'est peut-être perfectible mais cela fonctionne.

Mon problème est la version DARK.
Je n'ai pas trouvé de filtres qui permettent de bien traiter l'image en question pour une version DARK.
Ce serait le plus simple...

Mettre deux images, une pour version LIGHT et une autre pour version DARK avec display none de l'une ou de l'autre selon @media (prefers-color-scheme: dark) je trouve cela assez horrible.

Je penche plutôt pour une solution en transformant l'image en background-image et de changer cette image avec la media-query.

Sans impact négatif pour l'accessibilité, me semble-t-il ?

J'espère avoir bien expliqué le problème, qu'en pensez-vous ?
Modifié par boteha_2 (21 Feb 2024 - 20:25)

Bonjour,

Tu devrais utiliser du noir pour ton icône svg.

Et ensuite, tu vas à https://isotropic.co/tool/hex-color-to-css-filter/ (ou un autre site du même genre) et tu choisis la couleur que tu souhaites obtenir et le site va te fabriquer le filter approprié (parfois, il faut recommencer plusieurs fois pour obtenir quelque chose de correct). Mais pour que ça marche, il faut que ton svg d'origine soit en noir.

Amicalement,

Bonjour parsimonhi,

Merci de ton suivi.

C'est intéressant.

Mais actuellement mon petit effet au survol par background-color m'oblige à avoir trois couleurs :

1) La couleur du fond de l'image, --blanc ou --noir
2) La couleur du tracé de la loupe.
3) La couleur de l'intérieur de la loupe qui est transparent.

Je suppose que le filtre laisse le transparent transparent.
Ma source est le --blanc et la cible est le --noir.
Mais que va-t-il se passer pour le tracé ?

Bon, je vais essayer.

Bonjour,

Tu mets le <svg> de ta loupe inline dans une balise <button>. Et ensuite, tu appliques un filter en mode light et un autre en mode dark pour le <svg> de la loupe uniquement. Tu mets la couleur du fond du <button> à blanc ou noir (sans recourir à un filter) selon que tu es en mode light ou dark. Ça devrait fonctionner tranquille.

Amicalement,

parsimonhi a écrit :
Tu mets le <svg> de ta loupe inline dans une balise <button>. Et ensuite, tu appliques un filter en mode light et un autre en mode dark pour le <svg> de la loupe uniquement. Tu mets la couleur du fond du <button> à blanc ou noir (sans recourir à un filter) selon que tu es en mode light ou dark. Ça devrait fonctionner tranquille.

Je me demande ce qui se passe pour mon effet survol au centre de la loupe.
Pour le faire je dois avoir ce centre transparent mais le reste de l'image opaque, non ?
Modifié par boteha_2 (21 Feb 2024 - 22:23)

Bonjour,

Ton svg avait besoin d'un toilettage. En voici une version plus simple monochrome sans css interne qui devrait être plus simple à gérer pour le survol.

<svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd"
		d="M35 41A17 17 0 0 0 35 7A17 17 0 0 0 35 41ZM22 43A23 23 0 0 0 35 47A23 23 0 0 0 35 1A23 23 0 0 0 17.25 38.75L2.25 53.75A3 3 0 0 0 7 58Z"/>
</svg>

EDIT: légère modification du path (le point 17.5,38.5 devient 17.25,38.75 et le point 2.5,53.5 devient 2.25 53.75). Le cercle externe a alors un pourtour plus proche du cercle qu'on aurait s'il était refermé sur lui-même.

Amicalement,
Modifié par parsimonhi (21 Feb 2024 - 23:19)

Bonjour,

Merci de votre suivi.

J'ai chargé le svg de parcimonhi sur le codepen.

Mais vous voyez le problème avec mon effet de survol...

Peut-on donner au svg la forme de la loupe, au lieu du rectangle ?
Cela me semble impossible.

D'où ce problème déjà soulevé des 3 couleurs :
1) La couleur du fond de l'image, --blanc ou --noir
2) La couleur du tracé de la loupe.
3) La couleur de l'intérieur de la loupe qui est transparent.

Je reconnais que l'effet survol complique pas mal les choses.

Bonjour,

1) Si tu mets le svg comme source d'une balise <img>, l'image doit avoir un fond transparent. Et si tu dois mettre un background blanc ou noir, tu peux le mettre dans le css sur la balise <input> de recherche, pas sur la balise <img>. Il faut aussi ajouter un overflow:hidden sur le <p> qui les entoure (à cause de sa bordure). Et pour changer la couleur de la loupe, tu mets un filter sur la balise <img>. Voilà ce que ça peut donner (je n'ai mis que les parties qui sont à modifier) :

:root {
  --noir: #0e1d2d;
  --blanc: #ffffff;
  --ariane-fonce: #ced8db;
  --ariane-fonce-filter: invert(86%) sepia(4%) saturate(333%) hue-rotate(147deg)
    brightness(97%) contrast(97%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --noir: #f7f7f2;
    --blanc: #07131e;
    --ariane-fonce: #4e697c;
    --ariane-fonce-filter: invert(38%) sepia(34%) saturate(363%) hue-rotate(162deg) brightness(94%) contrast(93%);
  }
}

p.alter {overflow: hidden;}

.ptxt {background: var(--blanc);}

.ptxt + button > img {background: transparent;}

.ptxt + button:hover > img {
  filter: var(--ariane-fonce-filter);
}

2) Mais tu peux aussi mettre directement dans le html le code du svg. Auquel cas ce sera beaucoup plus facile à styler en cas de survol. Le html du bouton devient :

<button type="submit"><svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd"
		d="M35 41A17 17 0 0 0 35 7A17 17 0 0 0 35 41ZM22 43A23 23 0 0 0 35 47A23 23 0 0 0 35 1A23 23 0 0 0 17.25 38.75L2.25 53.75A3 3 0 0 0 7 58Z"/>
</svg></button></p>

Il faut ensuite adapter le css. j'ai mis la totalité du css :

:root {
  --noir: #0e1d2d;
  --blanc: #ffffff;
  --ariane-fonce: #ced8db;
}

@media (prefers-color-scheme: dark) {
  :root {
    --noir: #f7f7f2;
    --blanc: #07131e;
    --ariane-fonce: #4e697c;
  }
}

body {
  line-height: 1em;
  font-size: medium;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--blanc);
  color: var(--noir);
}

p.alter {
  display: flex;
  border: 1px solid var(--noir);
  border-radius: 10px;
  overflow: hidden;
}

.ptxt {
  flex: 1;
  padding: 0.4em;
  border-width: 0;
  font-size: 1em;
  background-color: var(--blanc);
  color: var(--noir);
}

.ptxt + button {
  background-color: transparent;
  padding: 0 0.5em 0 0.4em;
  cursor: pointer;
  border-width: 0;
  margin: 0;
}

.ptxt + button > svg {
  width: 17px;
  height: 17px;
  vertical-align: middle;
}

.ptxt + button:hover > svg {
  fill: var(--ariane-fonce);
}

Amicalement,

Bonsoir parsimonhi,

Encore merci de ton suivi.

J'ai chargé ton code sur le codepen.

Je n'ai pas ce soir le temps de bien l'analyser mais il me semble qu'avec ce code je peux définir en LIGHT comme en DARK une couleur de la loupe qui change au survol.
Je peux donc gérer 4 couleurs facilement et sans filtre.

C'est pas mal et je peux sans doute m'en contenter mais je n'ai plus au survol l'effet du changement de couleur de l'intérieur de la loupe.
C'est le tracé qui change alors qu'à la base le tracé restait identique et l'intérieur changeait.

J'y reviens plus tard.

Bonjour,

boteha_2 a écrit :
C'est le tracé qui change alors qu'à la base le tracé restait identique et l'intérieur changeait.

Pourquoi craignais-je que ce changement de couleur de l'intérieur était ce que tu voulais vraiment ?

C'est très moche de changer la couleur de l'intérieur, mais si tu y tiens, tu peux par exemple modifier le svg en rajoutant un 2e <path> qui dessine une cercle initialement transparent à l'intérieur de la loupe. Le svg devient :

<svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd"
		d="M35 41A17 17 0 0 0 35 7A17 17 0 0 0 35 41ZM22 43A23 23 0 0 0 35 47A23 23 0 0 0 35 1A23 23 0 0 0 17.25 38.75L2.25 53.75A3 3 0 0 0 7 58Z"/>
	<path fill="transparent" d="M35 41A17 17 0 0 0 35 7A17 17 0 0 0 35 41Z">
</svg>

Et pour le css, tu remplaces

.ptxt + button:hover > svg {
  fill: var(--ariane-fonce);
}

par

.ptxt + button:hover > svg path:last-of-type {
  fill: var(--ariane-fonce);
}

Amicalement,

Hello parsimonhi,

parsimonhi a écrit :
C'est très moche de changer la couleur de l'intérieur.

Tu as peut-être raison mais c'est la graphiste qui décide.
Et c'est intéressant d'explorer cette possibilité sur le plan technique.

Encore merci.

Bonjour,

boteha_2 a écrit :
Et c'est intéressant d'explorer cette possibilité sur le plan technique

Tout à fait d'accord.

Amicalement,

Bonjour,

Une question de détail à propos du code SVG dans le code html :

<button type="submit"><svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd"
		d="M35 41A17 17 0 0 0 35 7A17 17 0 0 0 35 41ZM22 43A23 23 0 0 0 35 47A23 23 0 0 0 35 1A23 23 0 0 0 17.25 38.75L2.25 53.75A3 3 0 0 0 7 58Z"/>
</svg></button>

Un attribut alt est-il toujours utile, il me semble que oui pour nos amis mal-voyants ?

Où le placer ?

boteha_2 a écrit :
Un attribut alt est-il toujours utile, il me semble que oui pour nos amis mal-voyants ?
Où le placer ?

Hello !

"Alt" est nécessaire uniquement pour les images et uniquement si elles sont pertinentes.

Dans ton cas, tu as un SVG et en règle générale les icônes ne sont jamais considérées comme pertinentes : ici c'est l'élément interactif "<button>" qui porte la responsabilité d'apporter l'information.

Tu pourrais donc masquer totalement ton SVG via aria-hidden, et ajouter l'information sur le bouton via un "<span>" dont le texte serait masqué à l'écran :

<button>
  <svg aria-hidden="true">
    <!-- contenu du SVG -->
  </svg>
  <span class="visually-hidden">Nom accessible masqué à l'écran</span>
</button>

Source : https://github.com/alsacreations/kiwipedia/blob/main/guidelines/accessibility.md#ic%C3%B4ne-svg

Bonjour Raphaël,

Merci de ton suivi.

J'ai ajouté ton code au codepen.

Mais quelque chose m'échappe.

Le span class="visually-hidden" agit sur la mise en page, il crée un espace à droite du svg..

J'imagine que je dois le styler par CSS mais comment ?

Si display none je suppose que le mal-voyant n'entendra rien.
Si visibility hidden le span continuera à agir sur la mise en page.

Bonjour,

Et en ce qui concerne le <svg>, de toute façon, on ne peut pas lui mettre d'attribut "alt". À la place, quand on veut le rendre accessible, on ajoute une balise <title> à l'intérieur du <svg> (cela doit être la première balise à l'intérieur du <svg>) et on complète éventuellement par une balise <desc> qui peut contenir une description longue du contenu du <svg>. Ça marche plus ou moins bien selon les lecteurs d'écran et les navigateurs.

Ceci étant, ici, Raphael a tout à fait raison de dire que ce n'est pas le <svg> qu'on doit rendre accessible, mais le <button>. Et pour faire cela, si tu ne veux pas du <span>, tu peux à la place mettre un attribut "title" au bouton.

On obtient alors :

<button title="Nom accessible">
  <svg aria-hidden="true">
    <!-- contenu du SVG -->
  </svg>
</button>

Il semble que les lecteurs d'écran le prennent en compte (en tout cas, VoiceOver sur MacOS le fait très bien). Mais bon, c'est une technique moins sûr semble-t-il que le <span> bien que plus propre en théorie.

En ce qui me concerne, j'utilise cet attribut "title" plutôt que le <span>, et je mets sur le <svg> un aria-hidden="true" et un role="presentation" (on a moins de surprise en mettant la ceinture et les bretelles dans ce cas). Et j'attends patiemment que cet attribut soit traité comme il le devrait partout.

Amicalement,

boteha_2 a écrit :

Le span class="visually-hidden" agit sur la mise en page, il crée un espace à droite du svg..

J'imagine que je dois le styler par CSS mais comment ?

Si display none je suppose que le mal-voyant n'entendra rien.
Si visibility hidden le span continuera à agir sur la mise en page.

Très bonne remarque, j'ai oublié de te donner le code associé :
https://github.com/alsacreations/bretzel/blob/main/public/bretzel-reset.css#L222