Use new gen_id method in summary template.

This means that the elements can be reliably referenced. This approach means that a screen reader will read 'Change xyz' or 'Answer xyz' rather than just 'Change' or 'Answer'. This may not be ideal in welsh, but I don't know what our normal interaction between i18n and a11y expectations are.
hmcts · Jan 24, 2025 · a26cf76 · a26cf76
1 parent 06e51c1
commit a26cf76
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/app/views/widgets/checkanswer.njk b/app/views/widgets/checkanswer.njk
@@ -4,8 +4,9 @@
         {% for item in items %}
             {% if item.visible %}
                 {% set complete = true if isComplete !== false and item.answer else false %}
+                {% set aria_id = ["checkanswer-", gen_id()] | join %}
                 <div class="govuk-summary-list__row">
-                    <dt class="govuk-summary-list__key">{{ item.question | safe }}</dt>
+                    <dt class="govuk-summary-list__key" id="{{ aria_id }}">{{ item.question | safe }}</dt>
                     {% if answerIsCollection %}
                         <dd class="govuk-summary-list__value">
                             {% for answ in item.answer %}
@@ -20,7 +21,7 @@
                     <dd class="govuk-summary-list__actions">
                         {% if alreadyDeclared == "false" %}
                             {% set actionLink = common.change if complete else common.answer %}
-                            <a class="govuk-link" href="{{ url }}">{{ actionLink | safe }}</a>
+                            <a class="govuk-link" href="{{ url }}" id="{{ aria_id }}-link" aria-labelledby="{{aria_id}}-link {{aria_id}}">{{ actionLink | safe }}</a>
                         {% endif %}
                     </dd>
                 </div>