♿ [#5047] Providing relationships in submission report PDF

Added aria tags that showcase that field label and field value are related
open-formulieren · Feb 24, 2025 · eaf228c · eaf228c
1 parent f46fe6e
commit eaf228c
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/src/openforms/submissions/templates/report/submission_report.html b/src/openforms/submissions/templates/report/submission_report.html
@@ -65,7 +65,7 @@ <h1 class="title">{{ report.form.name }}</h1>
 
             {% for submission_step_node in report.renderer.get_children %}
                 {% if submission_step_node.has_children %}
-                    <div class="submission-step">
+                    <section class="submission-step">
                         <h2 class="subtitle">{{ submission_step_node.render }}</h2>
                         {% for component_node in submission_step_node.get_children %}
                             {% if component_node.label or component_node.display_value %}
@@ -76,19 +76,21 @@ <h2 class="subtitle">{{ submission_step_node.render }}</h2>
                                         {% if component_node.component.type == "fieldset" %}
                                             <span class="submission-step-row__fieldset-label">{{ component_node.label }}</span>
                                         {% else %}
-                                            <div class="submission-step-row__label">
-                                                {{ component_node.label }}
-                                            </div>
-
-                                            <div class="submission-step-row__value{% if not component_node.display_value %} submission-step-row__value--empty{% endif %}">
-                                                {{ component_node.display_value|default:"" }}
-                                            </div>
+                                            {% with node_path=component_node.configuration_path|add:'.'|add:component_node.key %}
+                                                <span id="{{ node_path }}" class="submission-step-row__label">
+                                                    {{ component_node.label }}
+                                                </span>
+
+                                                <div aria-labelledby="{{ node_path }}" class="submission-step-row__value{% if not component_node.display_value %} submission-step-row__value--empty{% endif %}">
+                                                    {{ component_node.display_value|default:"" }}
+                                                </div>
+                                            {% endwith %}
                                         {% endif %}
                                     {% endif %}
                                 </div>
                             {% endif %}
                         {% endfor %}
-                    </div>
+                    </section>
                 {% endif %}
             {% endfor %}