govuk_publishing_components 32.1.0 → 35.0.0

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("print-link")
+
   text ||= t('components.print_link.text')
   href ||= nil
   data_attributes ||= {}

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("radio")
+
   local_assigns[:margin_bottom] ||= 6
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   id ||= nil

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

@@ -1,10 +1,19 @@
-<% related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns) %>
-<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  ga4_tracking ||= false
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+%>
+
+<%
+  add_gem_component_stylesheet("related-navigation")
+%>
 
 <% if related_nav_helper.related_navigation? %>
   <% random = SecureRandom.hex(4) %>
-  <div class="gem-c-related-navigation">
-
+  <%= tag.div(class: "gem-c-related-navigation", data: data) do %>
     <% if local_assigns[:context] != :footer %>
       <h2 id="related-nav-related_items-<%= random %>"
           class="gem-c-related-navigation__main-heading"
@@ -33,7 +42,8 @@
         section_title: section_title,
         links: links,
         section_index: section_index,
-        random: random %>
+        random: random,
+        ga4_tracking: ga4_tracking %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("reorderable-list")
+
   items ||= []
   input_name ||= "ordering"
   data_attributes ||= {}

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("search")
+
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
 

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("select")
+
   # select_helper.css_classes generates "gem-c-select"
   id ||= false
   label ||= false

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("share-links")
+
   links ||= []
   title ||= false
   track_as_sharing ||= false
@@ -15,7 +17,8 @@
   classes << brand_helper.brand_class
 
   data_attributes ||= {}
-  data_attributes[:module] = 'gem-track-click'
+  ((data_attributes[:module] ||= "") << " " << "gem-track-click").strip!
+  data_attributes[:module] << " ga4-link-tracker" if track_as_sharing || track_as_follow
 %>
 <% if links.any? %>
   <%= tag.div(class: classes, data: data_attributes) do %>
@@ -54,7 +57,6 @@
                 'index': index + 1,
                 'index_total': links.length,
                 'text': link[:icon],
-                'method': 'populated-via-js'
               }
             end
             if track_as_follow
@@ -62,23 +64,21 @@
                 'event_name': 'navigation',
                 'type': 'follow us',
                 'index': index + 1,
-                'index_total': links.length,
-                'text': link[:text],
-                'external': 'populated-via-js',
-                'url': link[:href],
-                'method': 'populated-via-js'
+                'index_total': links.length
               }
             end
           %>
+          <%
+            data_attributes = link[:data_attributes] ||= {}
+            data_attributes[:track_category] = 'social media'
+            data_attributes[:track_action] = link[:icon]
+            data_attributes[:track_options] = track_options
+            data_attributes[:ga4_link] = ga4_link_data
+          %>
           <%= link_to link[:href],
             target: "_blank",
             rel: "noopener noreferrer external",
-            data: {
-              'track-category': 'social media',
-              'track-action': link[:icon],
-              'track-options': track_options,
-              'ga4-link': ga4_link_data
-            },
+            data: data_attributes,
             class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("show-password")
+
   disable_form_submit_check ||= false
   label ||= nil
   value ||= nil

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("signup-link")
+
   local_assigns[:heading_level] ||= 3
   local_assigns[:margin_bottom] ||= 0
   link_text ||= false

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("single-page-notification-button")
+
   component_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
@@ -6,11 +8,15 @@
   wrapper_classes << shared_helper.get_margin_bottom
 %>
 <% button_text = capture do %>
-  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
+  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><span class="gem-c-single-page-notication-button__text"><%= component_helper.button_text %></span>
 <% end %>
 <%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
-  <%= tag.form class: component_helper.classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+  <%= tag.form class: component_helper.classes, action: component_helper.form_action, method: "POST", data: component_helper.data do %>
     <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
