From a26e4aef94c1f91490816072b4ea061f8e1b8630 Mon Sep 17 00:00:00 2001 From: Jon Kirwan <87758239+jon-kirwan@users.noreply.github.com> Date: Tue, 4 Jul 2023 10:29:57 +0100 Subject: [PATCH] Add div wrapper and assign `gem-c-document-list__item-title` --- CHANGELOG.md | 1 + .../components/_document-list.scss | 4 +- .../components/_document_list.html.erb | 56 ++++++++++--------- spec/components/document_list_spec.rb | 40 ++++++------- 4 files changed, 53 insertions(+), 48 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 874c3f8026..51bdc8ea5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss index 2ab4410134..89e5b2731f 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss @@ -25,7 +25,9 @@ .gem-c-document-list--no-underline { .gem-c-document-list__item-title { - text-decoration: none; + .govuk-link { + text-decoration: none; + } } } diff --git a/app/views/govuk_publishing_components/components/_document_list.html.erb b/app/views/govuk_publishing_components/components/_document_list.html.erb index 4267bcd65f..76c5ef6057 100644 --- a/app/views/govuk_publishing_components/components/_document_list.html.erb +++ b/app/views/govuk_publishing_components/components/_document_list.html.erb @@ -29,35 +29,37 @@

<%= item[:highlight_text] %>

<% 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] %> <%= item[:link][:context] %> diff --git a/spec/components/document_list_spec.rb b/spec/components/document_list_spec.rb index 2f0e4e1126..2f316d5fe5 100644 --- a/spec/components/document_list_spec.rb +++ b/spec/components/document_list_spec.rb @@ -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']" @@ -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 @@ -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 @@ -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 @@ -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 @@ -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