Merge pull request #3638 from alphagov/move-breadcrumbs-out-of-main-o…

…n-taxons Move breadcrumbs out of the `<main>` landmark on taxons to fix a WCAG fail
alphagov · Jun 11, 2024 · 1b84b5b · 1b84b5b
2 parents 011280b + 75071c5
commit 1b84b5b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/app/assets/stylesheets/views/_taxons.scss b/app/assets/stylesheets/views/_taxons.scss
@@ -8,6 +8,15 @@
   }
 }
 
+.taxon-page__breadcrumbs-wrapper {
+  background-color: govuk-colour("blue");
+  padding: govuk-spacing(3) 0 govuk-spacing(4);
+
+  @include govuk-media-query($from: tablet) {
+    padding-bottom: govuk-spacing(8);
+  }
+}
+
 .taxon-page__email-link-wrapper {
   background-color: govuk-colour("light-grey");
   margin-top: -(govuk-spacing(6));

diff --git a/app/views/taxons/_common.html.erb b/app/views/taxons/_common.html.erb
@@ -1,4 +1,3 @@
-<% content_for :is_full_width_header, true %>
 <% content_for :title, presented_taxon.title %>
 <% content_for :meta_tags do %>
   <meta name="robots" content="noindex">
@@ -10,6 +9,17 @@
   } %>
 <% end %>
 
+<% content_for :breadcrumbs do %>
+  <div class="taxon-page__breadcrumbs-wrapper">
+    <div class="govuk-width-container">
+      <%= render 'govuk_publishing_components/components/breadcrumbs', {
+        breadcrumbs: GovukPublishingComponents::AppHelpers::TaxonBreadcrumbs.new(@content_item).breadcrumbs,
+        collapse_on_mobile: true,
+        inverse: true
+      } %>
+    </div>
+  </div>
+<% end %>
 <%= render partial: 'page_header', locals: { presented_taxon: presented_taxon } %>
 
 <% if taxon_is_live?(presented_taxon) %>

diff --git a/app/views/taxons/_page_header.html.erb b/app/views/taxons/_page_header.html.erb
@@ -1,17 +1,15 @@
-<%= render "govuk_publishing_components/components/inverse_header", { full_width: true } do %>
+<%= render "govuk_publishing_components/components/inverse_header", { 
+  full_width: true,         
+  padding_top: false
+ } do %>
   <div class="govuk-width-container">
-    <%= render 'govuk_publishing_components/components/breadcrumbs', {
-      breadcrumbs: GovukPublishingComponents::AppHelpers::TaxonBreadcrumbs.new(@content_item).breadcrumbs,
-      collapse_on_mobile: true,
-      inverse: true
-    } %>
-
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <%= render "govuk_publishing_components/components/title", {
           title: presented_taxon.title,
           average_title_length: 'long',
-          inverse: true
+          inverse: true,
+          margin_top: 0
         } %>
 
         <%= render 'govuk_publishing_components/components/lead_paragraph', {