+    <% if component_helper.skip_account %>
+      <input type="hidden" name="<%= component_helper.skip_account_param %>" value="true">
+      <input type="hidden" name="link" value="<%= component_helper.base_path %>">
+    <% end %>
     <%= content_tag(:button, button_text, {
       class: "govuk-body-s gem-c-single-page-notification-button__submit",
       type: "submit",

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("skip-link")
+
   href ||= '#main-content'
   text ||= t('components.skip_link.text')
 %>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("step-by-step-nav")
+
   options = {}
   options[:heading_level] = heading_level ||= 2
 
@@ -15,10 +17,13 @@
   step_number = 0
 
   step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
+
+  ga4_tracking ||= false
 %>
 <% if steps %>
   <div
-    data-module="gemstepnav"
+    data-module="gemstepnav<% if ga4_tracking %> ga4-event-tracker ga4-link-tracker<% end %>"
+    <%= "data-ga4-expandable" if ga4_tracking %>
     class="gem-c-step-nav js-hidden <% if small %>govuk-!-display-none-print<% end %> <% unless small %>gem-c-step-nav--large<% end %>"
     <%= "data-remember" if remember_last_step %>
     <%= "data-id=#{tracking_id}" if tracking_id %>
@@ -72,8 +77,10 @@
             <%
               in_substep = false
               options[:step_nav_content_id] = step_nav_content_id
+              options[:step_title] = step[:title]
               options[:step_index] = step_index
               options[:link_index] = 0
+              options[:ga4_tracking] = ga4_tracking
             %>
             <% step[:contents].each do |element| %>
               <%= step_nav_helper.render_step_nav_element(element, options) %>

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

@@ -1,12 +1,19 @@
 <%
+  add_gem_component_stylesheet("step-by-step-nav-header")
+
   title ||= false
   path ||= false
+  ga4_tracking ||= false
   breadcrumbs = [
     { title: "Home", url: "/" },
     { title: title, url: path }
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+
   tracking_id ||= false
   tracking_category ||= "stepNavHeaderClicked"
   tracking_action ||= "top"
@@ -20,7 +27,7 @@
   end
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-step-nav-header)
+  classes = %w[gem-c-step-nav-header]
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <% if title %>
@@ -28,7 +35,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <%= tag.div class: classes, data: { module: "gem-track-click" } do %>
+  <%= tag.div(class: classes, data: data) do %>
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
@@ -36,6 +43,9 @@
         data-track-category="<%= tracking_category %>"
         data-track-action="<%= tracking_action %>"
         data-track-label="<%= tracking_label %>"
+        <% if ga4_tracking %>
+          data-ga4-link='{"event_name":"navigation", "type":"super breadcrumb", "index":{"index_link": "1"}, "index_total":"1"}'
+        <% end %>
         <% if tracking_dimension_enabled %>
           data-track-dimension="<%= tracking_dimension %>"
           data-track-dimension-index="<%= tracking_dimension_index %>"

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

@@ -1,12 +1,17 @@
 <%
+  add_gem_component_stylesheet("step-by-step-nav-related")
+  ga4_tracking ||= false
   links ||= []
   pretitle ||= t("components.step_by_step_nav_related.part_of")
   always_display_as_list ||= false
+  classes = %w(gem-c-step-nav-related)
+  classes << "gem-c-step-nav-related--singular" if links.length == 1
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
 %>
 <% if links.any? %>
-  <div
-    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
-    data-module="gem-track-click">
+  <%= tag.div(class: classes, data: data) do %>
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
@@ -17,14 +22,18 @@
             data-track-label="<%= links[0][:href] %>"
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
-            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'>
+            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'
+            <% if ga4_tracking %>
+              data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "1"}, "index_total":"1"}'
+            <% end %>
+          >
             <%= links[0][:text] %>
           </a>
         </h2>
       <% else %>
         </h2>
         <ul class="gem-c-step-nav-related__links">
-          <% links.each do |link| %>
+          <% links.each_with_index do |link, index| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
                 class="govuk-link"
@@ -33,12 +42,16 @@
                 data-track-label="<%= link[:href] %>"
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
-                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'>
+                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'
+                <% if ga4_tracking %>
+                  data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "<%= index + 1 %>"}, "index_total": "<%= links.length %>"}'
+                <% end %>
+              >
                 <%= link[:text] %>
               </a>
             </li>
           <% end %>
         </ul>
       <% end %>
