meilleure gestion/affichage des erreurs

[mfo]

Lors de notre dernier point tech j'ai proposé un POC / visuel pour améliorer l'affichage/correction des erreurs pour les usagers.

problème

actuellement, on peut se prendre un pavé listant toutes les erreurs.... donc c'est moche et pas dsfr compliant

solution

on arrete de mettre un pavé et proposons qqch de succint

plus en bonus, on fait que cette petite alerte qui pointe vers la 1ere erreur a corriger :

1. soit sticky au top
2. se mette a jour (merci l'autosave/turbo) lorsqu'on corrige une erreur

l'idée est donc d'avoir ce composant d'erreur qui se rafraichisse au fil des corrections et 🎉

wdytof ?

PS: <lol>vision 2025, on remplace l'icon d'erreur du DSFR par clippy de windows et BAM on est dans le monde de l'IA et des assistants inteligents !</lol>

[colinux]

Yo ! Merci pour cette propal ça permet d'en discuter concrètement :)

Alors la proposition visuelle me convient bien, mais avec une remarque de taille malgré tout : conserver la liste des champs en erreur me paraît important et pratique surtout s'il n'y en a peu (il me semble que c'est aussi un critère du RGAA, mais à vérifier sur ce qu'il requiert exactement). En revanche si on garde une liste, elle peut être mise en forme de manière plus sympa et allégée, simplement avec une liste à puces avec le nom des champs, et un niveau de détail synthétique

Ça pourrait donner :

Votre dossier contient 3 champs en erreurs. [Corrigez-les](#premiere-erreur) pour poursuivre : 
  - [Nom](#nom) (obligatoire)
  - [Prénom](#prenom) (obligatoire)
  - [Téléphone](#telephone) (format incorrect)

Pour éviter les pavés quand y a trop d'erreurs on peut aussi n'afficher que les 5 premières erreurs et en 6ème ligne "- … et 17 autres erreurs, vous faites exprès ou bien ?"

Sur le côté sticky, il faudra peut-être une alternative sur mobile pour pas que ça recouvre tout l'écran. Par exemple sous chaque champ corrigé un lien "Enregistré ! Aller corriger l'erreur suivante", ou bien "Tout est corrigé, vous pouvez déposer le dossier".

NB: la reco du dsfr c'est un style directif à la place de "veuillez"

[mfo]

Tx pour tes retours :

Ce que dit le DSFR (https://www.systeme-de-design.gouv.fr/elements-d-interface/blocs-fonctionnels/formulaires) :

Afficher les erreurs champ par champ (in line validation).

Des alertes globales au dessus du formulaire peuvent être complétées d’un message transverse qui résume les erreurs rencontrée en intégrant le bloc alerte “erreur” en haut du formulaire. Des liens avec ancres vers chaque erreur peuvent être associé au détail dans le cas de formulaire assez long.

Ce que j'ai trouvé coté rg2a (https://www.w3.org/WAI/WCAG21/Understanding/status-messages)

After a user enters incorrect text in an input called Postal Code, a message appears above the input reading "Invalid entry". The screen reader announces, "Invalid entry" or "Postal code, invalid entry". J'ai l'impression que c'est l'implem du DSFR que d'accoller les messages d'erreurs a proximité des champs (avec la nuance que le msg d'erreur va en dessous)

After a user unsuccessfully fills in a form because some of the data is in the incorrect format, text is added to the existing form which reads "5 errors on page". The screen reader announces the same message. J'ai l'impression que ça se rapproche bien du DSFR.

Aussi suite à un échange avec @tchak, ta propale semble etre top pour une v0.

Donc je pars sur

Votre dossier contient 3 champs en erreurs. [Corrigez-les](#premiere-erreur) pour poursuivre : 
  - [Nom](#nom) (obligatoire)
  - [Prénom](#prenom) (obligatoire)
  - [Téléphone](#telephone) (format incorrect)

Une prochaine itération sera l'occasion de se requestionner sur le sticky / cas mobile etc...