Skip to content

Commit

Permalink
Merge pull request #3468 from alphagov/fix-inconsistent-focus-state
Browse files Browse the repository at this point in the history 
Fix inconsistent focus state on document list component
  • Loading branch information
@jon-kirwan
jon-kirwan authored Jul 26, 2023
2 parents 8625afb + a26e4ae commit 42e105a
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 48 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

* Extend component wrapper helper and use on heading component ([PR #3519](https://github.com/alphagov/govuk_publishing_components/pull/3519))
* Remove licence-finder from list of audited applications ([PR #3518](https://github.com/alphagov/govuk_publishing_components/pull/3518))
* Fix inconsistent focus state on document list component ([PR #3468](https://github.com/alphagov/govuk_publishing_components/pull/3468))

## 35.12.0

Expand Down
4 changes: 3 additions & 1 deletion app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@

.gem-c-document-list--no-underline {
.gem-c-document-list__item-title {
text-decoration: none;
.govuk-link {
text-decoration: none;
}
}
}

Expand Down
56 changes: 29 additions & 27 deletions app/views/govuk_publishing_components/components/_document_list.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,35 +29,37 @@
<p class='gem-c-document-list__highlight-text'><%= item[:highlight_text] %></p>
<% end %>
<%=
item_classes = "gem-c-document-list__item-title #{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"
<%= content_tag :div, class: "gem-c-document-list__item-title" do -%>
<%=
item_classes = "#{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"

if item[:link][:path]
rel = [
"external",
"nofollow",
"noopener",
"noreferrer",
"opener",
].include?(item[:link][:rel]) ? item[:link][:rel] : nil
if item[:link][:path]
rel = [
"external",
"nofollow",
"noopener",
"noreferrer",
"opener",
].include?(item[:link][:rel]) ? item[:link][:rel] : nil

link_to(
item[:link][:text],
item[:link][:path],
data: item[:link][:data_attributes],
class: "#{item_classes} govuk-link",
lang: item[:link][:locale].presence,
rel: rel,
)
else
content_tag(
"span",
item[:link][:text],
data: item[:link][:data_attributes],
class: item_classes,
)
end
%>
link_to(
item[:link][:text],
item[:link][:path],
data: item[:link][:data_attributes],
class: "#{item_classes} govuk-link",
lang: item[:link][:locale].presence,
rel: rel,
)
else
content_tag(
"span",
item[:link][:text],
data: item[:link][:data_attributes],
class: item_classes,
)
end
%>
<% end %>
<% if item[:link][:context] %>
<span class="gem-c-document-list__item-context"><%= item[:link][:context] %></span>
Expand Down
40 changes: 20 additions & 20 deletions spec/components/document_list_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ def component_name
},
],
)
li = ".gem-c-document-list__item-title"
div = ".gem-c-document-list__item-title"
attribute = ".gem-c-document-list__attribute"

assert_select "#{li}[href='/government/publications/parental-responsibility-measures-for-behaviour-and-attendance']", text: "School behaviour and attendance: parental responsibility measures"
assert_select "#{div} a[href='/government/publications/parental-responsibility-measures-for-behaviour-and-attendance']", text: "School behaviour and attendance: parental responsibility measures"
assert_select "#{attribute} time", text: "5 January 2017"
assert_select "#{attribute} time[datetime='2017-01-05T14:50:33Z']"
assert_select ".gem-c-document-list__attribute", text: "Statutory guidance"

assert_select "#{li}[href='/become-an-apprentice']", text: "Become an apprentice"
assert_select "#{div} a[href='/become-an-apprentice']", text: "Become an apprentice"
assert_select ".gem-c-document-list__item-description", text: "Becoming an apprentice - what to expect"
assert_select "#{attribute} time", text: "19 July 2017"
assert_select "#{attribute} time[datetime='2017-07-19T15:01:48Z']"
Expand All @@ -108,7 +108,7 @@ def component_name
],
)

assert_select ".gem-c-document-list__item-title[href='/timeless-news']", text: "Some news stories are timeless"
assert_select ".gem-c-document-list__item-title a[href='/timeless-news']", text: "Some news stories are timeless"
assert_select ".gem-c-document-list__attribute", text: "News Story"
end

Expand Down Expand Up @@ -156,19 +156,19 @@ def component_name
],
)

