Intégration du rendu des labels dans l'API de rendu des formulaires

dsfr/forms.py

@@ -5,6 +5,8 @@
 from django import forms
 from django.forms.renderers import DjangoTemplates, get_default_renderer
 from django.utils.functional import cached_property
+from django.utils.safestring import mark_safe
+from django.utils.translation import gettext_lazy as _
 
 from dsfr.utils import dsfr_input_class_attr
 
@@ -35,6 +37,14 @@ class DsfrBoundField(forms.BoundField):
         def as_field_group(self):
             return self.render()
 
+    @property
+    def template_name_help_text(self):
+        return next(
+            template
+            for it in (self.field.widget, self.field, self.form)
+            if (template := getattr(it, "template_name_help_text", None))
+        )
+
     @property
     def template_name(self):
         template_name = self.field.template_name or getattr(
@@ -59,18 +69,85 @@ def template_name(self):
             case _:
                 return "dsfr/form_field_snippets/input_snippet.html"
 
+    @property
+    def label(self):
+        from django.conf import settings
+
+        try:
+            mark_optional_fields = settings.DSFR_MARK_OPTIONAL_FIELDS
+        except AttributeError:
+            mark_optional_fields = False
+
+        if not mark_optional_fields:
+            warnings.warn(
+                """Marking required form fields is not recommended by DSFR anymore
+                (https://www.systeme-de-design.gouv.fr/version-courante/fr/modeles/blocs-fonctionnels/formulaires#champ-obligatoire)
+                so the next major version of django-dsfr will stop doing so,
+                and mark optional fields instead.
+                To get the future behavior, you can set the transitional Django setting DSFR_MARK_OPTIONAL_FIELDS to True,
+                or you can override the DSFR_MARK_OPTIONAL_FIELDS context variable of single forms,
+                by overriding YourFormClass.get_context()""",
+                DeprecationWarning,
+            )
+
+        marker = ""
+        if self.field.required and not mark_optional_fields:
+            marker = '<span class="fr-required-marker" aria-hidden="true"> *</span>'
+        elif not self.field.required and mark_optional_fields:
+            marker = f" {_('(Optional)')}"
+
+        return mark_safe(  # nosec B308, B703 — output not generated by user
+            f"{self.__label}{marker}"
+        )
+
+    @label.setter
+    def label(self, value):
+        self.__label = value
+
+    def __init__(self, form, field, name):
+        self.__label = ""
+        super().__init__(form, field, name)
+
     def label_tag(self, contents=None, attrs=None, label_suffix=None, tag=None):
-        if hasattr(self.field.widget, "dsfr_label_attrs"):
-            attrs = {**self.field.widget.dsfr_label_attrs, **(attrs or {})}
+        attrs = attrs or {}
+        widget_attrs = getattr(self.field.widget, "dsfr_label_attrs", {})
+        for k, v in widget_attrs.items():
+            attrs[k] = f"{attrs.get(k, '')} {v}".strip()
+
+        use_legend = self.use_fieldset and tag == "legend"
+
+        attrs.setdefault(
+            "class",
+            (
+                "fr-fieldset__legend fr-fieldset__legend--regular"
+                if use_legend
+                else "fr-label"
+            ),
+        )
+
+        if self.auto_id and use_legend:
+            attrs.setdefault("id", f"{self.auto_id}-legend")
+
         return super().label_tag(contents, attrs, label_suffix, tag)
 
+    def help_text_tag(self, attrs=None):
+        attrs = attrs or {}
+        if self.auto_id and not self.is_hidden:
+            attrs.setdefault("id", f"{self.id_for_label}_helptext")
+        attrs.setdefault("class", "fr-hint-text")
+        return self.form.render(
+            self.template_name_help_text, {"field": self, "attrs": attrs}
+        )
+
 
 class DsfrBaseForm(forms.Form):
     """
     A base form that adds the necessary classes on relevant fields
     """
 
     template_name = "dsfr/form_snippet.html"  # type: ignore
+    template_name_label = "dsfr/forms/label.html"
+    template_name_help_text = "dsfr/forms/help_text.html"
     bound_field_class = DsfrBoundField
 
     @property
@@ -113,34 +190,6 @@ def __getitem__(self, name):
                 self._bound_fields_cache[name] = bound_field_class(self, field, name)
             return self._bound_fields_cache[name]
 
-    def get_context(self) -> dict:
-        from django.conf import settings
-
-        try:
-            mark_optional_fields = settings.DSFR_MARK_OPTIONAL_FIELDS
-            warnings.warn(
-                """Transitional Django setting DSFR_MARK_OPTIONAL_FIELDS will be removed
-            by the next major version of django-dsfr."""
-            )
-        except AttributeError:
-            mark_optional_fields = False
-
-        if not mark_optional_fields:
-            warnings.warn(
-                """Marking required form fields is not recommended by DSFR anymore
-                (https://www.systeme-de-design.gouv.fr/version-courante/fr/modeles/blocs-fonctionnels/formulaires#champ-obligatoire)
-                so the next major version of django-dsfr will stop doing so,
-                and mark optional fields instead.
-                To get the future behavior, you can set the transitional Django setting DSFR_MARK_OPTIONAL_FIELDS to True,
-                or you can override the DSFR_MARK_OPTIONAL_FIELDS context variable of single forms,
-                by overriding YourFormClass.get_context()""",
-                DeprecationWarning,
-            )
-
-        context = super().get_context()
-        context.setdefault("DSFR_MARK_OPTIONAL_FIELDS", mark_optional_fields)
-        return context  # type: ignore
-
     def set_autofocus_on_first_error(self):
         """
         Sets the autofocus on the first field with an error message.

dsfr/templates/dsfr/form_field_snippets/checkbox_snippet.html

@@ -1,14 +1,7 @@
 {% load i18n widget_tweaks dsfr_tags %}
 <div class="fr-checkbox-group{% if field.errors %} fr-checkbox-group--error{% endif %}{% if field.field.disabled %} fr-input-group--disabled{% endif %} fr-mb-2w">
   {{ field|dsfr_input_class_attr|attr:"type:checkbox" }}
-  <label for="{{ field.id_for_label }}" class="fr-label">
-    {# djlint:off #}
-    {{ field.label }}{% dsfr_mark_optionnal_fields field %}
-    {% if field.help_text %}
-      <span class="fr-hint-text" id="{{ field.auto_id }}_helptext">{{ field.help_text|safe }}</span>
-    {% endif %}
-    {# djlint:on #}
-  </label>
+  {{ field.label_tag }}
   {% if field.errors %}
     <div id="{{ field.auto_id }}-desc-error">
       {{ field.errors }}

dsfr/templates/dsfr/form_field_snippets/checkboxselectmultiple_snippet.html

@@ -2,15 +2,7 @@
 <fieldset class="fr-fieldset{% if field.errors %} fr-fieldset--error{% endif %} fr-fieldsets"
           id="checkboxes-{{ field.auto_id }}"
           aria-labelledby="{{ field.auto_id }}-legend{% if field.errors %} {{ field.auto_id }}-messages{% endif %}">
-  <legend class="fr-fieldset__legend fr-fieldset__legend--regular"
-          id="{{ field.auto_id }}-legend">
-    {# djlint:off #}
-    {{ field.label }}{% dsfr_mark_optionnal_fields field %}
-    {% if field.help_text %}
-      <span class="fr-hint-text" id="{{ field.auto_id }}_helptext">{{ field.help_text|safe }}</span>
-    {% endif %}
-    {# djlint:on #}
-  </legend>
+  {{ field.legend_tag }}
   {% with field=field|dsfr_input_class_attr %}
     {% for subwidget in field.subwidgets %}
       <div class="fr-fieldset__element{% if field.field.widget.inline %} fr-fieldset__element--inline{% endif %}">

dsfr/templates/dsfr/form_field_snippets/input_snippet.html

@@ -1,14 +1,7 @@
 {% load i18n dsfr_tags %}
 {# Generic input snippet used by most of the field types #}
 <div class="{{ field.field.widget.group_class|default:'fr-input-group' }}{% if field.errors %} {{ field.field.widget.group_class|default:'fr-input-group' }}--error{% endif %}{% if field.field.disabled %} fr-input-group--disabled{% endif %}">
-  <label for="{{ field.id_for_label }}" class="fr-label">
-    {# djlint:off #}
-    {{ field.label }}{% dsfr_mark_optionnal_fields field %}
-    {% if field.help_text %}
-      <span class="fr-hint-text" id="{{ field.id_for_label }}_helptext">{{ field.help_text|safe }}</span>
-    {% endif %}
-    {# djlint:on #}
-  </label>
+  {{ field.label_tag }}
   {{ field|dsfr_input_class_attr }}
   {% if field.errors %}
     <div id="{{ field.auto_id }}-desc-error">

dsfr/templates/dsfr/form_field_snippets/numbercursor_snippet.html

@@ -1,18 +1,7 @@
 {% load i18n dsfr_tags %}
 
 <div class="fr-range-group {% if field.errors %}fr-range-group--error{% endif %} {% if field.field.disabled %}fr-range-group--disabled{% endif %}">
-  <label for="{{ field.id_for_label }}" class="fr-label">
-    {# djlint:off #}
-    {{ field.label }}{% dsfr_mark_optionnal_fields field %}
-    {% if field.help_text %}
-      <span class="fr-hint-text" id="{{ field.id_for_label }}_helptext">
-        {{ field.help_text|safe }}, valeur
-        comprise entre {{ field.field.min_value|default_if_none:0 }}
-        et {{ field.field.max_value|default_if_none:100 }}.
-      </span>
-    {% endif %}
-    {# djlint:on #}
-  </label>
+  {{ field.label_tag }}
   {{ field|dsfr_input_class_attr }}
   {% if field.errors %}
     <div id="{{ field.auto_id }}-desc-error">

dsfr/templates/dsfr/form_field_snippets/radioselect_snippet.html

@@ -2,15 +2,7 @@
 <fieldset class="fr-fieldset{% if field.errors %} fr-fieldset--error{% endif %}"
           id="radio-{{ field.auto_id }}"
           aria-labelledby="{{ field.auto_id }}-legend{% if field.errors %} {{ field.auto_id }}-desc-error{% endif %}">
-  <legend class="fr-fieldset__legend fr-fieldset__legend--regular"
-          id="{{ field.auto_id }}-legend">
-    {# djlint:off #}
-    {{ field.label }}{% dsfr_mark_optionnal_fields field %}
-    {% if field.help_text %}
-      <span class="fr-hint-text" id="{{ field.auto_id }}_helptext">{{ field.help_text|safe }}</span>
-    {% endif %}
-    {# djlint:on #}
-  </legend>
+  {{ field.legend_tag }}
   {% with field=field|dsfr_input_class_attr %}
     {% for subwidget in field.subwidgets %}
       <div class="fr-fieldset__element{% if field.field.widget.inline %} fr-fieldset__element--inline{% endif %}">

dsfr/templates/dsfr/form_field_snippets/segmented_control_snippet.html

@@ -2,9 +2,7 @@
 
 <div class="fr-input-group">
   <fieldset class="fr-segmented {{ field.field.widget.extra_classes }}">
-    <legend class="fr-segmented__legend {% if field.field.widget.is_inline %}fr-segmented__legend--inline{% endif %}">
-      {{ field.label }}
-    </legend>
+    {{ field.legend_tag }}
     {{ field }}
   </fieldset>
 </div>

dsfr/templates/dsfr/forms/help_text.html

@@ -0,0 +1 @@
+<span {% include "django/forms/attrs.html" %}>{{ field.help_text }}</span>

dsfr/templates/dsfr/forms/label.html

@@ -0,0 +1,3 @@
+{# djlint:off #}
+{% if use_tag %}<{{ tag }}{% include "django/forms/attrs.html" %}>{% include "dsfr/forms/label_content.html" %}</{{ tag }}>{% else %}{% include "dsfr/forms/label_content.html" %}{% endif %}
+{# djlint:on #}

dsfr/templates/dsfr/forms/label_content.html

@@ -0,0 +1,4 @@
+{{ label }}
+{% if field.help_text %}
+  {{ field.help_text_tag }}
+{% endif %}

dsfr/templates/dsfr/forms/number_cursor_help_text.html

@@ -0,0 +1,4 @@
+<span {% include "django/forms/attrs.html" %}>
+  {{ field.help_text }}, valeur comprise entre {{ field.field.min_value|default_if_none:0 }}
+  et {{ field.field.max_value|default_if_none:100 }}.
+</span>

dsfr/templates/dsfr/toggle.html

@@ -1,13 +1,6 @@
 <div class="{{ field.field.widget.dsfr_wrapper_class|default:"" }}{% if field.errors %} fr-toggle--error{% endif %}">
   {{ field }}
-  {% if field.label %}
-    {{ field.label_tag }}
-  {% endif %}
-  {% if field.help_text %}
-    <p class="fr-hint-text" id="{{ field.auto_id }}_helptext">
-      {{ field.help_text }}
-    </p>
-  {% endif %}
+  {{ field.label_tag }}
   {% if field.errors %}
     <div class="fr-messages-group"
          id="{{ field.field.widget.attrs.id }}-messages"

dsfr/templatetags/dsfr_tags.py

@@ -10,8 +10,6 @@
 from django.template import Template
 from django.template.context import Context
 from django.utils.html import format_html, format_html_join
-from django.utils.safestring import mark_safe
-from django.utils.translation import gettext as _
 
 from dsfr.checksums import (
     INTEGRITY_CSS,
@@ -1770,18 +1768,3 @@ def dsfr_form(context: Context):
         """The dsfr_form tag is deprecated since django-dsfr 2.0.0.
         Please use a normal {{ form }} tag.""",
     )
-
-
-# Deprecated tags
-@register.simple_tag
-def dsfr_mark_optionnal_fields(bf):
-    mark_optional_fields = getattr(settings, "DSFR_MARK_OPTIONAL_FIELDS", False)
-    if bf.field.required and not mark_optional_fields:
-
-        return mark_safe(  # nosec B308
-            '<span class="fr-required-marker" aria-hidden="true"> *</span>'
-        )
-    elif not bf.field.required and mark_optional_fields:
-        return f" {_('(Optional)')}"
-
-    return ""

dsfr/test/test_templatetags.py

@@ -1167,6 +1167,8 @@ def test_tag_dismissable_rendered(self):
 
 
 class DsfrToggleTagTest(SimpleTestCase):
+    maxDiff = None
+
     def test_toggle_rendered(self):
         test_data = {
             "label": "Interrupteur complet aligné à gauche",
@@ -1181,9 +1183,10 @@ def test_toggle_rendered(self):
             "{% load dsfr_tags %} {% dsfr_toggle test_data %}"
         )
         rendered_template = template_to_render.render(context)
-        self.assertInHTML(
-            """
-            <div class="fr-toggle fr-toggle--label-left fr-toggle--border-bottom">
+        # language=html
+        self.assertHTMLEqual(
+            rendered_template,
+            """<div class="fr-toggle fr-toggle--label-left fr-toggle--border-bottom">
                 <input type="checkbox"
                         name="toggle"
                         class="fr-toggle__input"
@@ -1194,13 +1197,11 @@ def test_toggle_rendered(self):
                         data-fr-checked-label="Activé"
                         data-fr-unchecked-label="Désactivé">
                     Interrupteur complet aligné à gauche
+                    <span class="fr-hint-text" id="toggle-full_helptext">
+                        Cet interrupteur présente toutes les options disponibles
+                    </span>
                 </label>
-                    <p class="fr-hint-text" id="id_toggle_helptext">
-                    Cet interrupteur présente toutes les options disponibles
-                    </p>
-                </div>
-            """,
-            rendered_template,
+            </div>""",
         )
 
 

dsfr/widgets.py

@@ -173,6 +173,7 @@ class InlineCheckboxSelectMultiple(CheckboxSelectMultiple):
 
 class NumberCursor(NumberInput):
     template_name = "dsfr/widgets/number_cursor.html"
+    template_name_help_text = "dsfr/forms/number_cursor_help_text.html"
     group_class = "fr-range-group"
 
     def __init__(
@@ -215,13 +216,22 @@ def format_value(self, value):
 class SegmentedControl(_ExtendedChoicesWidget, ChoiceWidget):
     template_name = "dsfr/widgets/segmented_control.html"
     option_template_name = "dsfr/widgets/segmented_control_option.html"
+    inline = False
+    use_fieldset = True
+
+    @property
+    def dsfr_label_attrs(self):
+        attrs = {"class": "fr-segmented__legend"}
+        if self.inline:
+            attrs["class"] += " fr-segmented__legend--inline"
+        return attrs
 
     def __init__(
         self, *args, extra_classes: str = "", is_inline: bool = False, **kwargs
     ):
         super().__init__(*args, **kwargs)
         self.extra_classes = extra_classes
-        self.is_inline = is_inline
+        self.inline = is_inline
 
 
 class Toggle(CheckboxInput):