govuk_publishing_components 28.5.0 → 28.6.0

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,12 +4,10 @@
 
   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 << shared_helper.get_margin_bottom
+  accordion_classes = %w(gem-c-accordion govuk-accordion)
+  accordion_classes << (shared_helper.get_margin_bottom)
 
   translations = {
     show_text: "components.accordion.show",
@@ -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/_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/_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 %>

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

@@ -14,7 +14,6 @@
   data: { module: "govuk-error-summary" }.merge(data_attributes),
   aria: { labelledby: title_id },
   role: "alert",
-  tabindex: -1,
   id: id,
 ) do %>
   <% if title %>

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

@@ -1,7 +1,18 @@
 <%
   id ||= "inset-text-#{SecureRandom.hex(4)}"
+  margin_top ||= 6
+  margin_bottom ||= 6
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new({
+    margin_top: margin_top,
+    margin_bottom: margin_bottom
+  })
+
+  classes = %w[gem-c-inset-text govuk-inset-text]
+  classes << shared_helper.get_margin_top
+  classes << shared_helper.get_margin_bottom
 %>
-<%= tag.div id: id, class: "gem-c-inset-text govuk-inset-text" do %>
+<%= tag.div id: id, class: classes do %>
   <% if defined? text %>
     <%= text %>
   <% elsif block_given? %>

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

@@ -72,7 +72,7 @@
             <% end %>
           </ul>
         <% end %>
-        <svg role="presentation" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
           <path
             fill="currentColor"
             d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"

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

@@ -11,7 +11,7 @@
   <%= tag.div class: "gem-c-modal-dialogue__overlay" %>
   <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
     <%= tag.div class: "gem-c-modal-dialogue__header" do %>
-      <svg role="presentation" focusable="false" class="gem-c-modal-dialogue__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="26" width="30">
+      <svg aria-hidden="true" focusable="false" class="gem-c-modal-dialogue__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="26" width="30">
         <path fill="currentColor" fill-rule="evenodd"
           d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
         <image src="<%= asset_path('govuk-logotype-crown.png') %>" class="gem-c-modal-dialogue__logotype-crown-fallback-image"></image>

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

@@ -122,7 +122,7 @@
           <% end %>
 
           <% if item[:conditional] %>
-            <%= tag.div item[:conditional], class:"govuk-radios__conditional govuk-radios__conditional--hidden", id: conditional_id %>
+            <%= tag.div item[:conditional], class:"govuk-radios__conditional govuk-radios__conditional--hidden govuk-body", id: conditional_id %>
           <% end %>
 
         <% end %>

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

@@ -2,4 +2,4 @@
   href ||= '#main-content'
   text ||= t('components.skip_link.text')
 %>
-<%= link_to(text, href, class: "gem-c-skip-link govuk-skip-link govuk-!-display-none-print") %>
+<%= link_to(text, href, class: "gem-c-skip-link govuk-skip-link govuk-!-display-none-print", data: { module: "govuk-skip-link" }) %>

data/app/views/govuk_publishing_components/components/docs/accordion.yml

@@ -296,11 +296,11 @@ examples:
             text: Writing well for the web
             id: writing-well-for-the-web
           content:
-            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
+            html: <p class="govuk-body">This is content for accordion 1 of 2</p><p class="govuk-body">This content contains a <a href="#anchor-nav-test" class="govuk-link">link</a></p>
         - heading:
             text: Writing well for specialists
           content:
-            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
+            html: <p class="govuk-body" id="anchor-nav-test">This is content for accordion 2 of 2</p>
         - heading:
             text: Know your audience
           content:
@@ -309,98 +309,3 @@ examples:
             text: How people read
           content:
             html: <p class="govuk-body">This is the content for How people read.</p>
-  condensed_layout:
-    description: |
-      This layout is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
-    data:
-      condensed: true
-      items:
-        - heading:
-            text: Understanding agile project management
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Agile and government services: an introduction</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Agile methods: an introduction</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Core principles of agile</a>
-                  </li>
-              </ul>'
-        - heading:
-            text: Working with agile methods
-          summary:
-            text: Workspaces, tools and techniques, user stories, planning.
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Creating an agile working environment</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Agile tools and techniques</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Set up a team wall</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Writing user stories</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Planning in agile</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Deciding on priorities</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Developing a roadmap</a>
-                  </li>
-              </ul>'
-        - heading:
-            text: Governing agile services
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Governance principles for agile service delivery</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Measuring and reporting progress</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Spend controls: check if you need approval to spend money on a service</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Spend controls: apply for approval to spend money on a service</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Spend controls: the new pipeline process</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Working across organisational boundaries</a>
-                  </li>
-              </ul>'
-        - heading:
-            text: Phases of an agile project
-          content:
-            html:
-              '<ul class="govuk-list">
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the discovery phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the alpha phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the beta phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">How the live phase works</a>
-                  </li>
-                  <li>
-                    <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
-                  </li>
-              </ul>'

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -816,7 +816,7 @@ examples:
       block: |
         <p>
           <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
