Dépannage

Commencez par identifier la couche concernée : Twig Component, props, assets DSFR, JavaScript DSFR, licence Pro ou contenu accessible.

Diagnostic en deux minutes

Commencez par debug:dsfr-components, le panneau Symfony Profiler, puis une vérification des assets DSFR dans l'inspecteur réseau. Ces trois points isolent la plupart des erreurs.

Diagnostic rapide

Symptôme	Couche probable	Action
composant non reconnu	Symfony/Twig Component	vérifier bundle, cache et symfony/ux-twig-component
composant sans style	assets DSFR	vérifier CSS, utility, fonts et icons
menu ou modale bloqué	JavaScript DSFR	vérifier scripts module/nomodule et aria-controls
option ignorée	syntaxe Twig	utiliser : pour les tableaux et vrais booléens
composant flouté	licence Pro	valider la licence et le domaine
erreur accessibilité DSFR	contenu/ARIA	ajouter titre, label, caption, legend ou relation aria-*

Le composant ne rend pas le bon élément HTML

Vérifiez les props passées au composant. Par exemple, dsfr:button rend :

• <button type="button"> sans href ;
• <a class="fr-btn"> avec href.

<twig:dsfr:button label="Lien" href="/tableau-de-bord" />

Une icône ne s'affiche pas

Utilisez une classe d'icône DSFR existante, par exemple :

<twig:dsfr:button label="Ajouter" icon="fr-icon-add-line" />

Les icônes inexistantes peuvent produire un carré vide selon la police chargée.

Vérifiez aussi que le dossier icons DSFR est bien publié et que les fichiers de police sont accessibles depuis le CSS.

Un groupe de boutons affiche seulement les icônes

Dans un dsfr:button:group, ajoutez iconPlace :

<twig:dsfr:button:group inline iconPlace="left">
  <twig:dsfr:button label="Ajouter" icon="fr-icon-add-line" />
</twig:dsfr:button:group>

Un tableau échoue avec une prop invalide

Les tableaux doivent recevoir des arrays ou du JSON valide :

<twig:dsfr:table
  id="users"
  caption="Utilisateurs"
  :headers="['Nom', 'Email']"
  :rows="[['Alice', 'alice@example.fr']]"
/>

rows="4" n'est pas valide : utilisez un tableau ou une chaîne JSON représentant un tableau.

Le bandeau de licence Pro revient

Le bandeau est masqué pendant 1 heure dans le navigateur quand l'utilisateur clique sur le bouton de fermeture. Pour le revoir immédiatement, videz le localStorage du site.

Le JavaScript DSFR signale une modale sans nom accessible

Une modale doit avoir un titre relié à la structure DSFR. Utilisez la prop title ou le sous-composant dsfr:modal:title :

<twig:dsfr:modal id="confirm-modal">
  <twig:dsfr:modal:content>
    <twig:dsfr:modal:title modalId="confirm-modal">Confirmer l'action</twig:dsfr:modal:title>
    <p>Cette action est définitive.</p>
  </twig:dsfr:modal:content>
</twig:dsfr:modal>

Commandes utiles

php bin/console debug:dsfr-components
php bin/console dsfr:license:validate
php bin/console debug:config dsfr
make ci