Prepend action links inside of cards with the card name

alphagov · Jul 14, 2023 · 09cd0d7 · 09cd0d7
1 parent 087d680
commit 09cd0d7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/template.njk b/packages/govuk-frontend/src/govuk/components/summary-list/template.njk
@@ -1,6 +1,9 @@
-{%- macro _actionLink(action) %}
+{%- macro _actionLink(action, cardTitle) %}
   <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    {{ action.html | safe if action.html else action.text }}
+    {%- if cardTitle %}
+      <span class="govuk-visually-hidden">{{- cardTitle.html | safe if cardTitle.html else cardTitle.text }}: </span>
+    {%- endif %}
+    {{- action.html | safe if action.html else action.text -}}
     {%- if action.visuallyHiddenText -%}
       <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>
     {% endif -%}
@@ -21,13 +24,13 @@
       {%- if params.actions.items.length -%}
         {%- if params.actions.items.length == 1 -%}
           <div class="govuk-summary-card__actions {%- if params.actions.classes %} {{ params.actions.classes }}{% endif %}">
-            {{- _actionLink(params.actions.items[0]) -}}
+            {{- _actionLink(params.actions.items[0], params.title) -}}
           </div>
         {%- else -%}
           <ul class="govuk-summary-card__actions {%- if params.actions.classes %} {{ params.actions.classes }}{% endif %}">
             {%- for action in params.actions.items -%}
               <li class="govuk-summary-card__action">
-                {{- _actionLink(action) -}}
+                {{- _actionLink(action, params.title) -}}
               </li>
             {%- endfor -%}
           </ul>
@@ -61,12 +64,12 @@
           {% if row.actions.items.length %}
             <dd class="govuk-summary-list__actions {%- if row.actions.classes %} {{ row.actions.classes }}{% endif %}">
               {% if row.actions.items.length == 1 %}
-                {{ _actionLink(row.actions.items[0]) | indent(16 if params.card else 12) | trim }}
+                {{ _actionLink(row.actions.items[0], params.card.title) | indent(16 if params.card else 12) | trim }}
               {% else %}
                 <ul class="govuk-summary-list__actions-list">
                   {%- for action in row.actions.items -%}
                     <li class="govuk-summary-list__actions-list-item">
-                      {{- _actionLink(action) | indent(22 if params.card else 18) | trim -}}
+                      {{- _actionLink(action, params.card.title) | indent(22 if params.card else 18) | trim -}}
                     </li>
                   {%- endfor -%}
                 </ul>

diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/template.test.js b/packages/govuk-frontend/src/govuk/components/summary-list/template.test.js
@@ -268,7 +268,7 @@ describe('Summary list', () => {
         const $singleAction = $('.govuk-summary-card__actions > a')
         const $actionItems = $('.govuk-summary-card__action')
         expect($actionItems.length).toBe(0)
-        expect($singleAction.text().trim()).toBe('My lonely action')
+        expect($singleAction.text().trim()).toBe('Undergraduate teaching assistant: My lonely action')
       })
     })