Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove title attribute from summary list #1973

Merged
merged 2 commits into from
Mar 15, 2021
Merged

Remove title attribute from summary list #1973

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b93ef2
Remove title attribute from summary list
andysellick Mar 15, 2021
469520b
Improve link_text_no_enhance documentation
andysellick Mar 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

## Unreleased

* Remove title attribute from summary list ([PR #1973](https://github.com/alphagov/govuk_publishing_components/pull/1973))
* Summary list changes ([PR #1971](https://github.com/alphagov/govuk_publishing_components/pull/1971))

## 24.5.0
Expand Down
8 changes: 0 additions & 8 deletions app/views/govuk_publishing_components/components/_summary_list.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,9 @@
<% edit_main_link = capture do %>
<%
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_link_title,
data: edit.fetch(:data_attributes, {}) do %>
<%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%>
<% end %>
Expand All @@ -36,11 +34,9 @@
<% delete_main_link = capture do %>
<%
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_link_title,
data: delete.fetch(:data_attributes, {}) do %>
<%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%>
<% end %>
Expand Down Expand Up @@ -81,11 +77,9 @@
<% edit_link = capture do %>
<%
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_title,
data: item[:edit].fetch(:data_attributes, {}) do %>
<%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%>
<% end %>
Expand All @@ -96,11 +90,9 @@
<% delete_link = capture do %>
<%
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_title,
data: item[:delete].fetch(:data_attributes, {}) do %>
<%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%>
<% end %>
Expand Down
6 changes: 0 additions & 6 deletions app/views/govuk_publishing_components/components/docs/summary_list.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ examples:
<<: *default-example-data
delete:
href: "delete-title-summary-body"
title: "Delete this thing"
data_attributes:
gtm: "delete-title-summary-body"

Expand All @@ -73,13 +72,10 @@ examples:
The text of the link can be customised using the `link_text` option. 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.

To override this behaviour, use `link_text_no_enhance` on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a `span` element passed in a capture block.

Similarly, the link title attribute is automatically generated, using the form `Change [title]`. If this is not required it can be given an explicit title attribute as shown.
data:
<<: *default-example-data
edit:
href: "edit-title-summary-body"
title: This is a link for editing this document
link_text: Edit this document
link_text_no_enhance: true

Expand All @@ -105,10 +101,8 @@ 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:
Expand Down
63 changes: 15 additions & 48 deletions spec/components/summary_list_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ def component_name
},
)
assert_select ".gem-c-summary-list h3.govuk-heading-m.gem-c-summary-list__group-title", text: "Title, summary and body"
assert_select '.gem-c-summary-list__group-actions-list .govuk-link[title="Change Title, summary and body"][href="#edit-title-summary-body"][data-gtm="edit-title-summary-body"]', text: "Change Title, summary and body"
assert_select '.gem-c-summary-list__group-actions-list .govuk-link.gem-link--destructive[title="Delete Title, summary and body"][href="#delete-title-summary-body"][data-gtm="delete-title-summary-body"]', text: "Delete Title, summary and body"
assert_select '.gem-c-summary-list__group-actions-list .govuk-link[href="#edit-title-summary-body"][data-gtm="edit-title-summary-body"]', text: "Change Title, summary and body"
assert_select '.gem-c-summary-list__group-actions-list .govuk-link.gem-link--destructive[href="#delete-title-summary-body"][data-gtm="delete-title-summary-body"]', text: "Delete Title, summary and body"
end

it "renders section title with custom link text and heading level" do
Expand All @@ -47,7 +47,7 @@ def component_name
},
)
assert_select ".gem-c-summary-list h2.govuk-heading-l", text: "Items"
assert_select '.gem-c-summary-list__group-actions-list .govuk-link[title="Reorder Items"][href="#custom-action"]', text: "Reorder Items"
assert_select '.gem-c-summary-list__group-actions-list .govuk-link[href="#custom-action"]', text: "Reorder Items"
end

