Débordement du contenu des éléments `pre` sur les écrans de faible largeur

[inseo]

Description du bug

La valeur par défaut de la propriété white-space sur les éléments pre entraîne un débordement du contenu sur les faibles largeurs d'écran lorsque ceux-ci contiennent une chaîne de caractère trop longue.

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/faq/usager/comment-trouver-ma-demarche ;
2. Réduire la taille de fenêtre à 320px ;
3. Constater que le contenu de l'url https://www.demarches-simplifiees.fr/commencer/xxxxxxxxxxxxxx déborde de la fenêtre.

Comportement attendu

Modifier la valeur de la propriété white-space (en normal par exemple) pour permettre le retour à la ligne au sein de la balise. 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 Corinne,

Merci pour ce rapport. En l'occurrence, il s'agit d'un problème d'implémentation qui n'est pas lié au dsfr, la balise pre correspond justement à whitespace: pre, la modifier pourrait produire des effets de bord sur tout ceux qui en font usage dans ce sens. La correction est très certainement à apporter par les équipes développant démarches simplifiées, nous allons voir à faire circuler l'information.

Merci Bertrand, pour l'équipe DSFR