li = "a.gem-c-document-list__item-title"
a = ".gem-c-document-list__item-title a"

assert_select "#{li}[href='/link1']", text: "Link 1"
assert_select "#{li}[data-track-category='navDocumentCollectionLinkClicked']", text: "Link 1"
assert_select "#{li}[data-track-action='1.1']", text: "Link 1"
assert_select "#{li}[data-track-label='/link1']", text: "Link 1"
assert_select "#{li}[data-track-options='{\"dimension28\":\"2\",\"dimension29\":\"Link 1\"}']", text: "Link 1"
assert_select "#{a}[href='/link1']", text: "Link 1"
assert_select "#{a}[data-track-category='navDocumentCollectionLinkClicked']", text: "Link 1"
assert_select "#{a}[data-track-action='1.1']", text: "Link 1"
assert_select "#{a}[data-track-label='/link1']", text: "Link 1"
assert_select "#{a}[data-track-options='{\"dimension28\":\"2\",\"dimension29\":\"Link 1\"}']", text: "Link 1"

assert_select "#{li}[href='/link2']", text: "Link 2"
assert_select "#{li}[data-track-category='navDocumentCollectionLinkClicked']", text: "Link 2"
assert_select "#{li}[data-track-action='1.2']", text: "Link 2"
assert_select "#{li}[data-track-label='/link2']", text: "Link 2"
assert_select "#{li}[data-track-options='{\"dimension28\":\"2\",\"dimension29\":\"Link 2\"}']", text: "Link 2"
assert_select "#{a}[href='/link2']", text: "Link 2"
assert_select "#{a}[data-track-category='navDocumentCollectionLinkClicked']", text: "Link 2"
assert_select "#{a}[data-track-action='1.2']", text: "Link 2"
assert_select "#{a}[data-track-label='/link2']", text: "Link 2"
assert_select "#{a}[data-track-options='{\"dimension28\":\"2\",\"dimension29\":\"Link 2\"}']", text: "Link 2"
end

it "renders a document list without links" do
Expand All @@ -187,10 +187,10 @@ def component_name
],
)

span = "span.gem-c-document-list__item-title"
div = "div.gem-c-document-list__item-title"

assert_select "#{span}:first-of-type", text: "School behaviour and attendance: parental responsibility measures"
assert_select "#{span}:last-of-type", text: "Become an apprentice"
assert_select "#{div}:first-of-type", text: "School behaviour and attendance: parental responsibility measures"
assert_select "#{div}:last-of-type", text: "Become an apprentice"
end

it "adds branding correctly" do
Expand All @@ -211,7 +211,7 @@ def component_name
)

assert_select ".gem-c-document-list__item.brand--attorney-generals-office"
assert_select ".gem-c-document-list .gem-c-document-list__item-title.brand__color"
assert_select ".gem-c-document-list .gem-c-document-list__item-title .brand__color"
end

it "does not wrap link in heading element if no description or metadata provided" do
Expand Down Expand Up @@ -503,7 +503,7 @@ def component_name
],
)

assert_select ".gem-c-document-list__item-title[lang=\"cy\"]", text: "Tryloywder Uwch Staff Ysgrifennydd Gwladol Cymru Ionawr-Mawrth 2020"
assert_select ".gem-c-document-list__item-title a[lang=\"cy\"]", text: "Tryloywder Uwch Staff Ysgrifennydd Gwladol Cymru Ionawr-Mawrth 2020"
assert_select ".gem-c-document-list__attribute[lang=\"cy\"]", text: "Data tryloywder"
assert_select ".gem-c-document-list__attribute:not([lang=\"cy\"])", text: "English text"
end
Expand Down

0 comments on commit 42e105a

Please sign in to comment.