-          <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
+          <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
         </p>
   image:
     data:

data/app/views/govuk_publishing_components/components/docs/inset_text.yml

@@ -18,3 +18,9 @@ examples:
           <h2 class="govuk-heading-m" id='heading'>To publish this step by step you need to</h2>
           <a class="govuk-link" href='/foo'>Check for broken links</a>
         </div>
+  with_custom_margins:
+    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having margin of 6 (30px) top and bottom.
+    data:
+      text: "When a failure occurs, you must submit logbook, landing and transhipment data manually to the UK Fisheries Call Centre each day and by no later than 23.59 UTC"
+      margin_top: 0
+      margin_bottom: 9

data/app/views/govuk_publishing_components/components/docs/share_links.yml

@@ -125,7 +125,7 @@ examples:
         },
         {
           href: '/email-share-link',
-          text: 'Share on email to someone you know',
+          text: 'Email',
           icon: 'email'
         },
         {

data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml

@@ -96,7 +96,7 @@ examples:
         }
       ]
   with_a_different_heading_level:
-    description: Steps have a H2 by default, but this can be changed. The heading level does not change any styling.
+    description: Steps have a `h2` by default, but this can be changed. The heading level does not change any styling.
     data:
       heading_level: 3
       steps: [
@@ -164,7 +164,7 @@ examples:
       ]
   remember_last_opened_step:
     description: |
-      If steps are opened their IDs are added to an array in sessionStorage, so that if the user returns to this page in the same session, those steps will be opened on page load. This option can technically be used together with the option to open a step by default, but this is not recommended as it could confuse users.
+      If steps are opened their IDs are added to an array in `sessionStorage`, so that if the user returns to this page in the same session, those steps will be opened on page load. This option can technically be used together with the option to open a step by default, but this is not recommended as it could confuse users.
     data:
       remember_last_step: true
       steps: [
@@ -192,9 +192,9 @@ examples:
       Links can have the following attributes:
 
       - style, an attribute on the parent list that controls its appearance. Defaults to optional but can be set to 'choice' (adds indent and bullets to the list)
-      - context, an optional text field to show some extra information after the link, usually a monetary value
-      - active, whether to make the link highlighted (to indicate the current page)
-      - highlight_step, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.
+      - `context`, an optional text field to show some extra information after the link, usually a monetary value
+      - `active`, whether to make the link highlighted (to indicate the current page)
+      - `highlight_step`, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.
     data:
       highlight_step: 2
       show_step: 2
@@ -338,11 +338,11 @@ examples:
 
       If a link is in a step by step navigation more than once and the user is on that page, the backend doesn't know which link to highlight, so it highlights both of them.
 
-      JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight after the new page loads. It uses the value of the tracking_id option to uniquely identify the current step nav in the session (if this is not passed to the component this may result in other step navs having the wrong link highlighted).
+      JavaScript is included in the component to solve this. It uses `sessionStorage` to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight after the new page loads. It uses the value of the `tracking_id` option to uniquely identify the current step nav in the session (if this is not passed to the component this may result in other step navs having the wrong link highlighted).
 
-      If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) only the first duplicate link will be highlighted. If that link is not in the active step, the JS makes the highlighted link's parent the active step. If there is no active step, the first active link will be highlighted (but there should always be an active step).
+      If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) only the first duplicate link will be highlighted. If that link is not in the active step, the JavaScript makes the highlighted link's parent the active step. If there is no active step, the first active link will be highlighted (but there should always be an active step).
 
-      The example below will show all non-external links highlighted if JS is disabled. In the real world no more than two or three links are likely to be highlighted at once.
+      The example below will show all non-external links highlighted if JavaScript is disabled. In the real world no more than two or three links are likely to be highlighted at once.
 
       Changes to the active step and highlighted link are also applied on click, if the user clicks one of the other links that is to the same page (they are amended by the component to be jump links to the top of the page). Open this example using the 'preview' link and try clicking on the 'internal' links to see how it behaves.
     data:
@@ -417,15 +417,15 @@ examples:
 
       The solution is to track the step by step journey the user is on.
 
