Débordement du contenu dû à la valeur des champs de soumission sur les écrans de faible largeur

[inseo]

Description du bug

La valeur par défaut de la propriété white-space sur les champs <input type="submit" /> entraîne un débordement du contenu sur les faibles largeurs d'écran lorsque l'intitulé du champ est trop long.

Il en résulte une non conformité au critère 10.11 du fait du test 10.11.1 du RGAA qui demande à ce que les informations et les fonctionnalités restent disponibles sans aucun défilement horizontal sur les fenêtres d’affichage d'une largeur de 320 px.

Les étapes de reproduction

1. Aller à sur https://www.demarches-simplifiees.fr/users/password/new ;
2. Réduire la taille de fenêtre à 320px ;
3. Constater que le contenu est rogné du fait du comportement du bouton.

Comportement attendu

Modifier le style du bouton (en lui affectant la déclaration white-space: normal; par exemple) pour permettre le retour à la ligne de son intitulé. Pour obtenir le rendu suivant :

Configuration et système utilisé

• Version du DSFR : DSFR v1.11.2
• Appareil : Ordinateur de bureau
• Système d’exploitation : macOS 14.5
• Navigateur et version :
  • Firefox 129
  • Safari 17.5
  • Chrome 120

[lab9fr]

Bonjour Corrine,

Merci pour ce rapport.

La solution à ce problème est de changer le libellé du bouton comme recommandé dans la documentation

l'intitulé 'demander un nouveau mot de passe' devrait plutôt être un titre et le nom du bouton simplement 'envoyer' ou 'soumettre'

Merci Bertrand, pour l'équipe DSFR

[inseo]

Bonjour,

L'intitulé 'envoyer' ou 'soumettre' ne permet pas de valider le test 11.9.1 du RGAA.

Et j'ai du mal à comprendre pourquoi il faudrait :

• soit utiliser un intitulé visible insuffisamment précis doublé d'un attribut aria-label ;
• soit transformer la balise <input type="submit"> en <button type="submit"> ;
• soit appliquer un patch pour surcharger les styles natifs…

alors que le correctif proposé est fonctionnel et qu'il ne présente aucun effet de bord. 🤔