Merge pull request #1967 from alphagov/summary-list-link-titles

Add title option to summary list links
alphagov · Mar 10, 2021 · 977563d · 977563d
2 parents 02f94e4 + 5eeaa3a
commit 977563d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## 24.5.0
 
+* Add title option to summary list links ([PR #1967](https://github.com/alphagov/govuk_publishing_components/pull/1967))
 * Remove lists from summary action links ([PR #1956](https://github.com/alphagov/govuk_publishing_components/pull/1956))
 * Fix GOV.UK Frontend deprecation warning for component-guide print stylesheet ([PR #1961](https://github.com/alphagov/govuk_publishing_components/pull/1961))
 * Update search box button ([PR #1957](https://github.com/alphagov/govuk_publishing_components/pull/1957))

diff --git a/app/views/govuk_publishing_components/components/_summary_list.html.erb b/app/views/govuk_publishing_components/components/_summary_list.html.erb
@@ -18,10 +18,13 @@
 
       <% if edit.any? %>
         <% edit_main_link = capture do %>
-          <% edit_section_link_text = edit[:link_text] || t("components.summary_list.edit") %>
+          <%
+            edit_section_link_text = edit[:link_text] || t("components.summary_list.edit")
+            edit_link_title = edit[:title] || "#{edit_section_link_text} #{title}"
+          %>
           <%= link_to edit.fetch(:href),
                     class: "govuk-link",
-                    title: "#{edit_section_link_text} #{title}",
+                    title: edit_link_title,
                     data: edit.fetch(:data_attributes, {}) do %>
             <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
           <% end %>
@@ -30,10 +33,13 @@
 
       <% if delete.any? %>
         <% delete_main_link = capture do %>
-          <% delete_section_link_text = delete[:link_text] || t("components.summary_list.delete") %>
+          <%
+            delete_section_link_text = delete[:link_text] || t("components.summary_list.delete")
+            delete_link_title = delete[:title] || "#{delete_section_link_text} #{title}"
+          %>
           <%= link_to delete.fetch(:href),
                     class: "govuk-link gem-link--destructive",
-                    title: "#{delete_section_link_text} #{title}",
+                    title: delete_link_title,
                     data: delete.fetch(:data_attributes, {}) do %>
             <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
           <% end %>
@@ -72,10 +78,13 @@
 
             <% if item.fetch(:edit, {}).any? %>
               <% edit_link = capture do %>
-                <% edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit") %>
+                <%
+                  edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit")
+                  edit_link_title = item[:edit][:title] || "#{edit_link_text} #{item[:field]}"
+                %>
                 <%= link_to item[:edit].fetch(:href),
                             class: "govuk-link",
-                            title: "#{edit_link_text} #{item[:field]}",
+                            title: edit_link_title,
                             data: item[:edit].fetch(:data_attributes, {}) do %>
                   <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
                 <% end %>
@@ -84,10 +93,13 @@
 
             <% if item.fetch(:delete, {}).any? %>
               <% delete_link = capture do %>
-                <% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
+                <%
+                  delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete")
+                  delete_link_title = item[:delete][:title] || "#{delete_link_text} #{item[:field]}"
+                %>
                 <%= link_to item[:delete].fetch(:href),
                             class: "govuk-link gem-link--destructive",
-                            title: "#{delete_link_text} #{item[:field]}",
+                            title: delete_link_title,
                             data: item[:delete].fetch(:data_attributes, {}) do %>
                   <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
                 <% end %>

diff --git a/app/views/govuk_publishing_components/components/docs/summary_list.yml b/app/views/govuk_publishing_components/components/docs/summary_list.yml
@@ -35,18 +35,22 @@ examples:
       borderless: true
 
   with_edit_on_section:
+    description: The edit link can be given an explicit title attribute as shown, or it will generate one of the form `Change [title]``.
     data:
       <<: *default-example-data
       edit:
         href: "edit-title-summary-body"
+        title: "Change this thing"
         data_attributes:
           gtm: "edit-title-summary-body"
 
   with_delete_on_section:
+    description: The delete link can be given an explicit title attribute as shown, or it will generate one of the form `Delete [title]`.
     data:
       <<: *default-example-data
       delete:
         href: "delete-title-summary-body"
+        title: "Delete this thing"
         data_attributes:
           gtm: "delete-title-summary-body"
 
@@ -73,6 +77,8 @@ examples:
       Take care that the provided `link_text` still makes sense to screen readers when combined with the title.
       For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text
       of `Summary` would read as `Summary Items`, which does not make sense.
+
+      Otherwise, pass an explicit title attribute for the link, as shown in previous examples.
     data:
       edit:
         href: "custom-link"
@@ -87,7 +93,10 @@ examples:
         value: "Value 3"
 
   with_edit_on_individual_items:
-    description: The link text can be optionally modified using the 'link_text' parameter, as for the edit link in previous examples.
+    description: |
+      The link text can be optionally modified using the 'link_text' parameter, as for the edit link in previous examples.
+
+      Explicit title attributes can also be passed for the links, to replace the automatically generated ones detailed in previous examples.
     data:
       title: "Title, summary and body"
       items:
@@ -102,8 +111,10 @@ examples:
         value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
         edit:
           href: "edit-summary"
+          title: "Edit this thing"
         delete:
           href: "delete-summary"
+          title: "Delete this thing"
       - field: "Body"
         value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
         edit:

diff --git a/spec/components/summary_list_spec.rb b/spec/components/summary_list_spec.rb
@@ -246,4 +246,37 @@ def component_name
     assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Edit Title"][href="edit-title"]', text: "Edit Title"
     assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Destroy Title"][href="delete-title"]', text: "Destroy Title"
   end
+
+  it "renders all edit and delete actions with custom title attributes" do
+    render_component(
+      title: "Title",
+      edit: {
+        href: "edit-title",
+        title: "Edit the thing",
+      },
+      delete: {
+        href: "delete-title",
+        title: "Delete the thing",
+      },
+      items: [
+        {
+          field: "Title",
+          value: "Ethical standards for public service providers",
+          edit: {
+            href: "#edit-title",
+            title: "Edit this thing",
+          },
+          delete: {
+            href: "#delete-title",
+            title: "Delete this thing",
+          },
+        },
+      ],
+    )
+    assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Edit the thing"][href="edit-title"]', text: "Change Title"
+    assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Delete the thing"][href="delete-title"]', text: "Delete Title"
+
+    assert_select '.govuk-summary-list__actions-list-item .govuk-link[title="Edit this thing"][href="#edit-title"]', text: "Change Title"
+    assert_select '.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[title="Delete this thing"][href="#delete-title"]', text: "Delete Title"
+  end
 end