Allow to customize alert's close button

numerique-gouv · Dec 3, 2024 · 62ac4da · 62ac4da
1 parent ab6317f
commit 62ac4da
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/dsfr/templates/dsfr/alert.html b/dsfr/templates/dsfr/alert.html
@@ -11,9 +11,7 @@
     </p>
   {% endif %}
   {% if self.is_collapsible %}
-    <button class="fr-btn--close fr-btn"
-            title="{{ hide_message }}"
-            onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
+    <button class="fr-btn--close fr-btn" title="{{ hide_message }}" {% for attr, value in self.collapsible_attrs.items %}{{ attr }}="{{ value|safe }}"{% endfor %}>
       {{ hide_message }}
     </button>
   {% endif %}

diff --git a/dsfr/templatetags/dsfr_tags.py b/dsfr/templatetags/dsfr_tags.py
@@ -183,7 +183,8 @@ def dsfr_alert(*args, **kwargs) -> dict:
         "type": "Possible values : info, success, error",
         "content": "(Optional if median) Content of the accordion item (can include html)",
         "heading_tag": "(Optional) Heading tag for the alert title (default: p)",
-        "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the alert (default: false)",
+        "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the alert (default: false); set to true if 'collapsible_attrs' is set",
+        "collapsible_attrs": dict of HTML attribute to set to the 'close' button,
         "id": "Unique id of the alert item (Optional, mandatory if collapsible)",
         "extra_classes": "(Optional) string with names of extra classes."
     }
@@ -216,9 +217,20 @@ def dsfr_alert(*args, **kwargs) -> dict:
     ]
     tag_data = parse_tag_args(args, kwargs, allowed_keys)
 
+    if "collapsible_attrs" in tag_data:
+        tag_data["is_collapsible"] = True
+
     tag_data.setdefault("title", None)
     tag_data.setdefault("id", generate_random_id("alert"))
     tag_data.setdefault("is_collapsible", False)
+    tag_data.setdefault(
+        "collapsible_attrs",
+        {
+            "onclick": (
+                "const alert = this.parentNode; " "alert.parentNode.removeChild(alert)"
+            )
+        },
+    )
 
     return {"self": tag_data}
 

diff --git a/dsfr/test/test_templatetags.py b/dsfr/test/test_templatetags.py
@@ -186,6 +186,25 @@ def test_alert_tag_has_collapse_button(self):
             rendered_template,
         )
 
+    def test_alert_tag_has_custom_attrs(self):
+        test_data = self.test_data.copy()
+        test_data.pop("is_collapsible", None)
+        test_data["collapsible_attrs"] = {
+            "data-controller": "close",
+            "data-action": "close#onClick",
+        }
+        rendered_template = self.template_to_render.render(
+            Context({"test_data": test_data})
+        )
+        self.assertInHTML(
+            """
+            <button class="fr-btn--close fr-btn" title="Masquer le message" data-controller="close" data-action="close#onClick">
+              Masquer le message
+            </button>
+            """,  # noqa
+            rendered_template,
+        )
+
 
 class DsfrBadgeTagTest(SimpleTestCase):
     test_data = {