From cd8b94d866ecab68cc744df7a135e85a26f38dce Mon Sep 17 00:00:00 2001 From: Sylvain Boissel Date: Tue, 5 Dec 2023 15:04:46 +0100 Subject: [PATCH] Fix accessibility issue on the Alert component --- content_manager/blocks.py | 44 +- .../migrations/0009_alter_contentpage_body.py | 454 ++++++++++++++++++ .../content_manager/blocks/alert.html | 8 + .../content_manager/content_page.html | 8 +- 4 files changed, 487 insertions(+), 27 deletions(-) create mode 100644 content_manager/migrations/0009_alter_contentpage_body.py create mode 100644 content_manager/templates/content_manager/blocks/alert.html diff --git a/content_manager/blocks.py b/content_manager/blocks.py index 1f489c26..2b49ac42 100644 --- a/content_manager/blocks.py +++ b/content_manager/blocks.py @@ -5,6 +5,22 @@ # Wagtail Block Documentation : https://docs.wagtail.org/en/stable/reference/streamfield/blocks.html +HEADING_CHOICES = [ + ("h2", "En-tête 2"), + ("h3", "En-tête 3"), + ("h4", "En-tête 4"), + ("h5", "En-tête 5"), + ("h6", "En-tête 6"), + ("p", "Paragraphe"), +] + +LEVEL_CHOICES = [ + ("error", "Erreur"), + ("success", "Succès"), + ("info", "Information"), + ("warning", "Attention"), +] + ## Basic blocks class AccordionBlock(blocks.StructBlock): @@ -17,18 +33,16 @@ class AccordionsBlock(blocks.StreamBlock): accordion = AccordionBlock(label="Accordéon", min_num=1, max_num=15) -level_choices = [ - ("error", "Erreur"), - ("success", "Succès"), - ("info", "Information"), - ("warning", "Attention"), -] - - class AlertBlock(blocks.StructBlock): title = blocks.CharBlock(label="Titre du message", required=False) description = blocks.TextBlock(label="Texte du message", required=False) - level = blocks.ChoiceBlock(label="Type de message", choices=level_choices) + level = blocks.ChoiceBlock(label="Type de message", choices=LEVEL_CHOICES) + heading_tag = blocks.ChoiceBlock( + label="Niveau de titre", + choices=HEADING_CHOICES, + default="h3", + help_text="À adapter à la structure de la page. Par défaut en-tête 3.", + ) badge_level_choices = [ @@ -53,22 +67,12 @@ class BadgesListBlock(blocks.StreamBlock): badge = BadgeBlock(label="Badge") -heading_choices = [ - ("h2", "En-tête 2"), - ("h3", "En-tête 3"), - ("h4", "En-tête 4"), - ("h5", "En-tête 5"), - ("h6", "En-tête 6"), - ("p", "Paragraphe"), -] - - class CalloutBlock(blocks.StructBlock): title = blocks.CharBlock(label="Titre de la mise en vant", required=False) text = blocks.TextBlock(label="Texte mis en avant", required=False) heading_tag = blocks.ChoiceBlock( label="Niveau de titre", - choices=heading_choices, + choices=HEADING_CHOICES, default="h3", help_text="À adapter à la structure de la page. Par défaut en-tête 3.", ) diff --git a/content_manager/migrations/0009_alter_contentpage_body.py b/content_manager/migrations/0009_alter_contentpage_body.py new file mode 100644 index 00000000..e6dab2b9 --- /dev/null +++ b/content_manager/migrations/0009_alter_contentpage_body.py @@ -0,0 +1,454 @@ +# Generated by Django 4.2.7 on 2023-12-05 13:54 + +import wagtail.blocks +import wagtail.documents.blocks +import wagtail.fields +import wagtail.images.blocks +from django.db import migrations + + +class Migration(migrations.Migration): + dependencies = [ + ("content_manager", "0008_cmsdsfrconfig_theme_modale_button_and_more"), + ] + + operations = [ + migrations.AlterField( + model_name="contentpage", + name="body", + field=wagtail.fields.StreamField( + [ + ( + "hero", + wagtail.blocks.StructBlock( + [ + ("bg_image", wagtail.images.blocks.ImageChooserBlock(label="Image d'arrière plan")), + ( + "bg_color", + wagtail.blocks.RegexBlock( + error_messages={ + "invalid": "La couleur n'est pas correcte, le format doit être #fff ou #f5f5fe" + }, + label="Couleur d'arrière plan au format hexa (Ex: #f5f5fe)", + regex="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$", + required=False, + ), + ), + ("title", wagtail.blocks.CharBlock(label="Titre")), + ("text", wagtail.blocks.CharBlock(label="Texte", required=False)), + ("cta_label", wagtail.blocks.CharBlock(label="Texte du bouton", required=False)), + ("cta_link", wagtail.blocks.URLBlock(label="Lien du bouton", required=False)), + ], + label="Section promotionnelle", + ), + ), + ( + "title", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre")), + ("large", wagtail.blocks.BooleanBlock(label="Large", required=False)), + ], + label="Titre de page", + ), + ), + ("paragraph", wagtail.blocks.RichTextBlock(label="Texte avec mise en forme")), + ("paragraphlarge", wagtail.blocks.RichTextBlock(label="Texte avec mise en forme (large)")), + ( + "image", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre", required=False)), + ("image", wagtail.images.blocks.ImageChooserBlock(label="Illustration")), + ( + "alt", + wagtail.blocks.CharBlock( + label="Texte alternatif (description textuelle de l'image)", required=False + ), + ), + ("caption", wagtail.blocks.CharBlock(label="Légende", required=False)), + ("url", wagtail.blocks.URLBlock(label="Lien", required=False)), + ] + ), + ), + ( + "imageandtext", + wagtail.blocks.StructBlock( + [ + ("image", wagtail.images.blocks.ImageChooserBlock(label="Illustration (à gauche)")), + ( + "image_ratio", + wagtail.blocks.ChoiceBlock( + choices=[("3", "3/12"), ("5", "5/12"), ("6", "6/12")], + label="Largeur de l'image", + ), + ), + ("text", wagtail.blocks.RichTextBlock(label="Texte avec mise en forme (à droite)")), + ( + "link_label", + wagtail.blocks.CharBlock( + help_text="Le lien apparait en bas du bloc de droite, avec une flèche", + label="Titre du lien", + required=False, + ), + ), + ("link_url", wagtail.blocks.URLBlock(label="Lien", required=False)), + ], + label="Bloc image à gauche et texte à droite", + ), + ), + ( + "alert", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre du message", required=False)), + ("description", wagtail.blocks.TextBlock(label="Texte du message", required=False)), + ( + "level", + wagtail.blocks.ChoiceBlock( + choices=[ + ("error", "Erreur"), + ("success", "Succès"), + ("info", "Information"), + ("warning", "Attention"), + ], + label="Type de message", + ), + ), + ( + "heading_tag", + wagtail.blocks.ChoiceBlock( + choices=[ + ("h2", "En-tête 2"), + ("h3", "En-tête 3"), + ("h4", "En-tête 4"), + ("h5", "En-tête 5"), + ("h6", "En-tête 6"), + ("p", "Paragraphe"), + ], + help_text="À adapter à la structure de la page. Par défaut en-tête 3.", + label="Niveau de titre", + ), + ), + ], + label="Message d'alerte", + ), + ), + ( + "callout", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre de la mise en vant", required=False)), + ("text", wagtail.blocks.TextBlock(label="Texte mis en avant", required=False)), + ( + "heading_tag", + wagtail.blocks.ChoiceBlock( + choices=[ + ("h2", "En-tête 2"), + ("h3", "En-tête 3"), + ("h4", "En-tête 4"), + ("h5", "En-tête 5"), + ("h6", "En-tête 6"), + ("p", "Paragraphe"), + ], + help_text="À adapter à la structure de la page. Par défaut en-tête 3.", + label="Niveau de titre", + ), + ), + ], + label="Texte mise en avant", + ), + ), + ( + "quote", + wagtail.blocks.StructBlock( + [ + ( + "image", + wagtail.images.blocks.ImageChooserBlock( + label="Illustration (à gauche)", required=False + ), + ), + ("quote", wagtail.blocks.CharBlock(label="Citation")), + ("author_name", wagtail.blocks.CharBlock(label="Nom de l'auteur")), + ("author_title", wagtail.blocks.CharBlock(label="Titre de l'auteur")), + ], + label="Citation", + ), + ), + ( + "video", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre", required=False)), + ("caption", wagtail.blocks.CharBlock(label="Légende")), + ( + "url", + wagtail.blocks.URLBlock( + help_text="URL au format 'embed' (Ex. : https://www.youtube.com/embed/gLzXOViPX-0)", + label="Lien de la vidéo", + ), + ), + ], + label="Vidéo", + ), + ), + ( + "multicolumns", + wagtail.blocks.StructBlock( + [ + ( + "bg_image", + wagtail.images.blocks.ImageChooserBlock( + label="Image d'arrière plan", required=False + ), + ), + ( + "bg_color", + wagtail.blocks.RegexBlock( + error_messages={ + "invalid": "La couleur n'est pas correcte, le format doit être #fff ou #f5f5fe" + }, + label="Couleur d'arrière plan au format hexa (Ex: #f5f5fe)", + regex="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$", + required=False, + ), + ), + ("title", wagtail.blocks.CharBlock(label="Titre", required=False)), + ( + "columns", + wagtail.blocks.StreamBlock( + [ + ("text", wagtail.blocks.RichTextBlock(label="Texte avec mise en forme")), + ( + "image", + wagtail.blocks.StructBlock( + [ + ( + "title", + wagtail.blocks.CharBlock(label="Titre", required=False), + ), + ( + "image", + wagtail.images.blocks.ImageChooserBlock( + label="Illustration" + ), + ), + ( + "alt", + wagtail.blocks.CharBlock( + label="Texte alternatif (description textuelle de l'image)", + required=False, + ), + ), + ( + "caption", + wagtail.blocks.CharBlock(label="Légende", required=False), + ), + ("url", wagtail.blocks.URLBlock(label="Lien", required=False)), + ], + label="Image", + ), + ), + ( + "video", + wagtail.blocks.StructBlock( + [ + ( + "title", + wagtail.blocks.CharBlock(label="Titre", required=False), + ), + ("caption", wagtail.blocks.CharBlock(label="Légende")), + ( + "url", + wagtail.blocks.URLBlock( + help_text="URL au format 'embed' (Ex. : https://www.youtube.com/embed/gLzXOViPX-0)", + label="Lien de la vidéo", + ), + ), + ], + label="Vidéo", + ), + ), + ( + "card", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre")), + ("description", wagtail.blocks.TextBlock(label="Texte")), + ( + "image", + wagtail.images.blocks.ImageChooserBlock(label="Image"), + ), + ("url", wagtail.blocks.URLBlock(label="Lien", required=False)), + ( + "document", + wagtail.documents.blocks.DocumentChooserBlock( + help_text="Sélectionnez un document pour rendre la carte cliquable vers celui ci (si le champ `Lien` n'est pas renseigné).", + label="ou Document", + required=False, + ), + ), + ], + label="Carte", + ), + ), + ( + "quote", + wagtail.blocks.StructBlock( + [ + ( + "image", + wagtail.images.blocks.ImageChooserBlock( + label="Illustration (à gauche)", required=False + ), + ), + ("quote", wagtail.blocks.CharBlock(label="Citation")), + ( + "author_name", + wagtail.blocks.CharBlock(label="Nom de l'auteur"), + ), + ( + "author_title", + wagtail.blocks.CharBlock(label="Titre de l'auteur"), + ), + ], + label="Citation", + ), + ), + ( + "text_cta", + wagtail.blocks.StructBlock( + [ + ( + "text", + wagtail.blocks.RichTextBlock( + label="Texte avec mise en forme", required=False + ), + ), + ( + "cta_label", + wagtail.blocks.CharBlock( + help_text="Le lien apparait comme un bouton sous le bloc de texte", + label="Titre de l'appel à l'action", + required=False, + ), + ), + ( + "cta_url", + wagtail.blocks.CharBlock(label="Lien", required=False), + ), + ], + label="Texte et appel à l'action", + ), + ), + ( + "iframe", + wagtail.blocks.StructBlock( + [ + ( + "title", + wagtail.blocks.CharBlock( + help_text="Accessibilité : Le titre doit décrire, de façon claire et concise, le contenu embarqué.", + label="Titre", + ), + ), + ( + "url", + wagtail.blocks.URLBlock( + help_text="Exemple pour Tally : https://tally.so/embed/w2jMRa", + label="Lien du cadre intégré", + ), + ), + ( + "height", + wagtail.blocks.IntegerBlock(label="Hauteur en pixels"), + ), + ], + label="Cadre intégré", + ), + ), + ], + label="Multi-colonnes", + ), + ), + ], + label="Multi-colonnes", + ), + ), + ( + "accordions", + wagtail.blocks.StreamBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre")), + ( + "accordion", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre")), + ("content", wagtail.blocks.RichTextBlock(label="Contenu")), + ], + label="Accordéon", + max_num=15, + min_num=1, + ), + ), + ], + label="Accordéons", + ), + ), + ( + "stepper", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre")), + ("total", wagtail.blocks.IntegerBlock(label="Nombre d'étape")), + ("current", wagtail.blocks.IntegerBlock(label="Étape en cours")), + ( + "steps", + wagtail.blocks.StreamBlock( + [ + ( + "step", + wagtail.blocks.StructBlock( + [ + ("title", wagtail.blocks.CharBlock(label="Titre de l'étape")), + ("detail", wagtail.blocks.TextBlock(label="Détail")), + ], + label="Étape", + ), + ) + ], + label="Les étapes", + ), + ), + ], + label="Étapes", + ), + ), + ( + "separator", + wagtail.blocks.StructBlock( + [ + ( + "top_margin", + wagtail.blocks.IntegerBlock( + default=3, label="Espacement au dessus", max_value=15, min_value=0 + ), + ), + ( + "bottom_margin", + wagtail.blocks.IntegerBlock( + default=3, label="Espacement en dessous", max_value=15, min_value=0 + ), + ), + ], + label="Séparateur", + ), + ), + ], + blank=True, + use_json_field=True, + ), + ), + ] diff --git a/content_manager/templates/content_manager/blocks/alert.html b/content_manager/templates/content_manager/blocks/alert.html new file mode 100644 index 00000000..b7fb8793 --- /dev/null +++ b/content_manager/templates/content_manager/blocks/alert.html @@ -0,0 +1,8 @@ +{% load dsfr_tags %} +
+
+
+ {% dsfr_alert title=block.value.title type=block.value.level content=block.value.description heading_tag=block.value.heading_tag %} +
+
+
diff --git a/content_manager/templates/content_manager/content_page.html b/content_manager/templates/content_manager/content_page.html index b7febbd4..cdecd6bd 100644 --- a/content_manager/templates/content_manager/content_page.html +++ b/content_manager/templates/content_manager/content_page.html @@ -48,13 +48,7 @@

{{ block.value.title }}

{% elif block.block_type == 'imageandtext' %} {% include "content_manager/blocks/imageandtext.html" %} {% elif block.block_type == 'alert' %} -
-
-
- {% dsfr_alert title=block.value.title type=block.value.level content=block.value.description %} -
-
-
+ {% include "content_manager/blocks/alert.html" %} {% elif block.block_type == 'callout' %} {% include "content_manager/blocks/callout.html" %} {% elif block.block_type == 'quote' %}