Use publishing component to render contents list on service manual guide

When the contents list on service manual guides was being read out by screen readers it would read the dashes in the contents list as "en dash" This was not desired behaviour and has been fixed in the govuk-publishing-components. This uses the fixed publishing component to take advantage of the fixed behaviour. Using the new publishing component also makes the page more consistent with other pages within the app.
alphagov · Apr 5, 2024 · 7be2f35 · 7be2f35
1 parent 044bdfb
commit 7be2f35
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 27 deletions.
diff --git a/app/presenters/service_manual_guide_presenter.rb b/app/presenters/service_manual_guide_presenter.rb
@@ -8,7 +8,7 @@ def body
 
   def header_links
     header_links = details.fetch("header_links", {})
-    Array(header_links).map { |h| ActiveSupport::HashWithIndifferentAccess.new(h) }
+    Array(header_links).map { |h| ActiveSupport::HashWithIndifferentAccess.new(h.transform_keys { |k| k == "title" ? "text" : k }) }
   end
 
   def content_owners

diff --git a/app/views/content_items/service_manual_guide.html.erb b/app/views/content_items/service_manual_guide.html.erb
@@ -54,32 +54,11 @@
   <div class="govuk-grid-row" data-module="highlight-active-section-heading">
     <div class="govuk-grid-column-one-third app-sticky-element">
       <!--  Page contents -->
-      <div class="page-contents js-page-contents">
-        <div class="govuk-!-margin-top-3">
-          <%= render "govuk_publishing_components/components/heading", {
-            text: "Page contents:",
-            heading_level: 2,
-            font_size: "s",
-            margin_bottom: 1,
-          } %>
-        </div>
-        <ul class="govuk-list app-page-contents__list"
-            data-module="ga4-link-tracker"
-            data-ga4-track-links-only
-            data-ga4-set-indexes
-            data-ga4-link="<%= {
-              event_name: "select_content",
-              type: "contents list",
-              section: "Page contents:"
-            }.to_json %>">
-          <% @content_item.header_links.each do |header_link| %>
-            <li class="govuk-body-s">
-              <%= link_to(header_link[:title], header_link[:href], class: 'govuk-link') %>
-            </li>
-          <% end %>
-        </ul>
-      </div>
-
+      <%= render "govuk_publishing_components/components/contents_list", {
+        underline_links: true,
+        contents: @content_item.header_links,
+        id: "contents"
+      } %>
     </div>
     <div class="govuk-grid-column-two-thirds">
       <div class="govspeak-wrapper govuk-!-padding-top-2">

diff --git a/test/presenters/service_manual_guide_presenter_test.rb b/test/presenters/service_manual_guide_presenter_test.rb
@@ -138,4 +138,8 @@ def schema_name
 
     assert_equal expected_history, presented_item.previous_changes
   end
+
+  test "#header_links returns a list of hrefs and text" do
+    assert_equal [{ "text" => "What is it, why it works and how to do it", "href" => "#what-is-it-why-it-works-and-how-to-do-it" }], presented_item.header_links
+  end
 end