-      This has been achieved by adding a query string to all of the internal links in the step by step that contains the content_id of the step by step.
+      This has been achieved by adding a query string to all of the internal links in the step by step that contains the `content_id` of the step by step.
 
-      For example, if the step by step contains a link to [/check-uk-visa](/check-uk-visa), the component will renders the link as [/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18](/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18)
+      For example, if the step by step contains a link to [/check-uk-visa](/check-uk-visa), the component will render the link as [/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18](/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18)
 
       As long as the user follows the links in the step by step (and not the inline links in the content), the component will know which step by step journey the user is on.
 
-      If the content item is part of multiple step by steps, the component fetches the content_id of the `active` step by step from the query string and expands that one. The other step by steps that the content item is part of are displayed as a list of titles under an "Also part of" heading.
+      If the content item is part of multiple step by steps, the component fetches the `content_id` of the `active` step by step from the query string and expands that one. The other step by steps that the content item is part of are displayed as a list of titles under an "Also part of" heading.
 
-      Additionally, if content designers have chosen to "hide" a step by step on a content page, but we can see that the user is following a step by step journey (the content_id of the step by step is in the querystring), the step by step will still be displayed and expanded in the sidebar, and the other step by steps that the content item is part of, but content designers have chosen to hide will also be displayed as a list of titles under an "Also part of heading".
+      Additionally, if content designers have chosen to "hide" a step by step on a content page, but we can see that the user is following a step by step journey (the `content_id` of the step by step is in the querystring), the step by step will still be displayed and expanded in the sidebar, and the other step by steps that the content item is part of, but content designers have chosen to hide will also be displayed as a list of titles under an "Also part of heading".
 
       In both cases, we never show more than 5 step by steps in the list.
 
@@ -523,7 +523,7 @@ examples:
     description: |
       Steps can be optional. This is controlled by two parameters, 'optional' and 'logic'.
 
-      - Optional steps used to have a dotted line down the side but this was removed as it confused users. In some cases we may still need to record if a step is optional, so if this parameter is applied, GA tracking events will have 'optional' appended to the end of the eventLabel.
+      - Optional steps used to have a dotted line down the side but this was removed as it confused users. In some cases we may still need to record if a step is optional, so if this parameter is applied, Google Analytics tracking events will have 'optional' appended to the end of the eventLabel.
       - Logic will change the number next to a step to the word 'and' or the word 'or'.
 
       If a step is optional this should be conveyed by the text within that step.

data/app/views/govuk_publishing_components/components/docs/tabs.yml

@@ -2,7 +2,7 @@ name: "Tabs (experimental)"
 description: "The tabs component lets users toggle between related sections of content."
 body: |
   This component is based on the [GOV.UK Design System tabs component](https://design-system.service.gov.uk/components/tabs/)
-  and is currently experimental. If using this component, please feed back any research findings to the Design System team](https://design-system.service.gov.uk/get-in-touch/).
+  and is currently experimental. If using this component, please feed back any research findings to the [GOV.UK Design System team](https://design-system.service.gov.uk/get-in-touch/).
 
   The tabs component lets users navigate between related sections of content on a single page,
   displaying one section at a time. Note that they are not intended to be used to navigate

data/app/views/govuk_publishing_components/components/docs/textarea.yml

@@ -83,7 +83,7 @@ examples:
         text: "How about a hint below?"
       name: "more-elements"
       block: |
-        <span class="govuk-hint">Here's a hint</span>
+        <div class="govuk-hint">Here's a hint</div>
   with_maxlength:
     data:
       label:

data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb

@@ -1,17 +1,17 @@
 <% navigation_aria_label ||= "Top level" %>
 
 <% if navigation_items.any? %>
-  <button
-    aria-controls="navigation"
-    aria-label="Show or hide Top Level Navigation"
-    class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
-    type="button"
-    data-button-name="menu"
-  >
-    <%= t("components.layout_header.menu") %>
-  </button>
-  <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
-    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
+  <%= tag.nav class: "gem-c-header__nav govuk-header__navigation govuk-header__navigation--end", aria: { label: navigation_aria_label } do %>
+    <button
+      aria-controls="navigation"
+      aria-label="Show or hide Top Level Navigation"
+      class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
+      type="button"
+      data-button-name="menu"
+    >
+      <%= t("components.layout_header.menu") %>
+    </button>
+    <ul id="navigation" class="govuk-header__navigation-list">
       <% navigation_items.each_with_index do |item, index| %>
         <%
           li_classes = %w(govuk-header__navigation-item)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "28.5.0".freeze
+  VERSION = "28.6.0".freeze
 end