govuk_publishing_components 28.2.0 → 28.6.0

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -6,6 +6,7 @@ $chevron-indent-spacing: 7px;
 $black-bar-height: 50px;
 $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
+$button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
 @mixin chevron($colour, $update: false) {
   @if ($update == true) {
@@ -18,7 +19,7 @@ $pseudo-underline-height: 3px;
     content: "";
     display: inline-block;
     height: 8px;
-    margin: 0 8px 0 2px;
+    margin: 0 10px 0 2px;
     vertical-align: middle;
     width: 8px;
   }
@@ -172,6 +173,15 @@ $pseudo-underline-height: 3px;
   @include govuk-media-query($from: "desktop") {
     border-bottom: 0;
     padding: 0;
+
+    &:first-of-type {
+      margin-right: -1px;
+
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        border-left: 1px solid $button-pipe-colour;
+        border-right: 1px solid $button-pipe-colour;
+      }
+    }
   }
 }
 
@@ -313,22 +323,28 @@ $pseudo-underline-height: 3px;
   padding: 0;
 
   @include focus-not-focus-visible {
-    &:before {
-      @include chevron($govuk-link-colour);
+    .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      &:before {
+        @include chevron($govuk-link-colour);
+      }
     }
   }
 
   @include focus-not-focus-visible {
     &:hover {
-      &:before {
-        @include chevron($govuk-link-hover-colour, true);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        &:before {
+          @include chevron($govuk-link-hover-colour, true);
+        }
       }
     }
   }
 
   &:focus {
-    &:before {
-      @include chevron($govuk-focus-text-colour, true);
+    .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      &:before {
+        @include chevron($govuk-focus-text-colour, true);
+      }
     }
   }
 
@@ -345,12 +361,15 @@ $pseudo-underline-height: 3px;
         font-size: govuk-px-to-rem(16px);
       }
       height: $black-bar-height;
-      padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(3) govuk-spacing(5);
       position: relative;
       text-decoration: none;
 
-      &:before {
-        @include chevron(govuk-colour("white"), true);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        border-color: $button-pipe-colour;
+
+        &:before {
+          @include chevron(govuk-colour("white"), true);
+        }
       }
     }
     @include focus-not-focus-visible {
@@ -362,8 +381,12 @@ $pseudo-underline-height: 3px;
           background: govuk-colour("mid-grey");
         }
 
-        &:before {
-          @include chevron(govuk-colour("mid-grey"), true);
+        .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+          border-color: $button-pipe-colour;
+
+          &:before {
+            @include chevron($button-pipe-colour, true);
+          }
         }
       }
     }
@@ -375,16 +398,22 @@ $pseudo-underline-height: 3px;
         background: $govuk-focus-text-colour;
       }
 
-      &:before {
-        @include chevron($govuk-focus-text-colour, true);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        border-color: $govuk-focus-colour;
+
+        &:before {
+          @include chevron($govuk-focus-text-colour, true);
+        }
       }
     }
   }
 
   &.gem-c-layout-super-navigation-header__open-button {
     @include focus-not-focus-visible {
-      &:before {
-        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+        &:before {
+          @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+        }
       }
     }
 
@@ -393,8 +422,13 @@ $pseudo-underline-height: 3px;
         background: govuk-colour("light-grey");
         color: $govuk-link-colour;
 
-        &:before {
-          @include chevron($govuk-link-colour, true);
+        // stylelint-disable max-nesting-depth
+        .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+          border-color: govuk-colour("light-grey");
+
+          &:before {
+            @include chevron($govuk-link-colour, true);
+          }
         }
 
         &:after {
@@ -406,8 +440,12 @@ $pseudo-underline-height: 3px;
         background-color: $govuk-focus-colour;
         color: $govuk-focus-text-colour;
 
-        &:before {
-          @include chevron($govuk-focus-text-colour, true);
+        .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+          border-color: $govuk-focus-colour;
+
+          &:before {
+            @include chevron($govuk-focus-text-colour, true);
+          }
         }
 
         &:after {
@@ -416,12 +454,20 @@ $pseudo-underline-height: 3px;
       }
     }
   }
