[Sidemenu] en zoom 200% les label ne sont pas tronqués

[Nvk38]

Décrire le bug

En zoom 200%, les label des items du sidemenu ne sont pas tronqués.

Les étapes pour reproduire le bug

Exemple :

1. Aller à https://main--ds-gouv.netlify.app/example/component/sidemenu/
2. Choisir un item du sidemenu et rajouter des caractères pour avoir un label long.
3. Zoom navigateur à 200%
4. Le problème apparaît

Comportement attendu

Le contenu du label devrait soit être tronqué, soit revenir à la ligne.

Capture d’écran

Configuration et système utilisé

• Desktop
• Windows
• Chrome Version 130.0.6723.58

[keryanS]

Bonjour,

Merci pour le retour. C'est un sujet délicat. La propriété overflow-wrap: break-word est normalement appliquée par défaut sur tous les éléments. Le problème est que cette propriété ne fonctionne pas dans une flexbox. Or, le button est en display flex.

Il faudrait alors utiliser la propriété overflow-wrap: anywhere qui, elle, fonctionne en flex. Et dans ce cas, à décliner sur tous les éléments flex du dsfr ?

Il existe aussi la propriété hyphens, mais celle-ci comporte des subtilités qui pourraient être plus contraignantes qu'utiles. https://github.com/alphagov/govuk-frontend/pull/2366 Sauf à l'utiliser en mode manuel, ce qui permettrait une gestion fine du passage à la ligne, mais très contraignant pour les contributeurs et ne serait donc jamais mis en place.

Enfin, tronquer le libellé avec un overflow hidden ne serait, je pense, pas correcte en terme d'accessibilité.

A noté qu'avec le mot le plus long de la langue française, le libellé dépasse du conteneur, mais ne chevauche pas le texte de droite. Mais le problème pourrait avoir lieu dans d'autres langues, et en mobile le libellé est tronqué à 200%.

J'ouvre donc le débat dans ce ticket, preneur de vos réflexions. Keryan, pour l'équipe DSFR