-  </div>
-<% end %>
+  <% end %>
+<% end %>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("subscription-links")
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 
@@ -36,7 +38,7 @@
             </svg><%= sl_helper.email_signup_link_text %>
           <% end %>
           <%= link_to email_link_text, sl_helper.email_signup_link, {
-            class: "govuk-link govuk-link--no-underline gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
             data: sl_helper.email_signup_link_data_attributes,
             lang: email_signup_link_text_locale
           } %>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("success-alert")
+
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("summary-list")
+
   local_assigns[:heading_level] ||= 3
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   heading_size = "m" unless shared_helper.valid_heading_size?(heading_size)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("table")
+
   caption ||= nil
   head ||= []
   rows ||= []
@@ -16,7 +18,7 @@
   <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
       sortable: sortable,
       filterable: filterable,
-      caption_classes: caption_classes, 
+      caption_classes: caption_classes,
       table_id: table_id
     }) do |t| %>
 

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

@@ -1,18 +1,38 @@
 <%
+  add_gem_component_stylesheet("tabs")
+
   tabs ||= []
   panel_border ||= true unless panel_border == false
   panel_css_classes = %w(govuk-tabs__panel)
   panel_css_classes << "gem-c-tabs__panel--no-border" if panel_border == false
   panel_css_classes = panel_css_classes.join(" ")
+
+  ga4_tracking ||= false
+  data_module = "govuk-tabs"
+  data_module << " ga4-event-tracker" if ga4_tracking
 %>
 <% if tabs.count > 1 %>
-  <div class="govuk-tabs gem-c-tabs" data-module="govuk-tabs">
+  <div class="govuk-tabs gem-c-tabs" data-module="<%= data_module %>">
     <h2 class="govuk-tabs__title">
       <%= t("components.tabs.contents") %>
     </h2>
     <ul class="govuk-tabs__list">
-      <% tabs.each do |tab| %>
+      <% tabs.each_with_index do |tab, index| %>
       <li class="govuk-tabs__list-item">
