Prévient les listes vides (#208)

* prevent empty lists * Update header.html * revert changes to main * update doc * Update version number and doc --------- Co-authored-by: Sylvain Boissel <[email protected]> Co-authored-by: Sylvain Boissel <[email protected]>
numerique-gouv · Mar 3, 2025 · cc1e955 · cc1e955
1 parent 9549f42
commit cc1e955
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 19 deletions.
diff --git a/doc/header.md b/doc/header.md
@@ -91,3 +91,47 @@ Un bloc `opengraph`, vide par défaut, est fourni pour permettre d’entrer des
   <meta name="twitter:image:alt" content="[À MODIFIER - République Française - Système de Design de l'État]">
 {% endblock opengraph %}
 ```
+
+## Bloc déprécié
+### header_tools
+
+<ul class="fr-badge-group">
+  <li><p class="fr-badge fr-badge--new">
+    Nouveau en version 2.2.0</p>
+  </li>
+</ul>
+
+- Le bloc `header_tools`, qui n’agit que sur l’intérieur de la liste de liens de l’en-tête, pose un problème d’acessibilité si cette liste est vide et va donc être supprimé à terme. Les personnalisations sont à mettre dans le nouveau bloc `header_tools_links`, comme suit :
+
+```{.django}
+<!-- <votre_app>/templates/<votre_app>/base.html -->
+{% extends "dsfr/base.html" %}
+
+<!-- [...] -->
+
+{% block header_tools_links %}
+  <div class="fr-header__tools-links">
+    <ul class="fr-btns-group">
+        <li>
+          <a class="fr-icon-add-circle-line fr-btn" href="[url - à modifier]">Créer un espace</a>
+        </li>
+        <li>
+          <a class="fr-icon-lock-line fr-btn" href="[url - à modifier]">Se connecter</a>
+        </li>
+        <li>
+          <a class="fr-icon-account-line fr-btn" href="[url - à modifier]">S’enregistrer</a>
+        </li>
+    </ul>
+  </div>
+{% endblock header_tools_links %}
+```
+- Inversement, s’il est vide, il faut donc l’indiquer explicitement comme vide. De même, s’il n’y a pas non plus de barre de recherche, indiquer explicitement le bloc `header_tools_wrapper` comme vide :
+
+```{.django}
+<!-- <votre_app>/templates/<votre_app>/base.html -->
+{% extends "dsfr/base.html" %}
+
+<!-- [...] -->
+
+{% block header_tools_wrapper %}{% endblock header_tools_wrapper %}
+```
diff --git a/dsfr/templates/dsfr/header.html b/dsfr/templates/dsfr/header.html
@@ -56,25 +56,29 @@
             </p>
           </div>
         </div>
-        <div class="fr-header__tools">
-          <div class="fr-header__tools-links">
-            <ul class="fr-btns-group">
-              {% block header_tools %}
-                <li>
-                  <a class="fr-icon-add-circle-line fr-btn" href="[url - à modifier]">Créer un espace</a>
-                </li>
-                <li>
-                  <a class="fr-icon-lock-line fr-btn" href="[url - à modifier]">Se connecter</a>
-                </li>
-                <li>
-                  <a class="fr-icon-account-line fr-btn" href="[url - à modifier]">S’enregistrer</a>
-                </li>
-              {% endblock header_tools %}
-            </ul>
+        {% block header_tools_wrapper %}
+          <div class="fr-header__tools">
+            {% block header_tools_links %}
+              <div class="fr-header__tools-links">
+                <ul class="fr-btns-group">
+                  {% block header_tools %}
+                    <li>
+                      <a class="fr-icon-add-circle-line fr-btn" href="[url - à modifier]">Créer un espace</a>
+                    </li>
+                    <li>
+                      <a class="fr-icon-lock-line fr-btn" href="[url - à modifier]">Se connecter</a>
+                    </li>
+                    <li>
+                      <a class="fr-icon-account-line fr-btn" href="[url - à modifier]">S’enregistrer</a>
+                    </li>
+                  {% endblock header_tools %}
+                </ul>
+              </div>
+            {% endblock header_tools_links %}
+            {% block header_search %}
+            {% endblock header_search %}
           </div>
-          {% block header_search %}
-          {% endblock header_search %}
-        </div>
+        {% endblock header_tools_wrapper %}
       </div>
     </div>
   </div>

diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "django-dsfr"
-version = "2.1.1"
+version = "2.2.0"
 description = "Integrate the French government Design System into a Django app"
 authors = [
     {name = "Sylvain Boissel", email = "[email protected]"}