Gestionnaire de consentement (Consent)

Utilisez le gestionnaire de consentement pour présenter les finalités de cookies et recueillir les choix.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:consent, dsfr:consent:placeholder

Usage

• Les boutons accepter, refuser et confirmer sont rendus par le composant.
• Branchez votre persistance de consentement côté application.

Modes d'utilisation

Exemple principal

Gestionnaire de consentement · exemple principal

<twig:dsfr:consent
  id="privacy-consent"
  title="Gestion des cookies"
  :services="[
    {label: 'Mesure d’audience', description: 'Statistiques anonymisées', checked: false},
    {label: 'Sécurité', description: 'Protection du service', checked: true}
  ]"
/>

<twig:dsfr:consent:placeholder
  title="Vidéo désactivée"
  body="Autorisez les cookies de mesure d’audience pour afficher ce contenu."
  buttonLabel="Autoriser et afficher"
/>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:consent:placeholder. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Données

La prop services accepte un tableau PHP/Twig. En Twig, préfixez la prop par : pour transmettre une vraie structure de données.

Syntaxe typée Twig Component

{# Le préfixe : garde le type tableau/booléen/numérique. #}
<twig:dsfr:consent :services="services" />

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:consent
  id="gestionnaire-de-consentement-example"
  class="fr-mt-2w"
  data-controller="gestionnaire-de-consentement"
/>

API publique

Composant	Rôle
dsfr:consent	Composant principal de cette page.
dsfr:consent:placeholder	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
id	string	Selon composant	Identifiant HTML, normalisé et utilisé par aria-controls quand nécessaire.
title	string	Requis ou défaut selon composant	Titre visible du composant.
description	string	Défaut cookies	Texte du bandeau.
modalTitle	string	Panneau de gestion des cookies	Titre de la modale.
privacyHref	string	#	Lien vers la page données personnelles/cookies.
services	array|string	[]	Finalités { label, description?, checked? }.
dsfr:consent:placeholder	props	title, body, buttonLabel	Placeholder quand un contenu tiers attend le consentement.

Guide d'intégration

Question	Réponse
Famille DSFR	Mise en page
Quand l'utiliser	Quand vous composez une page, une zone transverse ou un bloc structurel réutilisable.
Quand éviter	Pour corriger un espacement local : utilisez d’abord les props et classes utilitaires DSFR prévues.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:consent, dsfr:consent:placeholder.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Gestionnaire de consentement : composition Twig et données services

Variantes de gestionnaire de consentement

• gestionnaire de consentement avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Les boutons accepter, refuser et confirmer sont rendus par le composant.
• Branchez votre persistance de consentement côté application.
• Vérifiez un cas vide, un cas avec plusieurs entrées et un cas avec données dynamiques pour services.
• Testez la composition avec dsfr:consent:placeholder sans copier les templates internes.

Accessibilité mise en page

• Le composant ne remplace pas les landmarks de votre page : gardez main, nav, aside, section côté application.
• Les zones transverses doivent rester identifiables et cohérentes entre les pages.
• Vérifiez les ruptures responsive sur mobile, tablette et desktop.

Intégration Symfony/Twig pour dsfr:consent

• Passez services avec la syntaxe : pour conserver le type tableau : :services="services".
• Composez avec les sous-composants publics dsfr:consent:placeholder quand le rendu doit être plus précis que les props.
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:consent quand ils concernent son nœud racine.
• Gardez des id prévisibles pour dsfr:consent, surtout dans les listes ou formulaires répétés.

Checklist de recette

• rendu mobile sans débordement
• landmarks présents dans la page
• comportement thème clair/sombre si concerné
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les données services ne sont pas prises en compte	Ajoutez : devant la prop Twig : :services.
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Un panneau, menu ou état actif ne fonctionne pas	Vérifiez que le JavaScript DSFR est chargé et que les identifiants HTML sont uniques.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.