From 97385e7395def937dfb759c4a71c9de4666ba8b5 Mon Sep 17 00:00:00 2001
From: Mateusz Grotek <mateusz.grotek@digital.cabinet-office.gov.uk>
Date: Mon, 9 Sep 2024 16:54:24 +0100
Subject: [PATCH] Fix breadcrumbs a11y issue in the covid page

---
 app/assets/stylesheets/views/_covid.scss       | 18 ++++++++++++++----
 .../landing_page/_page_header.html.erb         | 14 +++++++-------
 .../components/shared/_breadcrumbs.html.erb    | 13 +++++++++++++
 .../components/shared/_meta_tags.html.erb      |  1 -
 app/views/layouts/application.html.erb         |  2 +-
 5 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 app/views/coronavirus_landing_page/components/shared/_breadcrumbs.html.erb

diff --git a/app/assets/stylesheets/views/_covid.scss b/app/assets/stylesheets/views/_covid.scss
index 14624a588..2d746c606 100644
--- a/app/assets/stylesheets/views/_covid.scss
+++ b/app/assets/stylesheets/views/_covid.scss
@@ -15,27 +15,37 @@ $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 bleeding the margins
+}
+
 .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");
+  padding-top: govuk-spacing(1);
+
+  @include govuk-media-query($from: "tablet") {
+    padding-top: govuk-spacing(4);
+  }
 }
 
 .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
index c233494e6..9ab05a14a 100644
--- 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,17 +1,17 @@
+<% 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", {
           title: raw(title),
           inverse: true,
-          margin_top: 4
+          margin_top: 0
         } %>
       </div>
     </div>
diff --git a/app/views/coronavirus_landing_page/components/shared/_breadcrumbs.html.erb b/app/views/coronavirus_landing_page/components/shared/_breadcrumbs.html.erb
new file mode 100644
index 000000000..80ec13fcc
--- /dev/null
+++ 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
index d298957a6..180fcbce4 100644
--- 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
index 6065ce9c7..57278b0a6 100644
--- 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 %>