Ara icon indicating copy to clipboard operation
Ara copied to clipboard

Messages d'erreur des formulaires non explicites

Open benoitdequick opened this issue 9 months ago • 1 comments

  • Relevé par : SM
  • Le : 5/3

Description du problème

  • Les messages d'erreur des champs en erreur (paramètres de l'audit, création de compte, etc.) sont les messages par défaut du navigateur. Ils disparaissent et ne sont donc pas visibles pour tout le monde.

Correction à apporter

  • Mettre en place les messages d'erreur DSFR placés sous chaque champs avec un message pertinent. Ex : "L'adresse électronique n’est pas valide. Elle doit être au format [email protected]"

🔮 Pensez à lancer et/ou mettre à jour les tests end-to-end si nécessaire avant passage en prod.

benoitdequick avatar Mar 13 '25 16:03 benoitdequick

Validé suite à : revue de design
Le : 02/05/2025

Solution validée

Règles :

  • À la soumission du formulaire, afficher un message d’erreur sous chaque champ ou élément obligatoire non complété.
  • Si plusieurs erreurs sont présentes, donner le focus au premier élément concerné dans la page (le plus haut).

Page "Connexion à Ara"

Appliquer l'état "Erreur" du DSFR sur les champs de saisie :

  • [x] Message champ "Adresse e-mail" : "Champ obligatoire. Saisissez votre adresse e-mail."
  • [x] Message champ "Mot de passe" : "Champ obligatoire. Saisissez votre mot de passe."

Maquette

Page "Créer votre compte Ara"

Appliquer l'état "Erreur" du DSFR sur les champs de saisie :

  • [x] Message champ "Adresse e-mail" : "Champ obligatoire. Saisissez votre adresse e-mail."
  • [x] Message champ "Mot de passe" : "Champ obligatoire. Saisissez un mot de passe."

Autre

  • [x] Passer en pleine largeur le bouton "Valider"

Maquette

Page "Démarrer un audit"

Appliquer l'état "Erreur" du DSFR sur les champs de saisie :

  • [x] Message champ "Nom du site ou du service à auditer" : "Champ obligatoire. Saisissez le nom du site ou du service à auditer."
  • [x] Message champ "Nom de la page" : "Champ obligatoire. Saisissez le nom de la page."
  • [x] Message champ "URL de la page" : "Champ obligatoire. Saisissez l’URL de la page."
  • [x] Message champ "Adresse e-mail" : "Champ obligatoire. Saisissez votre adresse e-mail."

Appliquer un style personnalisé sur l'ensemble des éléments à sélectionner (cf maquette) :

  • [x] Message sous les boutons radio "Audit" : "Sélectionnez un type d’audit."

Maquettes :

Page "Paramètres de l'audit"

Idem que pour la page "Démarrer un audit"

Maquette

Page "Déclaration d'accessibilité" (génération)

Appliquer l'état "Erreur" du DSFR sur les champs de saisie :

  • [x] Message champ "Entité qui a demandé l’audit" : "Champ obligatoire. Saisissez l’entité ayant demandé l’audit."
  • [x] Message champ "Entité qui a réalisé l’audit" : "Champ obligatoire. Saisissez l’entité ayant réalisé l’audit."
  • [x] Message champ "URL de la page d’accueil du site audité" : "Champ obligatoire. Saisissez l’URL de la page d’accueil du site audité."

Appliquer un style personnalisé sur l'ensemble des éléments à sélectionner (cf maquette) :

  • [x] Message ensemble champs "Adresse e-mail" et "Formulaire de contact en ligne" : "Champ obligatoire. Saisissez au moins un des deux moyens de contact."
  • [x] Ajout de tags "Ajouter des technologies" : "Indiquez les technologies utilisées sur le site."
  • [x] Cases à cocher + ajout de tags "Outils d'assistance utilisés pour vérifier l'accessibilité" : "Indiquez les outils d’assistance utilisés pour vérifier l’accessibilité."
  • [x] Cases à cocher + ajout de tags "Les environnements de tests" : "Indiquez les environnements de test."
  • Champs de saisie contenu dans un bloc "Environnement de test personnalisé"
    • [x] Message "Appareil" : "Champ obligatoire. Saisissez l’appareil."
    • [x] Message "Logiciel d’exploitation" : "Champ obligatoire. Saisissez le logiciel d’exploitation."
    • [x] Message "Technologie d’assistance" : "Champ obligatoire. Saisissez la technologie d’assistance."
    • [x] Message "Navigateur" : "Champ obligatoire. Saisissez le navigateur."

Maquette

Page "Mon compte"

Appliquer l'état "Erreur" du DSFR sur les champs de saisie :

Section "Adresse e-mail"

  • [x] Message champ "Mot de passe" : "Champ obligatoire. Saisissez votre mot de passe."
  • [x] Message champ "Nouvelle adresse e-mail" : "Champ obligatoire. Saisissez votre nouvelle adresse e-mail."

Maquette

Section "Mot de passe"

  • [x] Message champ "Mot de passe" : "Champ obligatoire. Saisissez votre mot de passe."
  • [x] Message champ "Nouveau mot de passe" : "Champ obligatoire. Saisissez votre nouveau mot de passe. Il doit contenir 12 caractères minimum."

Maquette

Section "Compte"

  • [x] Message champ "Pour confirmer la suppression de votre compte veuillez saisir : je confirme vouloir supprimer mon compte" : "Champ obligatoire. Saisissez la phrase “je confirme vouloir supprimer mon compte”."
  • [x] Message champ "Mot de passe" : "Champ obligatoire. Saisissez votre mot de passe."

Maquette

Page "Changer de mot de passe"

  • [x] Message champ "Nouveau mot de passe" : "Champ obligatoire. Saisissez votre nouveau mot de passe. Il doit contenir 12 caractères minimum."

Maquette

Page "Réinitialiser votre mot de passe"

  • [x] Message champ "Adresse e-mail" : "Champ obligatoire. Saisissez votre adresse e-mail."

Maquette


🔮 Pensez à lancer et/ou mettre à jour les tests end to end si nécessaire.

AdrienMuzyczka avatar Apr 04 '25 17:04 AdrienMuzyczka

C'est la dernière non-conformité à corriger 🎉

benoitdequick avatar Jun 23 '25 09:06 benoitdequick

Image

@AdrienMuzyczka Le champs technologies sur la déclaration devient bien obligatoire ?

EDIT : pareil pour les outils d'assistance et les environnements de test ?

hissalht avatar Sep 23 '25 18:09 hissalht

@hissalht oui, tous ces champs sont obligatoires !

benoitdequick avatar Sep 24 '25 07:09 benoitdequick

@AdrienMuzyczka Y'a deux versions de la section des infos de contact sur le figma, une avec un "Ou", une sans. On garde laquelle ?

Image

EDIT : garder le "Ou"

hissalht avatar Sep 24 '25 08:09 hissalht