+  // stylelint-enable max-nesting-depth
 
   .js-module-initialised & {
     @include govuk-link-style-no-underline;
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+  @include govuk-media-query($from: "desktop") {
+    display: inline-block;
+    padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) govuk-spacing(5);
+  }
+}
+
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
   &:link,
@@ -550,7 +596,7 @@ $pseudo-underline-height: 3px;
     box-shadow: none;
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      border-color: govuk-colour("white");
+      border-color: $button-pipe-colour;
       color: govuk-colour("white");
 
       @include govuk-media-query($from: 360px) {

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -1,5 +1,5 @@
-$share-button-width: 32px;
-$share-button-height: 32px;
+$share-button-width: 30px;
+$share-button-height: 30px;
 
 .gem-c-share-links__list {
   list-style: none;
@@ -12,11 +12,11 @@ $share-button-height: 32px;
   position: relative;
   display: inline-block;
   min-height: $share-button-height;
+  padding-top: govuk-spacing(1);
   padding-left: ($share-button-width + govuk-spacing(2));
   padding-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
   font-size: $share-button-height / 2;
-  line-height: $share-button-height;
 }
 
 .gem-c-share-links__link {

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -63,6 +63,54 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   padding: 3px 3px 0 0;
 }
 
+.gem-c-step-nav____title-text-focus {
+  margin-bottom: 13px;
+  display: inline-block;
+}
+
+// Create Chevron icon aligned with text
+.gem-c-step-nav__chevron {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  // Set size using rems to make the icon scale with text if user resizes text in their browser
+  width: govuk-px-to-rem(20px);
+  height: govuk-px-to-rem(20px);
+  border: govuk-px-to-rem(1px) solid;
+  border-radius: 50%;
+
+  vertical-align: text-top;
+
+  // Reduce size, alter alignment
+  .gem-c-step-nav--large & {
+    vertical-align: top;
+  }
+
+  // Create inner chevron arrow
+  &:after {
+    content: "";
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    bottom: govuk-px-to-rem(5px);
+    left: govuk-px-to-rem(6px);
+    width: govuk-px-to-rem(6px);
+    height: govuk-px-to-rem(6px);
+    -webkit-transform: rotate(-45deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
+    -ms-transform: rotate(-45deg); /* IE 9 */
+    transform: rotate(-45deg);
+    border-top: govuk-px-to-rem(2px) solid;
+    border-right: govuk-px-to-rem(2px) solid;
+  }
+}
+
+// Rotate icon to create "Down" version
+.gem-c-step-nav__chevron--down {
+  -webkit-transform: rotate(180deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
+  -ms-transform: rotate(180deg); /* IE 9 */
+  transform: rotate(180deg);
+}
+
 .gem-c-step-nav__button {
   color: $govuk-link-colour;
   cursor: pointer;
@@ -70,8 +118,43 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   border: 0;
   margin: 0;
 
+  &:hover {
+    background: govuk-colour("light-grey");
+    // Chevron icon interaction states
+    .gem-c-step-nav__chevron {
+      color: govuk-colour("black");
+      background: govuk-colour("black");
+    }
+
+    .gem-c-step-nav__chevron:after {
+      color: govuk-colour("light-grey");
+    }
+
+    .gem-c-step-nav__button-text {
+      color: $govuk-text-colour;
+    }
+  }
+
   &:focus {
-    @include govuk-focused-text;
+    outline: 0;
+    // Chevron icon interaction states
+    .gem-c-step-nav__chevron {
+      color: govuk-colour("black");
+      background: govuk-colour("black");
+    }
+
+    .gem-c-step-nav__chevron:after {
+      color: $govuk-focus-colour;
+    }
+
+    .gem-c-step-nav____title-text-focus,
+    .gem-c-step-nav__toggle-link-focus {
+      @include govuk-focused-text;
+    }
+
+    .gem-c-step-nav__toggle-link-focus {
+      padding-bottom: 2px;
+    }
   }
 }
 
@@ -90,42 +173,27 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   width: 100%;
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 1.4);
+    @include step-nav-font(19, $tablet-size: 24, $weight: bold);
 
     @include govuk-media_query($from: tablet) {
       padding-top: govuk-spacing(2);
     }
   }
-
-  &:focus {
-    box-shadow: 0 -4px govuk-colour("black");
-
-    .gem-c-step-nav__toggle-link {
-      color: govuk-colour("black");
-    }
-
-    @include step-nav-chevron-focus-state;
-  }
 }
 
 .gem-c-step-nav__button--controls {
-  @include step-nav-font(14, $line-height: 1);
+  @include step-nav-font(15);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
-  margin: .5em 0 1.5em;
-  padding: 0 0 govuk-spacing(1);
-
-  &:hover .gem-c-step-nav__button-text {
-    @include govuk-link-decoration;
-    @include govuk-link-hover-decoration;
-  }
+  margin: .5em 0 14px;
+  padding: govuk-spacing(1) 0 govuk-spacing(1);
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
+    @include step-nav-font(15, $tablet-size: 19);
   }
 
   &:focus {
-    @include step-nav-chevron-focus-state;
+    @include govuk-focused-text;
 
     .gem-c-step-nav__button-text {
       text-decoration: none;
@@ -133,32 +201,15 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   }
 }
 
