Merge pull request #3338 from alphagov/2857-fix-breadcrumbs-wcag-fail…

…s-in-government-frontend-m-l Fix breadcrumbs WCAG fails in government-frontend
alphagov · Sep 24, 2024 · 99b972c · 99b972c
2 parents aeeb9a5 + 62fb680
commit 99b972c
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 87 deletions.
diff --git a/app/views/content_items/_service_manual_breadcrumbs.html.erb b/app/views/content_items/_service_manual_breadcrumbs.html.erb
@@ -0,0 +1,8 @@
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
+    <%= render "govuk_publishing_components/components/breadcrumbs", {
+      breadcrumbs: @content_item.breadcrumbs,
+      collapse_on_mobile: true
+    } %>
+  </div>
+</div>
diff --git a/app/views/content_items/hmrc_manual_section.html.erb b/app/views/content_items/hmrc_manual_section.html.erb
@@ -7,6 +7,7 @@
     green_background: true,
     type: I18n.t("manuals.hmrc_manual_type"),
   } %>
+  <%= render partial: "content_items/manuals/breadcrumbs" %>
 <% end %>
 
 <%= render "content_items/manuals/manual_section_layout" do %>
@@ -27,4 +28,4 @@
   <div class="govuk-grid-column-full">
     <%= render "govuk_publishing_components/components/previous_and_next_navigation", @content_item.previous_and_next_links %>
   </div>
-<% end %>
+<% end %>
diff --git a/app/views/content_items/manual_section.html.erb b/app/views/content_items/manual_section.html.erb
@@ -3,6 +3,7 @@
   <%= render "content_items/manuals/header", {
     content_item: @content_item, heading_level: 1, margin_bottom: 6,
   } %>
+  <%= render partial: "content_items/manuals/breadcrumbs" %>
 <% end %>
 
 <%= render "content_items/manuals/manual_section_layout", { show_contents: true } do %>

diff --git a/app/views/content_items/manuals/_breadcrumbs.html.erb b/app/views/content_items/manuals/_breadcrumbs.html.erb
@@ -0,0 +1,11 @@
+<% if @content_item.breadcrumbs.any? %>
+  <%= render "govuk_publishing_components/components/breadcrumbs", {
+          border: "bottom",
+          breadcrumbs: @content_item.breadcrumbs,
+          collapse_on_mobile: false } %>
+<% else %>
+  <%= render "govuk_publishing_components/components/back_link", {
+    text: t("manuals.breadcrumb_contents"),
+    href: @content_item.base_path
+  } %>
+<% end %>
diff --git a/app/views/content_items/manuals/_manual_section_layout.html.erb b/app/views/content_items/manuals/_manual_section_layout.html.erb
@@ -1,17 +1,6 @@
 <% show_contents ||= false %>
 
 <% content_for :main do %>