+        <%
+          tab[:tab_data_attributes] ||= {}
+          if ga4_tracking
+            tab[:tab_data_attributes][:ga4_event] = {
+              event_name: "select_content",
+              type: "tabs",
+              text: tab[:label],
+              index: {
+                index_section: index + 1,
+                index_section_count: tabs.length,
+              },
+            }
+          end
+        %>
         <%= link_to(tab[:label],
                     "##{tab[:id]}",
                     class: "govuk-tabs__tab",

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("textarea")
+
   id ||= "textarea-#{SecureRandom.hex(4)}"
   value ||= nil
   rows ||= 5
@@ -17,6 +19,8 @@
   hint_id = "hint-#{SecureRandom.hex(4)}"
   has_error ||= error_message || error_items.any?
   error_id = "error-#{SecureRandom.hex(4)}"
+  right_to_left ||= false
+  right_to_left_help = right_to_left_help.nil? ? right_to_left : right_to_left_help
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
@@ -39,13 +43,17 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", { html_for: id }.merge(label.symbolize_keys) %>
+    <%= render "govuk_publishing_components/components/label", {
+      html_for: id,
+      right_to_left: right_to_left_help
+    }.merge(label.symbolize_keys) %>
   <% end %>
 
   <% if hint %>
     <%= render "govuk_publishing_components/components/hint", {
       id: hint_id,
-      text: hint
+      text: hint,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -54,11 +62,13 @@
       id: error_id,
       text: error_message,
       items: error_items,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
   <%= tag.textarea name: name,
     class: css_classes,
+    dir: right_to_left ? "rtl" : nil,
     id: id,
     rows: rows,
     maxlength: maxlength,

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("title")
+
   average_title_length ||= false
 
   context ||= false

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("translation-nav")
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("warning-text")
+
   id ||= "warning-text-#{SecureRandom.hex(4)}"
   text_assistive ||= 'Warning'
   text_icon ||= '!'

data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb

@@ -1,14 +1,23 @@
-<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
-<%
+<% 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   title = t("components.related_navigation.ukraine.title")
   lang = shared_helper.t_locale("components.related_navigation.ukraine.title")
+  data_module = "gem-track-click"
+  data_module << " ga4-link-tracker" if ga4_tracking
 %>
-
-<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--ukraine", data: { module: "gem-track-click" } do %>
+<%= tag.div class: "gem-c-contextual-sidebar__cta gem-c-contextual-sidebar__cta--ukraine", data: { module: data_module } do %>
   <%= tag.h2 title, class: "gem-c-contextual-sidebar__heading govuk-heading-s" %>
   <%= tag.ul class: "gem-c-contextual-sidebar__list" do %>
-    <% t("components.related_navigation.ukraine.links").each do |link| %>
+    <% t("components.related_navigation.ukraine.links").each_with_index do |link, index| %>
       <%= tag.li class: "gem-c-contextual-sidebar__text govuk-body" do %>
+        <%
+          ga4_attributes = {
+            event_name: "navigation",
+            type: "related content",
+            index: "1.#{index + 1}",
+            section: title,
+          } if ga4_tracking
+        %>
         <%= link_to link[:label],
           link[:href],
           class: "govuk-link",
@@ -18,9 +27,10 @@
             "track-label": link[:href],
             "track-dimension": link[:label],
             "track-dimension-index": "29",
+            ga4_link: ga4_attributes,
           },
           lang: lang %>
       <% end %>
     <% end %>
-  <% end %>    
+  <% end %>
 <% end %>

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

@@ -34,6 +34,7 @@ accessibility_criteria: |
 
   * be fully expanded
   * not be marked as expandable
+uses_component_wrapper_helper: true  
 shared_accessibility_criteria:
   - link
 examples:
@@ -181,21 +182,33 @@ examples:
                     <a class="govuk-link" href="#">Retiring your service</a>
                   </li>
               </ul>'
+  with_ga4_tracking:
+    description: |
+      Allows you to add GA4 tracking to an accordion. This will add a data module and data-attributes with JSONs to the accordion. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      items:
+        - heading:
+            text: Writing well for the web
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
+        - heading:
+            text: Writing well for specialists
+          content:
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   with_data_attributes:
     description: |
       Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.
 
       The `data_attributes` option applies attributes to the outermost element in the accordion. Each item can also have a `data_attributes` hash, which are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
 
-      Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). More details on how this can be used with the GA4 event tracking can be found in the 'Advanced' section of the [event tracking documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md).
+      Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). Currently, this is only used for tracking with Universal Analytics.
 
       If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
     data:
       data_attributes:
         custom_data_attr: custom-data-attr-accordion
       data_attributes_show_all:
-        custom_data_attr-event-name: example
-        custom_data_attr-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
         tracking-options: "{ 'dimension114': 1 }"
       items:
         - heading:

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

@@ -2,6 +2,7 @@ name: Action link
 description: Use action links to help users get to the next stage of a journey quickly.
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -2,7 +2,7 @@ name: "Breadcrumbs"
 description: "Navigational breadcrumbs, showing page hierarchy"
 body: |
   Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
-  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
+  Links are tracked, but in Universal Analytics, links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
 
   We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:
@@ -13,6 +13,7 @@ accessibility_criteria:
 accessibility_excluded_rules:
   - skip-link # This component is creating a reference to #content which is part of the layout
 display_html: true
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -129,3 +129,13 @@ examples:
     data:
       text: Button
       aria_label: Button with custom label
+  with_aria_controls:
+    description: Used to identify what element(s) the button controls, this can be useful for users with visual impairment. In the example shown, the button controls the page wrapper with ID `wrapper` but it could be another identifying attribute.
+    data:
+      text: Button
+      aria_controls: wrapper
+  with_aria_describedby:
+    description: Can be used to give context to a button, this will be read after aria-label by a screenreader
+    data:
+      text: Button
+      aria_describedby: with_aria_describedby

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

@@ -16,6 +16,7 @@ accessibility_criteria: |
   It is also good practise to include a heading above the list to tell users what the list contains
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -15,6 +15,7 @@ accessibility_criteria: |
   - have correctly associated labels
 
   Labels use the [label component](/component-guide/label).
+uses_component_wrapper_helper: true
 examples:
   default:
     data: