From 5eeaa3a0a4bb076f1d9e6041bd3d7ee0c48313e8 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 10 Mar 2021 09:35:50 +0000 Subject: [PATCH] Add title option to summary list links - link titles for 'change' and 'delete' links by default are automatically generated based on the text 'Change/Delete [thing]' but this causes problems when the thing and the link text don't naturally follow - adding in the option to pass explicit title attributes for the links --- CHANGELOG.md | 1 + .../components/_summary_list.html.erb | 28 +++++++++++----- .../components/docs/summary_list.yml | 13 +++++++- spec/components/summary_list_spec.rb | 33 +++++++++++++++++++ 4 files changed, 66 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11530d5e21..889497bedd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* 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 index 658c622535..5678cbfbe3 100644 --- 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 index c4076c6fcf..1c2c43d599 100644 --- 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 index 09ce6918e9..b21adf768a 100644 --- 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