-  <% if @content_item.breadcrumbs.any? %>
-    <%= render "govuk_publishing_components/components/breadcrumbs", {
-           border: "bottom",
-           breadcrumbs: @content_item.breadcrumbs,
-           collapse_on_mobile: false } %>
-  <% else %>
-    <%= render "govuk_publishing_components/components/back_link", {
-      text: t("manuals.breadcrumb_contents"),
-      href: @content_item.base_path
-    } %>
-  <% end %>
   <div id="manuals-frontend" class="manuals-frontend-body">
     <% if show_contents %>
       <%= render "govuk_publishing_components/components/contents_list", {

diff --git a/app/views/content_items/service_manual_guide.html.erb b/app/views/content_items/service_manual_guide.html.erb
@@ -11,12 +11,13 @@
   <%= render "shared/custom_phase_message", phase: @content_item.phase %>
 <% end %>
 
-<div class="govuk-width-container">
-  <%= render "govuk_publishing_components/components/breadcrumbs", {
-    breadcrumbs: @content_item.breadcrumbs,
-    collapse_on_mobile: true
-  } %>
+<% content_for :header do %>
+  <div class="govuk-width-container">
+    <%= render partial: "content_items/service_manual_breadcrumbs" %>
+  </div>
+<% end %>
 
+<div class="govuk-width-container">
   <!-- Page title and contact -->
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/content_items/service_manual_service_standard.html.erb b/app/views/content_items/service_manual_service_standard.html.erb
@@ -4,12 +4,14 @@
 <% content_for :phase_message do %>
   <%= render 'shared/custom_phase_message', phase: @content_item.phase %>
 <% end %>
-<div class="govuk-width-container">
-  <%= render "govuk_publishing_components/components/breadcrumbs", {
-    breadcrumbs: @content_item.breadcrumbs,
-    collapse_on_mobile: true
-  } %>
 
+<% content_for :header do %>
+  <div class="govuk-width-container">
+    <%= render partial: "content_items/service_manual_breadcrumbs" %>
+  </div>
+<% end %>
+
+<div class="govuk-width-container">
   <!-- Page title and contact -->
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -62,4 +64,4 @@
       </aside>
     </div>
   </div>
-</div>
+</div>
diff --git a/app/views/content_items/service_manual_topic.html.erb b/app/views/content_items/service_manual_topic.html.erb
@@ -5,10 +5,9 @@
   <%= render 'shared/custom_phase_message', phase: @content_item.phase %>
 <% end %>
 
-  <%= render "govuk_publishing_components/components/breadcrumbs", {
-    breadcrumbs: @content_item.breadcrumbs,
-    collapse_on_mobile: true
-  } %>
+<% content_for :header do %>
+  <%= render partial: "content_items/service_manual_breadcrumbs" %>
+<% end %>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/histories/10_downing_street.html.erb b/app/views/histories/10_downing_street.html.erb
@@ -1,20 +1,13 @@
+<% content_for :header do %>
+  <%= render partial: "histories/breadcrumbs" %>
+<% end %>
+
 <header class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <%= render "govuk_publishing_components/components/breadcrumbs", {
-      breadcrumbs: [
-        {
-          title: "Home",
-          url: "/",
-        },
-        {
-          title: "History of the UK Government",
-          url: "/government/history",
-        },
-      ]
-    } %>
     <%= render "govuk_publishing_components/components/title", {
       context: "History",
       title: "10 Downing Street",
+      margin_top: 0,
     } %>
   </div>
 </header>

diff --git a/app/views/histories/11_downing_street.html.erb b/app/views/histories/11_downing_street.html.erb
@@ -1,20 +1,13 @@
+<% content_for :header do %>
+  <%= render partial: "histories/breadcrumbs" %>
+<% end %>
+
 <header class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <%= render "govuk_publishing_components/components/breadcrumbs", {
-      breadcrumbs: [
-        {
-          title: "Home",
-          url: "/",
-        },
-        {
-          title: "History of the UK Government",
-          url: "/government/history",
-        },
-      ]
-    } %>
     <%= render "govuk_publishing_components/components/title", {
       context: "History",
       title: "11 Downing Street",
+      margin_top: 0,
     } %>
   </div>
 </header>

diff --git a/app/views/histories/1_horse_guards_road.html.erb b/app/views/histories/1_horse_guards_road.html.erb
@@ -1,20 +1,13 @@
+<% content_for :header do %>
+  <%= render partial: "histories/breadcrumbs" %>
+<% end %>
+
 <header class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <%= render "govuk_publishing_components/components/breadcrumbs", {
-      breadcrumbs: [
-        {
-          title: "Home",
-          url: "/",
-        },
-        {
-          title: "History of the UK Government",
-          url: "/government/history",
-        },
-      ]
-    } %>
     <%= render "govuk_publishing_components/components/title", {
       context: "History",
       title: "1 Horse Guards Road",
+      margin_top: 0,
     } %>
   </div>
 </header>

diff --git a/app/views/histories/_breadcrumbs.html.erb b/app/views/histories/_breadcrumbs.html.erb
@@ -0,0 +1,14 @@
+<div class="govuk-!-margin-bottom-8">
+  <%= render "govuk_publishing_components/components/breadcrumbs", {
+    breadcrumbs: [
+      {
+        title: "Home",
+        url: "/",
+      },
+      {
+        title: "History of the UK Government",
+        url: "/government/history",
+      },
+    ]
+  } %>
+</div>
diff --git a/app/views/histories/king_charles_street.html.erb b/app/views/histories/king_charles_street.html.erb
@@ -1,20 +1,13 @@
+<% content_for :header do %>
+  <%= render partial: "histories/breadcrumbs" %>
+<% end %>
+
 <header class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <%= render "govuk_publishing_components/components/breadcrumbs", {
-      breadcrumbs: [
-        {
-          title: "Home",
-          url: "/",
-        },
-        {
-          title: "History of the UK Government",
-          url: "/government/history",
-        },
-      ]
-    } %>
     <%= render "govuk_publishing_components/components/title", {
       context: "History",
       title: "King Charles Street",
+      margin_top: 0,
     } %>
   </div>
 </header>

diff --git a/app/views/histories/lancaster_house.html.erb b/app/views/histories/lancaster_house.html.erb
@@ -1,20 +1,13 @@
+<% content_for :header do %>
+  <%= render partial: "histories/breadcrumbs" %>
+<% end %>
+
 <header class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <%= render "govuk_publishing_components/components/breadcrumbs", {
-      breadcrumbs: [
-        {
-          title: "Home",
-          url: "/",
-        },
-        {
-          title: "History of the UK Government",
-          url: "/government/history",
-        },
-      ]
-    } %>
     <%= render "govuk_publishing_components/components/title", {
       context:"History",
       title: "Lancaster House",
+      margin_top: 0,
     } %>
   </div>
 </header>