Development #75382
Formulaires: amélioration design des widgets en erreur
0%
Description
Étape pour la validation des champs à la volée.
Améliorer le design des champs en erreur.
Basé sur ce qui est proposé dans le design system gouv.fr: https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217088099/Champs+de+saisie+-+Input#%5BhardBreak%5D%C3%89tats-erreur-et-succ%C3%A8s
Files
Related issues
History
Updated by Robot Gitea 6 months ago
- Status changed from Nouveau to En cours
Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202
- Titre : WIP: css: improve styles of form field on error (#75382)
- Modifications : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202/files
Updated by Thomas Jund 6 months ago
Partage du même style entre `$form-style; classic & light`;
Modification du rouge de color-error pour avoir un bon contraste en a11y.
Il y a une 30aine de thèmes qui personnalisent les widgets en erreur à checker.
Image d'un input en erreur avec le thème de Marseille.
Updated by Thomas Jund 6 months ago
- Related to Development #70037: Aide à la saisie des usagers (validation des champs à la volée) added
Updated by Anaïs Ecuvillon 6 months ago
Dans #70037#note-15, on indiquait modifier l'ordre d'affichage des éléments, pour avoir libellé/remarque/champ/erreur, pour éviter le décalage du champ lors de la saisie, ça me semble être un pré-requis pour mieux me rendre compte du rendu.
Et du coup, je me demande si ça ne rend pas mieux avec la remarque dans sa couleur initiale (et non en rouge).
Pour info, le système de desgin de l'état que tu pointes est obsolète, voici l'url qui t'intéresse : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie
ça gagnerait à ce que l'espacement entre le champ et le message d'erreur soit + important. (Pas autant que celui du design d'Etat, mais plus que sur ta capture d'écran).
Updated by Thomas Jund 6 months ago
- File field-on-error-allred-only-hint.png field-on-error-allred-only-hint.png added
- File field-on-error-mutiples-red.png field-on-error-mutiples-red.png added
2 variantes :
- Version où le texte de commentaire reste en $font-color;
- Version où je mixe $font-color et $error-color pour créer des variantes
J'ai encore un peu assombri le rouge par défaut de $error-color pour garantir qu'il ai un contraste suffisant si on pose un #eee en $body-background
Avis bienvenus
Updated by Frédéric Péters 6 months ago
Perso ça fait très bizarre j'ai cru que le "Expression rationnelle ..." était une erreur pour le champ code postal avec un problème de marge. Peut-être que si la remarque avait été en rouge ça l'aurait moins fait. Dans la seconde, moins, mais ça peut venir en partie du fait que je sache désormais quoi regarder.
Updated by Thomas Jund 6 months ago
Peut-être que si la remarque avait été en rouge ça l'aurait moins fait
Laisser la remarque en $font-color était une proposition d'Anaïs, et je suis ok avec ta remarque, ça "coupe" la relation entre le label et l'input.
Du coup, je pense que d'indiquer l'input en erreur à travers une bordure left plutôt que bottom serait pertinent :
- lier graphiquement le label et le message d'erreur avec un liseré rouge vertical
- pouvoir élargir la bordure rouge à 3px par défaut sans provoquer un décalage vertical du layout (parce que le widget ne s'agrandit pas)
(et on reste sur une bordure bottom pour le style light)
Updated by Thomas Jund 6 months ago
Petit changement d'icon.
Après avoir passé en revue les différentes customisations existantes, il s'avère qu'une majorité reprend l'icon "point d'exclamation" de .pk-error, ce que je trouve tout à fait logique et cohérent.
Updated by Anaïs Ecuvillon 6 months ago
ok pour moi pour le point d'exclamation, idem pour la bordure à gauche plutôt qu'en bas. C'est même très bien.
Je ne sais plus si je l'ai déjà dit, mais le libellé du champ et la remarque en rouge, je trouve ça trop de rouge (je ne sais plus si ça fait partie du RGAA), le message d'erreur et la bordure rouge me semble suffisant.
Et dans tous les cas, si ça doit rester rouge, alors la remarque devrait utiliser le même rouge que le libellé et le message d'erreur et pas une couleur supplémentaire.
Updated by Thomas Jund 5 months ago
alors la remarque devrait utiliser le même rouge que le libellé et le message d'erreur et pas une couleur supplémentaire.
Je trouvais ça trop plat graphiquement, qu'on perd au niveau de la hiérarchie de l'information.
J'ai aussi fait ce choix en rapport avec les listes radios, si tout est dans le même rouge c'est pas terrible.
Après il faudrait vraiment que tu puisses te rendre compte sur un cas réel, j'ai isolé le code de ce design "par défaut", permettant de le faire évoluer et le modifier sans impacter les thèmes qui ont déjà posé des personnalisations.
Aucun problème pour moi de me ranger à ton avis, mais pour éviter les "mauvais choix" parce que captures d'écran, est-ce qu'il ne serait pas envisageable de discuter de cela et faire des ajustements une fois le patch en test ?
Updated by Anaïs Ecuvillon 5 months ago
- tout en rouge (le même rouge)
- tout en rouge (la remarque avec un autre rouge)
- le libellé et la remarque dans la couleur initiale
Updated by Thomas Jund 5 months ago
- File anais-uniquement-erreur-et-champ-rouge.png anais-uniquement-erreur-et-champ-rouge.png added
- File anais-tout-meme-rouge.png anais-tout-meme-rouge.png added
- File proposition-thomas.png proposition-thomas.png added
Les 3 captures d'écran demandées par Anaïs.
J'ai pris des captures des pages entières, avec uniquement 2 champs en erreur (la majorité du temps, avec la validation à la volée, il n'y aura qu'un champ à la fois en erreur) : un input et la liste radio, parce que les boutons radios ne prennent pas de couleur particulière lorsqu'ils sont en erreur.
- Ma proposition, avec label et commentaire en rouge mais des rouges différents, générés automatiquement en fonction de la couleur "erreur" choisie.
- Demande d'anais 1 : idem que précédemment, mais avec le même rouge pour tous les éléments
- Demande d'Anais 2 : uniquement le champ et le message d'erreur en rouge, les labels et les commentaires ne bougent pas (dans le cas de la liste radio, seul le message d'erreur sera rouge)
Les captures ont été prisent avec le thème Marseille. Veuillez noter qu'en fonction du thème, le rendu et les contrastes seront différents.
J'aimerais qu'on évite de multiplier les tests et captures et qu'on choisisse parmis les 3 options proposées.
Updated by Benjamin Dauvergne 5 months ago
N'hésitez pas à me dire si je suis à l'ouest, mais n'a-t-on pas dit que les messages d'erreur devaient maintenant se positionner entre le libellé et le/les champ/s ? ou alors c'est uniquement les remarques, oubliez.
PS: pour participer utilement; je préfère le 1, les deux autres, trop de rouge inutile, on ne sait plus où sont les alertes/erreurs.
Updated by Olivier Renard 5 months ago
le 1 est minimaliste et fonctionne.
le 2 est trop rouge, et noie l'erreur entre le libellé la remarque, l'erreur (donc pas à retenir).
le 3 est subtile et fonctionne avec la déclinaison de rouge.
Donc en premier choix 3 (proposition de Thomas) ou en second choix 1 (uniquement erreur et champ rouge)
Updated by Pierre Cros 5 months ago
Plutôt pour la proposition de Thomas parce qu'elle permet aussi d'obtenir Anaïs 1 ou Anaïs 2 si on choisit dûment la couleur d'erreur.
Updated by Benjamin Dauvergne 5 months ago
Aussi je trouve la bordure rouge à gauche trop "subtile" je préfère le choix du système de design de l'état d'une bordure rouge en dessous (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie/) et je trouve qu'il n'y a toujours pas assez d'espace entre les champs, idem ça rend mieux dans le SDD, l'espace supplémentaire entre les champs rend plus agréable le lien entre l'erreur et le champ.
Updated by Brice Mallet 5 months ago
Préférence pour la version la plus simple : anais-uniquement-erreur-et-champ-rouge.png
Updated by Frédéric Péters 5 months ago
Pour le moment le code correspond à la "version de Thomas" et comme il y avait de l'assentiment dessus c'est celui-là que j'ai actualisé et il n'est pas là pour faire autre chose, donc en tout cas pour ce vendredi ce qui va se trouver déployé et en capture dans les notes de mise à jour ça sera ça. Libre ensuite d'hurler lundi pour que Thomas rapidement propose le code pour autre chose.
Updated by Robot Gitea 5 months ago
- Status changed from Solution proposée to Solution validée
Frédéric Péters (fpeters) a approuvé une pull request sur Gitea concernant cette demande :
Updated by Robot Gitea 5 months ago
- Status changed from Solution validée to Résolu (à déployer)
Frédéric Péters (fpeters) a mergé une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202
- Titre : css: improve styles of form field on error (#75382)
- Modifications : https://git.entrouvert.org/entrouvert/publik-base-theme/pulls/202/files
Updated by Transition automatique 5 months ago
- Status changed from Résolu (à déployer) to Solution déployée
Updated by Anaïs Ecuvillon 5 months ago
et après test en condition réel, ce qui est déployé en recette fonctionne très bien. Belle fonctionnalité ! Merci Thomas.