From 129839772a355b01b5ed3eb3a615721bd125b7db Mon Sep 17 00:00:00 2001
From: Rebecca Pearce <17481621+beccapearce@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:54:04 +0100
Subject: [PATCH] Prevent hyphens being read out by screen readers

Use the publishing components `list` to render corporate information page
links on the worldwide_organisation show page.

this component will stop the hyphens in lists from being read out by
screenreaders by replacing them with bullet points.

Also added a method to return the corporate information pages as a list
of hyperlinks (as expected by the component).
---
 .../views/_worldwide-organisation.scss        | 22 -------------------
 .../worldwide_organisation_presenter.rb       | 12 +++++-----
 .../worldwide_organisation.html.erb           | 11 ++++------
 3 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/views/_worldwide-organisation.scss b/app/assets/stylesheets/views/_worldwide-organisation.scss
index 932deedc6..71ecbaf8c 100644
--- a/app/assets/stylesheets/views/_worldwide-organisation.scss
+++ b/app/assets/stylesheets/views/_worldwide-organisation.scss
@@ -58,25 +58,3 @@
     }
   }
 }
-
-.corporate-information__sub-navigation {
-  ul {
-    padding-inline-start: 0;
-  }
-
-  li {
-    @media (min-width: 1px) { // stylelint-disable-line media-feature-range-notation
-      list-style: none;
-      padding-left: $govuk-gutter-half;
-      @include govuk-responsive-padding(1, "top");
-
-      &:before { // stylelint-disable-line selector-pseudo-element-colon-notation
-        content: "-";
-        position: relative;
-        float: left;
-        width: $govuk-gutter-half;
-        margin-left: $govuk-gutter-half * -1;
-      }
-    }
-  }
-}
diff --git a/app/presenters/worldwide_organisation_presenter.rb b/app/presenters/worldwide_organisation_presenter.rb
index abece5447..c0bdab71d 100644
--- a/app/presenters/worldwide_organisation_presenter.rb
+++ b/app/presenters/worldwide_organisation_presenter.rb
@@ -99,21 +99,19 @@ def home_page_offices
   end
 
   def show_corporate_info_section?
-    corporate_information_pages.any? || secondary_corporate_information.present?
+    corporate_information_pages.present? || secondary_corporate_information.present?
   end
 
   def corporate_information_pages
     cips = content_item.dig("links", "corporate_information_pages")
-    return [] if cips.blank?
+    return if cips.blank?
 
     ordered_cips = content_item.dig("details", "ordered_corporate_information_pages")
-    return [] if ordered_cips.blank?
+    return if ordered_cips.blank?
 
     ordered_cips.map do |cip|
-      {
-        text: cip["title"],
-        url: cips.find { |cp| cp["content_id"] == cip["content_id"] }["web_url"],
-      }
+      link = cips.find { |cp| cp["content_id"] == cip["content_id"] }["web_url"]
+      link_to(cip["title"], link, class: "govuk-link").html_safe
     end
   end
 
diff --git a/app/views/content_items/worldwide_organisation.html.erb b/app/views/content_items/worldwide_organisation.html.erb
index 405ca9215..189d3141e 100644
--- a/app/views/content_items/worldwide_organisation.html.erb
+++ b/app/views/content_items/worldwide_organisation.html.erb
@@ -116,13 +116,10 @@
     } %>
 
     <% if @content_item.corporate_information_pages.any? %>
-      <nav class="group corporate-information__sub-navigation" role="navigation">
-        <ul class="govuk-list">
-          <% @content_item.corporate_information_pages.each do |cip| %>
-            <li lang="<%= @content_item.locale %>"><%= link_to cip[:text], cip[:url], class: "govuk-link" %></li>
-          <% end %>
-        </ul>
-      </nav>
+      <%= render "govuk_publishing_components/components/list", {
+        visible_counters: true,
+        items: @content_item.corporate_information_pages
+      } %>
     <% end %>
 
     <% if @content_item.secondary_corporate_information.present? %>