Merge pull request #3961 from alphagov/summary-card-title-in-action-l…

…inks

Append card title to action links inside of a Summary Card

src/govuk/components/summary-list/template.njk

@@ -1,9 +1,12 @@
-{%- 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 action.visuallyHiddenText -%}
-      <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>
-    {% endif -%}
+    {{- action.html | safe if action.html else action.text -}}
+    {%- if action.visuallyHiddenText or cardTitle -%}
+      <span class="govuk-visually-hidden">
+        {%- if action.visuallyHiddenText %} {{ action.visuallyHiddenText }}{% endif -%}
+        {%- if cardTitle %} ({{ cardTitle.html | safe if cardTitle.html else cardTitle.text }}){% endif -%}
+      </span>
+    {%- endif -%}
   </a>
 {% endmacro -%}
 
@@ -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>

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('My lonely action (Undergraduate teaching assistant)')
       })
     })
 

src/govuk/helpers/_visually-hidden.scss

@@ -33,6 +33,11 @@
   // causes content to wrap 1 word per line:
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   white-space: nowrap if($important, !important, null);
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  user-select: none;
 }
 
 /// Hide an element visually, but have it available for screen readers whilst
@@ -64,6 +69,11 @@
   // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   white-space: nowrap if($important, !important, null);
 
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  user-select: none;
+
   &:active,
   &:focus {
     position: static if($important, !important, null);
@@ -77,5 +87,8 @@
     clip-path: none if($important, !important, null);
 
     white-space: inherit if($important, !important, null);
+
+    // Allow the text to be selectable now it's visible
+    user-select: text;
   }
 }