Merge pull request #4747 from open-formulieren/feature/4717-accessibi…

…lity-improvements-aria

Feature/4717 accessibility improvements aria

src/openforms/emails/tests/test_confirmation_email.py

@@ -323,7 +323,7 @@ def test_checkboxes_ordering(self):
         context = get_confirmation_email_context_data(submission)
         rendered_content = render_email_template("{% summary %}", context)
 
-        self.assertIn("Value 1; Value 2", rendered_content)
+        self.assertInHTML("<ul><li>Value 1</li><li>Value 2</li></ul>", rendered_content)
 
     def test_get_confirmation_email_templates(self):
         email_template1 = ConfirmationEmailTemplateFactory.create(

src/openforms/formio/formatters/base.py

@@ -3,7 +3,7 @@
 from typing import Any, Generic, Iterable, Sequence, TypeVar
 
 from django.utils.encoding import force_str
-from django.utils.html import format_html_join
+from django.utils.html import format_html, format_html_join
 
 from ..typing import Component
 
@@ -51,12 +51,18 @@ def normalise_value_to_list(self, component: ComponentT, value: Any):
     def join_formatted_values(
         self, component: Component, formatted_values: Iterable[str]
     ) -> str:
-        if self.as_html:
-            args_generator = ((formatted,) for formatted in formatted_values)
-            return format_html_join(self.multiple_separator, "{}", args_generator)
-        else:
+        if not self.as_html:
             return self.multiple_separator.join(formatted_values)
 
+        args_generator = ((formatted,) for formatted in formatted_values)
+        if component.get("multiple", False):
+            return format_html(
+                "<ul>{values}</ul>",
+                values=format_html_join("", "<li>{}</li>", args_generator),
+            )
+
+        return format_html_join(self.multiple_separator, "{}", args_generator)
+
     def process_result(self, component: ComponentT, formatted: str) -> str:
         return formatted
 

src/openforms/formio/formatters/formio.py

@@ -5,7 +5,7 @@
 from django.template.defaultfilters import date as fmt_date, time as fmt_time, yesno
 from django.utils.dateparse import parse_date, parse_time
 from django.utils.formats import number_format
-from django.utils.html import format_html
+from django.utils.html import format_html, format_html_join
 from django.utils.translation import gettext, gettext_lazy as _
 
 from glom import glom
@@ -120,6 +120,18 @@ def format(self, component: SelectBoxesComponent, value: dict[str, bool]) -> str
         selected_labels = [
             entry["label"] for entry in component["values"] if value.get(entry["value"])
         ]
+        if self.as_html:
+            # For the html output, wrap the values in li tags and put it inside an ul tag.
+            # The selectboxes formatter handles all values at the same time,
+            # so handle the full html formatting here.
+            return format_html(
+                "<ul>{values}</ul>",
+                values=format_html_join(
+                    "",
+                    "<li>{}</li>",
+                    ((selected_label,) for selected_label in selected_labels),
+                ),
+            )
         return self.multiple_separator.join(selected_labels)