-.gem-c-step-nav__title-text {
-  display: block;
-  margin-bottom: govuk-spacing(1);
-}
-
-.gem-c-step-nav__chevron {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: govuk-em(5, 14);
-
-  .gem-c-step-nav--large & {
-    margin-left: govuk-em(5, 16);
-  }
-
-  svg {
-    pointer-events: none;
-  }
-}
-
 .gem-c-step-nav__button-text {
   display: inline-block;
   text-align: left;
   min-width: govuk-em(35, 14);
+  margin-left: govuk-spacing(1);
 
   .gem-c-step-nav--large & {
     min-width: govuk-em(40, 16);
+    margin-left: govuk-spacing(1);
   }
 }
 
@@ -272,7 +323,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   border: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 25px, $tablet-line-height: 34px);
+    @include step-nav-font(16, $tablet-size: 19, $weight: bold, $line-height: 29px, $tablet-line-height: 34px);
   }
 
   .gem-c-step-nav__step--active & {
@@ -335,18 +386,6 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--active & {
     cursor: pointer;
   }
-
-  &:hover {
-    .gem-c-step-nav__button:not(:focus),
-    .gem-c-step-nav__circle {
-      color: $govuk-link-colour;
-    }
-
-    .gem-c-step-nav__button-text {
-      @include govuk-link-decoration;
-      @include govuk-link-hover-decoration;
-    }
-  }
 }
 
 .gem-c-step-nav__title {
@@ -360,14 +399,14 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__toggle-link {
-  @include step-nav-font(14, $line-height: 1.2);
+  @include step-nav-font(15, $line-height: 1.2);
   display: block;
   color: $govuk-link-colour;
   text-transform: capitalize;
   padding-bottom: govuk-spacing(6);
 
   .gem-c-step-nav--large & {
-    @include step-nav-font(14, $tablet-size: 16, $line-height: 1.2);
+    @include step-nav-font(15, $tablet-size: 19, $line-height: 1.2);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss

@@ -6,34 +6,23 @@
 @import "../accordion";
 
 // Open all of the accordion sections.
-.gem-c-accordion__section-content {
+.govuk-accordion__section-content {
   display: block !important; // stylelint-disable-line declaration-no-important
 }
 
 // Change the colour from the blue link colour to black.
-.gem-c-accordion__section-button {
+.govuk-accordion__section-button {
   color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important
 }
 
-// Removing spacing
-.gem-c-accordion__section-header {
-  padding-bottom: govuk-spacing(1);
-}
-
 // Change the summary subheading size.
-.gem-c-accordion__section-summary {
+.govuk-accordion__section-summary {
   @include govuk-typography-common;
   @include govuk-typography-responsive($size: 16, $important: true);
 }
 
-// Hide the unusable "Show all sections" button and the "Chevron" icons.
-.gem-c-accordion__open-all,
-.gem-c-accordion__icon,
-.gem-c-accordion__toggle-link {
-  display: none !important; // stylelint-disable-line declaration-no-important
-}
-
-// Hide all hidden content
-.gem-c-accordion .govuk-visually-hidden {
+// Hide the unusable "Open all" button and the "+" icons.
+.govuk-accordion__open-all,
+.govuk-accordion__icon {
   display: none !important; // stylelint-disable-line declaration-no-important
 }

data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss

@@ -17,12 +17,3 @@ $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 $gem-hover-dark-background: #dddcdb;
-
-$govuk-colours-organisations: map-merge(
-  $govuk-colours-organisations,
-  (
-    "department-for-levelling-up-housing-and-communities": (
-      colour: #012169,
-    ),
-  )
-);

data/app/views/govuk_publishing_components/components/_accordion.html.erb

@@ -4,11 +4,9 @@
 
   id ||= "default-id-#{SecureRandom.hex(4)}"
   items ||= []
-  condensed ||= false
   anchor_navigation ||= false
 
-  accordion_classes = %w(gem-c-accordion)
-  accordion_classes << 'gem-c-accordion--condensed' if condensed
+  accordion_classes = %w(gem-c-accordion govuk-accordion)
   accordion_classes << (shared_helper.get_margin_bottom)
 
   translations = {
@@ -22,7 +20,7 @@
   locales = {}
 
   data_attributes ||= {}
-  data_attributes[:module] = 'gem-accordion'
+  data_attributes[:module] = 'govuk-accordion gem-accordion'
   data_attributes[:anchor_navigation] = anchor_navigation
 
   translations.each do |key, translation|
@@ -39,27 +37,44 @@
       data_attributes[:locale] = unique_locales[0]
     end
   end
+
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
     <% items.each_with_index do |item, i| %>
       <%
+        # The GOVUK Frontend JavaScript for this component 
+        # uses a loop starting at 1 for accessing heading ID values, 
+        # hence the increment below
         index = i + 1
 
-        section_classes = %w(gem-c-accordion__section)
-        section_classes << 'gem-c-accordion__section--expanded' if item[:expanded]
+        item[:data_attributes] ||= nil
 
-        summary_classes = %w(gem-c-accordion__section-summary govuk-body)
-      %>
+        section_classes = %w(govuk-accordion__section)
+        section_classes << 'govuk-accordion__section--expanded' if item[:expanded]
 
-      <%= tag.section(class: section_classes) do %>
-        <div class="gem-c-accordion__section-header">
-          <%= content_tag(shared_helper.get_heading_level, class: 'gem-c-accordion__section-heading', id: item[:heading][:id]) do %>
-            <%= tag.span(item[:heading][:text], id: "#{id}-heading-#{index}", data: item[:data_attributes], class: 'gem-c-accordion__section-button') %>
-          <% end %>
+        summary_classes = %w(govuk-accordion__section-summary govuk-body)
+      %>
+      <%= tag.div(class: section_classes) do %>
+        <%= tag.div(class: "govuk-accordion__section-header") do %>
+          <%=
+            content_tag(
+              shared_helper.get_heading_level,
+              content_tag(
+                'span', 
+                item[:heading][:text], 
+                class: "govuk-accordion__section-button",
+                id: "#{id}-heading-#{index}"
+                
+              ),
+              class: "govuk-accordion__section-heading",
+              id: item[:heading][:id],
+              data: item[:data_attributes]
+            )
+          %>
           <%= tag.div(item[:summary][:text], id: "#{id}-summary-#{index}", class: summary_classes) if item[:summary].present? %>
-        </div>
-        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "gem-c-accordion__section-content", 'aria-label': "#{item[:heading][:text]}") %>
+        <% end %>
+        <%= tag.div(item[:content][:html], id: "#{id}-content-#{index}", class: "govuk-accordion__section-content", 'aria-labelledby': "#{id}-heading-#{index}") %>
       <% end %>
     <% end %>
   <% end %>

data/app/views/govuk_publishing_components/components/_action_link.html.erb

@@ -33,7 +33,7 @@
   css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext
   css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
-  css_classes << (shared_helper.get_margin_bottom)
+  css_classes << shared_helper.get_margin_bottom
 
   link_classes = %w(govuk-link gem-c-action-link__link)
   link_classes << shared_helper.classes if classes

data/app/views/govuk_publishing_components/components/_big_number.html.erb

@@ -1,7 +1,8 @@
 <%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  big_number_helper = GovukPublishingComponents::Presenters::BigNumberHelper.new(local_assigns)
 
-  number ||= nil
+  number ||= false
   label ||= nil
   href ||= nil
   data_attributes ||= nil
@@ -9,17 +10,20 @@
   classes = ["gem-c-big-number"]
   classes << shared_helper.get_margin_bottom
 
-  value_classes = ["gem-c-big-number__value"]
-  
-  if label.nil? && href
-    value_classes << "gem-c-big-number__value--decorated"
-  end
-
+  value_classes = big_number_helper.value_classes
 %>
 <% if number %>
   <% big_number_value = capture do %>
     <%= tag.span class: value_classes, data: href ? nil : data_attributes do %>
-      <%= number %>
+      <%
+        # The below check is to account for small symbols awkwardly sitting above the baseline in our typeface and adjust them to sit at the baseline for the purpose of visual harmony
+        # Currently the only small symbol used with big numbers are pluses so they are specifically applied in the below code
+      %>
+      <% if big_number_helper.number_has_plus_suffix? %>
+        <%= number[0...-1] %><%= tag.span "+", class: "gem-c-big-number__suffix" %>
+      <% else %>
+        <%= number %>
+      <% end %>
     <% end %>
 
     <% unless label.nil? %>

data/app/views/govuk_publishing_components/components/_button.html.erb

@@ -7,7 +7,7 @@
 
 <% start_button_text = capture do %>
   <%= button.text %>
-  <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+  <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true">
     <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
   </svg>
 <% end %>

data/app/views/govuk_publishing_components/components/_character_count.html.erb

@@ -17,8 +17,8 @@
 
     <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %>
 
-    <span id="<%= id %>-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
+    <div id="<%= id %>-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
       <%= t("components.character_count.body", number: maxlength || maxwords, type: maxwords ? t("components.character_count.type.words") : t("components.character_count.type.characters")) %>
-    </span>
+    </div>
   <% end %>
 <% end %>

data/app/views/govuk_publishing_components/components/_checkboxes.html.erb

@@ -15,11 +15,11 @@
         <% end %>
 
         <% if cb_helper.hint_text %>
-          <%= tag.span cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
+          <%= tag.div cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
         <% end %>
 
         <% if cb_helper.error %>
-          <%= tag.span error, id: "#{id}-error", class: "govuk-error-message" %>
+          <%= tag.p error, id: "#{id}-error", class: "govuk-error-message" %>
         <% end %>
 
         <%= tag.ul class: cb_helper.list_classes, data: {

data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb

@@ -27,8 +27,4 @@
   <% if navigation.show_brexit_cta? %>
     <%= render 'govuk_publishing_components/components/contextual_sidebar/brexit_cta', content_item: content_item %>
   <% end %>
-
-  <% if navigation.show_covid_booster_cta? %>
-    <%= render 'govuk_publishing_components/components/contextual_sidebar/covid_cta', content_item: content_item %>
-  <% end %>
 </div>

data/app/views/govuk_publishing_components/components/_details.html.erb

@@ -4,7 +4,7 @@
   open ||= nil
   margin_bottom ||= 3
   css_classes = %w(gem-c-details govuk-details)
-  css_classes << (shared_helper.get_margin_bottom)
+  css_classes << shared_helper.get_margin_bottom
 
   details_data_attributes = {}
   details_data_attributes[:module] = 'govuk-details gem-details'

data/app/views/govuk_publishing_components/components/_error_message.html.erb

@@ -10,6 +10,6 @@
     text = raw(errors.join("<br />"))
   end
 %>
-<%= tag.span id: id, class: css_classes do %>
+<%= tag.p id: id, class: css_classes do %>
   <span class="govuk-visually-hidden">Error:</span> <%= text %>
 <% end %>