govuk_publishing_components 23.14.0 → 24.2.0

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

@@ -5,6 +5,7 @@
   classes << " gem-c-document-list--top-margin" if local_assigns[:margin_top]
   classes << " gem-c-document-list--bottom-margin" if local_assigns[:margin_bottom]
   classes << " gem-c-document-list--no-underline" if local_assigns[:remove_underline]
+  classes << " gem-c-document-list--no-top-border" if local_assigns[:remove_top_border]
 
   within_multitype_list ||= false
   within_multitype_list_class = " gem-c-document-list__multi-list" if within_multitype_list
@@ -28,12 +29,21 @@
           item_classes = "gem-c-document-list__item-title #{brand_helper.color_class} #{title_with_context_class if item[:link][:context]}"
 
           if item[:link][:path]
+            rel = [
+              "external",
+              "nofollow",
+              "noopener",
+              "noreferrer",
+              "opener",
+            ].include?(item[:link][:rel]) ? item[:link][:rel] : nil
+
             link_to(
               item[:link][:text],
               item[:link][:path],
               data: item[:link][:data_attributes],
               class: "#{item_classes} gem-c-document-list__item-link",
-              lang: item[:link][:locale].presence
+              lang: item[:link][:locale].presence,
+              rel: rel,
             )
           else
             content_tag(

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

@@ -6,7 +6,7 @@
   classes << "gem-c-layout-footer--border" if with_border
 %>
 <%= tag.footer class: classes, role: "contentinfo" do %>
-  <div class="govuk-width-container ">
+  <div class="govuk-width-container" data-module="gem-track-click">
     <% if navigation.any? %>
       <div class="govuk-footer__navigation">
         <% navigation.each do |item| %>
@@ -31,7 +31,10 @@
                     <% if item[:href] && item[:text] %>
                       <li class="govuk-footer__list-item">
                         <%
-                          attributes = { class: "govuk-footer__link" }.merge(item.fetch(:attributes, {}))
+                          attributes = {
+                            class: "govuk-footer__link",
+                            "data-track-category": "footerClicked"
+                          }.merge(item.fetch(:attributes, {}))
                           attributes[:rel] = "noopener" if attributes[:target] == "_blank" && !attributes[:rel]
                         %>
                         <%= link_to item[:text], item[:href], attributes %>

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

@@ -4,20 +4,25 @@ govuk_frontend_components:
   - accordion
 body: |
   This component is based on the [design system accordion component](https://design-system.service.gov.uk/components/accordion/)
-  and is currently experimental. If using this component, please feed back any research findings to the Design System team.
+  and is currently experimental because more research is needed to validate it.  If using this component, [please feed back any research findings to the Design System team](https://design-system.service.gov.uk/components/accordion/#next-steps).
 
 accessibility_criteria: |
   The accordion must:
 
     * accept focus
     * be usable with a keyboard
-    * indicate when they have focus
+    * the controls must change in appearance when keyboard focus moves to it
+    * the controls must indicate when the mouse is hovered over it
     * be usable with touch
     * be usable with voice commands
     * have visible text
     * indicate to users that each section can be expanded and collapsed
     * inform the user when a step has been expanded or collapsed
-    * be readable when only the text of the page is zoomed in
+    * be readable when only the [text of the page is zoomed in](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages#w_how-to-only-change-the-size-of-the-text)
+    * zoom in up to 300% without the text spilling off the screen
+    * pass colour contrast
+    * the accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
+    * section content must have aria-label / aria-labelledby with a value that refers to the button that controls display of the content.
 
   Section headings must use a button element:
 

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

@@ -72,6 +72,11 @@ examples:
                       - text: Check what age you can drive
                         href: "/vehicles-can-drive"
                     optional: false
+                  - title: Testing the and
+                    logic: and
+                    contents:
+                    - type: paragraph
+                      text: hello hello what's UP
                   - title: Driving lessons and practice
                     contents:
                     - type: paragraph

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

@@ -1,6 +1,8 @@
 name: Cookie banner
 description: Help users manage their personal data by telling them when you store cookies on their device.
 body: |
+  By default the cookie banner is shown to all users with just a link to the settings page. If JS is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
+
   Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
 
   If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
@@ -18,6 +20,13 @@ examples:
       title: "Can we store analytics cookies on your device?"
       text: "This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the <a class='govuk-link' href='/cookies'>cookies page</a>"
       confirmation_message: "You’ve accepted all cookies."
+
+  with_multi_paragraph_custom_content:
+    data:
+      title: "Can we store analytics cookies on your device?"
+      text: ["This is some custom text in my cookie banner.","There are three paragraphs.","They are passed as an array"]
+      confirmation_message: "You’ve accepted all cookies."
+
   with_custom_cookie_preferences_href:
     data:
       cookie_preferences_href: "/cookies"

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

@@ -1,16 +1,16 @@
 name: Document list
 description: An ordered list of documents including a document type, when updated and a link.
 body: |
-  Outputs a list to documents, based on an array of document data. This may include:
+  Outputs a list to documents, based on an array of document data. A "document" in this context can be an asset (such as a ODT or other downloadable document) or a web page.
+  
+  The component can display:
 
-  * document title
-  * link to the document
-  * last updated date object
-  * document type
+  * a document title
+  * a link to the document
+  * a last updated date object
+  * a document type
 
   Tracking can be added to the links by supplying optional data attributes for each.
-
-  Documents are presented in an ordered list as the component expects that the ordering of the documents is relevant.
 accessibility_criteria: |
   The component must:
 
@@ -195,6 +195,23 @@ examples:
           public_updated_at: 2017-07-19 15:01:48
           document_type: 'Statistical data set'
         subtext: 'First published during the 1996 Conservative Government'
+  without_top_border_on_list_element:
+    description: Several interfaces across GOV.UK benefit from the semantics of the document list but have their own bespoke designs, sometimes meaning that the visual border element doesn't gel with said interface. Removing it using the below attribute allows for cleaner visual fidelity in this instances.
+    data:
+      remove_top_border: true
+      items:
+      - link:
+          text: 'Department for Education – Statistics at DfE'
+          path: '/government/organisations/department-for-education/about/statistics'
+        metadata:
+          public_updated_at: 2017-07-19 15:01:48
+          document_type: 'Corporate information'
+      - link:
+          text: 'State-funded school inspections and outcomes: management information'
+          path: '/government/organisations/department-for-education/about/statistics'
+        metadata:
+          public_updated_at: 2017-07-19 15:01:48
+          document_type: 'Statistical data set'
   highlighted_result:
     description: Highlight one or more of the items in the list. This is used on finders to provide a 'top result' for a search. The `highlight_text` parameter is optional.
     data:
@@ -288,3 +305,21 @@ examples:
           path: '/become-an-apprentice'
           description: 'Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.'
           full_size_description: true
+  with_rel_link_attribute:
+    description: |
+      The [rel attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) is an option attribute to dictate the relationship between the document being linked to and the current page. This is predominantly used by search engines to help index journeys through a website.
+      
+      On GOV.UK, this is typically used to dictate an external website being linked to with `rel="external"`, however this component supports:
+      
+      - external
+      - nofollow
+      - noopener
+      - noreferrer
+      - opener
+    data:
+      items:
+      - link:
+          text: 'Report Fraud'
+          path: 'https://www.actionfraud.police.uk/contact-us'
+          rel: 'external'
+          description: "Contact Action Fraud to report fraud and cyber crime, or to tell them you've been the victim of a scam."

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

@@ -312,8 +312,8 @@ examples:
       block: |
         <div class="contact" id="contact_1017">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>
@@ -332,8 +332,8 @@ examples:
         <h2>This is a title</h2>
         <div class="contact" id="contact_1018">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>
@@ -349,8 +349,8 @@ examples:
         <p>This is a paragraph.</p>
         <div class="contact" id="contact_1019">
           <div class="content">
-            <h3>Media enquiries</h3>
             <div class="vcard contact-inner">
+              <p>Media enquiries</p>
               <p class="adr">
                 <span class="street-address">2 Marsham Street<br>London</span><br>
                 <span class="postal-code">SW1P 4DF</span>

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

@@ -81,6 +81,17 @@ examples:
       - text: News and communications
         href: "item-6"
         active: true
+  with_navigation_link_data_attributes:
+    description: Supports adding data attributes i.e for tracking
+    data:
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+        data:
+          module: "a custom attribute"
+          something_else: "some other custom attribute"
+      - text: Worldwide
+        href: "item-2"
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

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

@@ -1,5 +1,5 @@
 <div class="govuk-header__logo gem-c-header__logo">
-  <a href="/" class="govuk-header__link govuk-header__link--homepage" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
+  <a href="/" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
     <span class="govuk-header__logotype">
       <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
         <path fill="currentColor" fill-rule="evenodd"

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

@@ -1,16 +1,21 @@
 <% if navigation_items.any? %>
   <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-  <%= tag.nav(class: "gem-c-header__nav", 'aria-label': navigation_aria_label ? navigation_aria_label : nil ) do %>
+  <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
     <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>
-        <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
-          <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
+        <%
+          li_classes = %w(govuk-header__navigation-item)
+          li_classes << "govuk-header__navigation-item--active" if item[:active]
+          li_classes << "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu]
+        %>
+        <%= tag.li class: li_classes do %>
           <%= link_to(
             item[:text],
             item[:href],
             class: 'govuk-header__link',
+            data: item[:data],
           ) %>
-        </li>
+        <% end %>
       <% end %>
     </ul>
   <% end %>

data/config/initializers/assets.rb

@@ -25,7 +25,6 @@ Rails.application.config.assets.precompile += %w[
   govuk_publishing_components/search-button.png
   govuk_publishing_components/icon-file-download.svg
   govuk_publishing_components/icon-important.svg
-  govuk_publishing_components/chevron-banner/*.svg
   govuk_publishing_components/crests/*.png
   govuk_publishing_components/take-action-amber.svg
   govuk_publishing_components/take-action-green.svg

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -115,7 +115,67 @@ module GovukPublishingComponents
 
       def brexit_cta_document_exceptions
         # /government/news/30-creative-teams-awarded-up-to-100000-each-for-festival-uk-2022-rd-project
-        %w[c3752802-f091-43a9-ba90-33568fccf391]
+        # and answer pages that have a start button (tracked in https://docs.google.com/spreadsheets/d/1ynH8zIjvElvK-u8JLI8KOYylxTbzJsoXRqEnqrnqv_4/edit)
+        %w[
+          c3752802-f091-43a9-ba90-33568fccf391
+          e1a9ce2b-4085-4761-b70f-d125a6571de3
+          6a2bf66e-2313-4204-afd5-9940de5e1d66
+          f65b0ac7-b8cd-476b-bd5d-738268517659
+          45ad868a-2e79-4029-991b-c29559d7eb29
+          e4e9c4ec-385e-4758-93ac-388bc154815e
+          cee73f76-83f0-44e2-b657-3b51a9cbc76e
+          9a945506-60bc-44d8-a2ec-0eb2824732d6
+          6ae16c12-a554-44e2-b3e3-596375aa1b9a
+          9add4ccc-dc4c-44cf-9b69-6878c162d431
+          4f5cf1cd-efda-4c49-8292-1db1c6c3cfb0
+          73058592-dedf-4379-9a1d-d8222a796c0a
+          c9259172-5432-43a6-b710-409d463c7627
+          59ecfc6d-cb9e-49b8-b013-fc368ebdf8ed
+          9897695d-624b-4cb9-b873-f3113f0332a1
+          715f4659-b058-46ec-84c8-cc346c210778
+          c63890f9-2356-4be3-9e07-6cf4b8de7081
+          e7661ec8-b678-444e-b4d0-a221fa83a7f7
+          723f9c0a-bcdb-4d8f-952c-6df0ed468c57
+          a1c420b7-11d7-4b9c-a97e-406fb73c0200
+          c1347936-839b-4547-a570-0c315c34ee45
+          1396f68b-6ffa-47ef-a049-414e7b548e81
+          3b054acf-d0af-470e-b912-9481204d1a9a
+          317b9c08-928b-4fd2-bc8e-4c6acf287c58
+          44d6cb7a-d853-4cd8-a9cb-69eff0299d9e
+          15517245-f142-4e45-ad84-773250f7d5a2
+          6fe6644d-d037-4ea4-baf6-800dc1966ed0
+          4a63625c-a195-4b86-9562-cb6653dd26ff
+          47521233-20a8-4d02-ba31-6e1977448fd1
+          7b8ca4ac-f3a3-41b8-9555-9e244c36575b
+          be1a82d1-e53c-431a-9e7a-337ed4b2654f
+          6c445001-4e29-4853-8c14-444d7f9374ee
+          c8cf2a7c-5c13-4f3d-b1ff-6a7eb5533973
+          2422a237-f8f1-4e9f-ad51-f1d44fde9755
+          ae000c08-c74f-467b-b8a4-90f138252a5c
+          7eec7800-9c4d-4160-af53-57b5d3e02972
+          eb545b3b-111b-4c3c-890c-c9ec29b9090d
+          8d705ade-8977-480d-9080-72a19e341c2a
+          2a0dd317-0252-4c7c-8c13-b43af28406bc
+          f27e5792-a84b-4164-9890-7e86767634e8
+          b0b9a600-1fe6-4257-9e68-2be0f59ea25d
+          28fa04ea-42e1-46ad-9abc-acf132c5666d
+          64b27b8a-ae53-4034-a812-f4805cd7e3ad
+          1dd5a75f-18b4-419d-b2b6-6d4808f2c7e4
+          b21b9e34-455c-4305-b4cc-4e6b8d3f7522
+          0ab53a0d-b098-43a8-b3cc-8b3224697228
+          e3862156-ba5a-41ba-8ee6-22e5cd6a6144
+          2e8f7fae-7164-459c-898b-0c0538eee3e0
+          6087439c-26d2-4881-b345-5160e23f3b5e
+          cac78a0a-9c28-436a-a29e-8ccbe8fbc956
+          c2fd13a5-537b-4368-ac2e-6078b2c463f1
+          98f0a21d-7b67-4089-a98c-f0a0177291a2
+          06692612-8c39-464c-8aee-2aa62e6c8887
+          df943977-69cb-479d-a921-9410d603c471
+          2656eb6b-f2eb-4982-8a90-e40d03a34a4d
+          4ca8698b-4a24-45ff-baea-7633cc24b679
+          ed73581f-9bf8-48b5-bb66-935581a255e3
+          15f1c594-af1d-4f16-97cc-ad4d12017509
+        ]
       end
 
       def brexit_cta_document_exception?
@@ -125,7 +185,6 @@ module GovukPublishingComponents
       def brexit_cta_document_type_exceptions
         %w[
           aaib_report
-          answer
           asylum_support_decision
           fatality_notice
           maib_report

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.14.0".freeze
+  VERSION = "24.2.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 

data/node_modules/govuk-frontend/govuk/components/_all.scss

@@ -6,6 +6,7 @@
 @import "button/index";
 @import "checkboxes/index";
 @import "character-count/index";
+@import "cookie-banner/index";
 @import "summary-list/index";
 @import "date-input/index";
 @import "details/index";

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json

@@ -15,7 +15,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -28,7 +28,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -53,7 +53,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -70,7 +70,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -90,7 +90,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -112,7 +112,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs  govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": false
         },
         {
@@ -141,7 +141,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         },
         {
@@ -158,7 +158,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         },
         {
@@ -170,7 +170,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         },
         {
@@ -186,7 +186,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n    \n  \n  </ol>\n</div>",
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n    \n  \n  </ol>\n</div>",
             "hidden": true
         }
     ]