Fix breadcrumbs a11y issue in the covid page

alphagov · Sep 9, 2024 · 30ade10 · 30ade10
1 parent 8403e63
commit 30ade10
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/app/assets/stylesheets/views/_covid.scss b/app/assets/stylesheets/views/_covid.scss
@@ -15,27 +15,33 @@ $c19-landing-page-header-background: govuk-colour("blue");
 
 .global-bar-present {
   @include govuk-media-query($from: desktop) {
-    .covid__page-header {
+    .covid__breadcrumb-wrapper {
       border-top: solid govuk-spacing(2) $c19-landing-page-header-background;
     }
   }
 
   @include govuk-media-query($until: desktop) {
-    .covid__page-header {
+    .covid__breadcrumb-wrapper {
       margin-top: govuk-spacing(-3);
     }
   }
 
-  .covid_page_header {
+  .covid__breadcrumb-wrapper {
     border-top: none;
   }
 }
 
+.covid__breadcrumb-wrapper {
+  background-color: $c19-landing-page-header-background;
+  border-top: solid govuk-spacing(2) $covid-yellow;
+  overflow: auto; // become a block formatting context to prevent margin collapsing
+}
+
 .covid__page-header {
   margin-bottom: govuk-spacing(8);
   background-color: $c19-landing-page-header-background;
-  border-top: solid govuk-spacing(2) $covid-yellow;
   color: govuk-colour("white");
+  overflow: auto; // become a block formatting context to prevent margin collapsing
 }
 
 .covid__page-header--business {

diff --git a/app/views/coronavirus_landing_page/components/landing_page/_page_header.html.erb b/app/views/coronavirus_landing_page/components/landing_page/_page_header.html.erb
@@ -1,11 +1,11 @@
+<% content_for :breadcrumbs do %>
+  <%= render 'coronavirus_landing_page/components/shared/breadcrumbs', {
+    breadcrumbs: breadcrumbs
+  } %>
+<% end %>
+
 <header class="covid__page-header covid__page-header--landing-page">
   <div class="govuk-width-container">
-    <%= render 'govuk_publishing_components/components/breadcrumbs', {
-      breadcrumbs: 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", {

diff --git a/app/views/coronavirus_landing_page/components/shared/_breadcrumbs.html.erb b/app/views/coronavirus_landing_page/components/shared/_breadcrumbs.html.erb
@@ -0,0 +1,13 @@
+<div class="covid__breadcrumb-wrapper">
+  <div class="govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-full">
+        <%= render 'govuk_publishing_components/components/breadcrumbs', {
+          breadcrumbs: breadcrumbs,
+          collapse_on_mobile: true,
+          inverse: true
+        } %>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/coronavirus_landing_page/components/shared/_meta_tags.html.erb b/app/views/coronavirus_landing_page/components/shared/_meta_tags.html.erb
@@ -2,7 +2,6 @@
   corona_opengraph_images ||= false
 %>
 
-<% content_for :is_full_width_header, true %>
 <% content_for :title, metadata[:title] %>
 <% content_for :meta_tags do %>
   <% page_url = File.join(request.base_url, request.path) %>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,7 +12,7 @@
 
 <% content_for :body do %>
   <%= yield :back_link %>
-  <% unless (content_for(:is_full_width_header) || content_for(:back_link)) %>
+  <% unless content_for(:back_link) %>
     <% if content_for?(:breadcrumbs) %>
       <%= yield :breadcrumbs %>
     <% else %>