Messages d'erreur des formulaires non explicites
- 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.
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."
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"
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"
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."
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."
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."
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."
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."
Page "Réinitialiser votre mot de passe"
- [x] Message champ "Adresse e-mail" : "Champ obligatoire. Saisissez votre adresse e-mail."
🔮 Pensez à lancer et/ou mettre à jour les tests end to end si nécessaire.
C'est la dernière non-conformité à corriger 🎉
@AdrienMuzyczka Le champs technologies sur la déclaration devient bien obligatoire ?
EDIT : pareil pour les outils d'assistance et les environnements de test ?
@hissalht oui, tous ces champs sont obligatoires !
@AdrienMuzyczka Y'a deux versions de la section des infos de contact sur le figma, une avec un "Ou", une sans. On garde laquelle ?
EDIT : garder le "Ou"