it "renders section title with block" do
Expand Down Expand Up @@ -102,7 +102,7 @@ def component_name
)
assert_select ".govuk-summary-list__key", text: "Title"
assert_select ".govuk-summary-list__value", text: "Ethical standards for public service providers"
assert_select 'dd.govuk-summary-list__actions .govuk-link[title="Change Title"][href="#edit-title"][data-gtm="edit-title"]', text: "Change Title"
assert_select 'dd.govuk-summary-list__actions .govuk-link[href="#edit-title"][data-gtm="edit-title"]', text: "Change Title"
end

it "renders items with only the delete action" do
Expand All @@ -122,7 +122,7 @@ def component_name
)
assert_select ".govuk-summary-list__key", text: "Title"
assert_select ".govuk-summary-list__value", text: "Ethical standards for public service providers"
assert_select 'dd.govuk-summary-list__actions .govuk-link.gem-link--destructive[title="Delete Title"][href="#delete-title"][data-gtm="delete-title"]', text: "Delete Title"
assert_select 'dd.govuk-summary-list__actions .govuk-link.gem-link--destructive[href="#delete-title"][data-gtm="delete-title"]', text: "Delete Title"
end

it "renders items with both the edit and the delete action" do
Expand All @@ -142,8 +142,8 @@ def component_name
)
assert_select ".govuk-summary-list__key", text: "Title"
assert_select ".govuk-summary-list__value", text: "Ethical standards for public service providers"
assert_select 'li.govuk-summary-list__actions-list-item .govuk-link[title="Change Title"][href="#edit-title"]', text: "Change Title"
assert_select 'li.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[title="Delete Title"][href="#delete-title"]', text: "Delete Title"
assert_select 'li.govuk-summary-list__actions-list-item .govuk-link[href="#edit-title"]', text: "Change Title"
assert_select 'li.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[href="#delete-title"]', text: "Delete Title"
end

it "renders items with custom text for edit and delete action" do
Expand All @@ -163,8 +163,8 @@ def component_name
},
],
)
assert_select '.govuk-summary-list__actions-list-item .govuk-link[title="Edit Title"][href="#edit-title"]', text: "Edit Title"
assert_select '.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[title="Remove Title"][href="#delete-title"]', text: "Remove Title"
assert_select '.govuk-summary-list__actions-list-item .govuk-link[href="#edit-title"]', text: "Edit Title"
assert_select '.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[href="#delete-title"]', text: "Remove Title"
end

it "renders the edit action on section" do
Expand All @@ -180,7 +180,7 @@ def component_name
href: "edit-title",
},
)
assert_select 'div.govuk-summary-list__actions-list .govuk-link[title="Change Title"][href="edit-title"]', text: "Change Title"
assert_select 'div.govuk-summary-list__actions-list .govuk-link[href="edit-title"]', text: "Change Title"
end

it "renders the delete action on section" do
Expand All @@ -196,7 +196,7 @@ def component_name
href: "delete-title",
},
)
assert_select 'div.govuk-summary-list__actions-list .govuk-link[title="Delete Title"][href="delete-title"]', text: "Delete Title"
assert_select 'div.govuk-summary-list__actions-list .govuk-link[href="delete-title"]', text: "Delete Title"
end

it "renders the edit and delete actions on section" do
Expand All @@ -221,8 +221,8 @@ def component_name
},
},
)
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Change Title"][href="edit-title"][data-gtm="edit-title"]', text: "Change Title"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Delete Title"][href="delete-title"][data-gtm="delete-title"]', text: "Delete Title"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[href="edit-title"][data-gtm="edit-title"]', text: "Change Title"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[href="delete-title"][data-gtm="delete-title"]', text: "Delete Title"
end

it "renders the edit and delete actions on section with custom text" do
Expand All @@ -243,41 +243,8 @@ def component_name
link_text: "Destroy",
},
)
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"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[href="edit-title"]', text: "Edit Title"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[href="delete-title"]', text: "Destroy Title"
end

it "renders all links without visually hidden extra text if specified" do
Expand Down