govuk_publishing_components 31.2.0 → 32.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91b9d62f7f0bee126ffb2fa60dcca311f06489100cdc686a4c4404f54ae4c4e3
-  data.tar.gz: df1410de982d60ae348bad56b9dda41ea67666d1c4117b5f61260998aaac9bea
+  metadata.gz: 40c8f5cd0a641b265004d0db4aa4dad79cc1f251bc6510655d69bc7fa954614f
+  data.tar.gz: 80b737085d4e49d8a2d5558472f918ed7632db5932d32c9945ad82d936c3a2d0
 SHA512:
-  metadata.gz: 3ce3821fa73df20270408a383dba70232b5312628fe31299bc8b3b6577dc786da3e1afe24e72dcd38a1217e04739563b2a09bde9f4a8228f50c1a63c656ca7b9
-  data.tar.gz: 8ea5b431d7ed318852c4c1fdd1991b09f28d8abca00d8732b5cb6cf4de698a1a66a98fb5298ac49769666867d5641275e284fff04d8f12e950ee22c0809a4359
+  metadata.gz: c18a6aee8070978fd4f72f29eb7d916d8899a261c3bac0fac075703a18d5c7e7b1854fc56dc3d9ee4bfae10e1c5725aa4693f0488edac5429bb5f9b6ceed3e33
+  data.tar.gz: 2903283d75f095a49ebd6940cb003bc6653bf3e2e96cd990f311b3b113b1925bf042b9bc689a0f01d1f951973aee8f58fd00945e771507477e1ec69fa29eca1b

data/app/assets/images/govuk_publishing_components/action-link-arrow--blue.svg

@@ -1,3 +1,9 @@
-<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4893 23C17.8406 23 22.9893 17.8513 22.9893 11.5C22.9893 5.14873 17.8406 0 11.4893 0C5.64643 0 0.821276 4.35747 0.0862655 10H12.7633L8.98933 5.67277L10.4482 4L16.9893 11.5L10.4482 19L8.98933 17.3272L13.6354 12H0C0.261778 18.1193 5.30558 23 11.4893 23ZM13.9893 11.5942L14.0715 11.5L13.9893 11.4057V11.5942Z" fill="#366FB3"/>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="19.5" cy="19.5" r="19.5" fill="#366FB3" mask="url(#mask)"/>
+
+<mask id="mask">
+	<rect width="100%" height="100%" fill="white"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0343 20L14.1812 10.1469L17.0096 7.31848L29.6912 20L17.0096 32.6815L14.1812 29.8531L24.0343 20Z" fill="black"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000423781 18L25.1328 18L25.1328 22L0.000423431 22L0.000423781 18Z" fill="black"/>
+</mask>
 </svg>

data/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js

@@ -19,7 +19,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var target = e.target
       if (!trackLinksOnly) {
         that.$module.handleClick(target)
-      } else if (trackLinksOnly && target.tagName === 'A') {
+      } else if (trackLinksOnly && target.closest('a')) {
         if (!limitToElementClass) {
           that.$module.handleClick(target)
         } else if (limitToElementClass && target.closest('.' + limitToElementClass)) {

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js

@@ -9,12 +9,17 @@
     PIIRemover: new GOVUK.analyticsGa4.PIIRemover(),
     DEFAULT_LIST_TITLE: 'Site search results',
 
-    init: function (isNewPageLoad) {
+    init: function (referrer) {
       if (window.dataLayer) {
+        /* The referrer parameter is only passed to the init() function as a result of an AJAX request
+        (in live_search.js in the finder-frontend repository). Otherwise it will not be available and this indicates a fresh page load.
+        This is needed to trigger a fresh pageViewTracker push to the dataLayer on dynamic page updates and to prevent multiple
+        click listeners from being applied on this.searchResultsBlocks elements. */
+        var isNewPageLoad = !referrer
+
         /* The data-ga4-ecommerce attribute may be present on several DOM elements e.g. search results and spelling
         suggestions, hence why document.querySelectorAll is required */
         this.searchResultsBlocks = document.querySelectorAll('[data-ga4-ecommerce]')
-        this.isNewPageLoad = isNewPageLoad
 
         if (!this.searchResultsBlocks.length === 0) {
           return
@@ -23,18 +28,18 @@
         /* If the results are updated by JS, the URL of the page will change and this needs to be visible to PA's,
         hence the pageView object push to the dataLayer. We do not need to send a pageView object on page load as
         this is handled elsewhere. */
-        if (!this.isNewPageLoad) {
+        if (referrer) {
           var pageViewTracker = window.GOVUK.analyticsGa4.analyticsModules.PageViewTracker
 
           if (pageViewTracker) {
-            pageViewTracker.init()
+            pageViewTracker.init(referrer)
           }
         }
 
         for (var i = 0; i < this.searchResultsBlocks.length; i++) {
           this.trackSearchResults(this.searchResultsBlocks[i])
 
-          if (this.isNewPageLoad) {
+          if (isNewPageLoad) {
             this.searchResultsBlocks[i].addEventListener('click', this.handleClick.bind(this))
           }
         }

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -51,8 +51,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       }
 
-      // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
-      if (target.closest('.gem-c-accordion')) {
+      /* Ensure it only tracks aria-expanded in an accordion or element with data-ga4-expandable on it. */
+      if (target.closest('.gem-c-accordion') || target.closest('[data-ga4-expandable]')) {
         var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
       }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -9,13 +9,15 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     PIIRemover: new window.GOVUK.analyticsGa4.PIIRemover(), // imported in analytics-ga4.js
     nullValue: undefined,
 
-    init: function () {
+    init: function (referrer) {
       if (window.dataLayer) {
         var data = {
           event: 'page_view',
           page_view: {
             location: this.getLocation(),
-            referrer: this.getReferrer(),
+            /* If the init() function receives a referrer parameter, this indicates that it has been called as a part of an AJAX request and
+            this.getReferrer() will not return the correct value. Therefore we need to rely on the referrer parameter. */
+            referrer: referrer || this.getReferrer(),
             title: this.getTitle(),
             status_code: this.getStatusCode(),
 
@@ -42,7 +44,12 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             political_status: this.getMetaContent('political-status'),
             primary_publishing_organisation: this.getMetaContent('primary-publishing-organisation'),
             organisations: this.getMetaContent('analytics:organisations'),
-            world_locations: this.getMetaContent('analytics:world-locations')
+            world_locations: this.getMetaContent('analytics:world-locations'),
+
+            /* The existence of a referrer parameter indicates that the page has been dynamically updated via an AJAX request
+            and therefore we can use it to set the dynamic property appropriately. This value is used by PA's to differentiate
+            between fresh page loads and dynamic page updates. */
+            dynamic: referrer ? 'true' : 'false'
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)

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

@@ -15,7 +15,7 @@
   hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
   show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
 %>
-<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click" data-track-links-only>
+<header role="banner" class="gem-c-layout-super-navigation-header" data-module="gem-track-click ga4-event-tracker" data-track-links-only data-ga4-expandable>
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
     <div class="gem-c-layout-super-navigation-header__header-logo">
       <a
@@ -78,6 +78,14 @@
         hidden
         id="super-navigation-menu-toggle"
         type="button"
+        data-ga4="<%= {
+          "event_name": "select_content",
+          "type": "header menu bar",
+          "text": "Menu",
+          "index": 1,
+          "index_total": navigation_links.length + 2,
+          "section": "Menu"
+        }.to_json %>"
       >
         <span class="gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner">
           Menu
@@ -124,6 +132,14 @@
                     toggle_desktop_group: "top",
                     toggle_mobile_group: "second",
                     tracking_key: tracking_label,
+                    ga4: {
+                      event_name: "select_content",
+                      type: "header menu bar",
+                      text: link[:label],
+                      index: index + 2,
+                      index_total: navigation_links.length + 2,
+                      section: link[:label]
+                    }
                   },
                   hidden: true,
                   id: "super-navigation-menu__section-#{unique_id}-toggle",
@@ -217,6 +233,14 @@
         hidden
         id="super-search-menu-toggle"
         type="button"
+        data-ga4="<%= {
+          "event_name": "select_content",
+          "type": "header menu bar",
+          "text": "Search",
+          "index": navigation_links.length + 2,
+          "index_total": navigation_links.length + 2,
+          "section": "Search"
+        }.to_json %>"
       >
         <span class="govuk-visually-hidden">
           <%= search_text %>

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

@@ -39,25 +39,32 @@
       } %>
 
       <%= render "govuk_publishing_components/components/button", {
-        text: t("components.feedback.send")
+        text: t("components.feedback.send"),
+        data_attributes: {
+          ga4: {
+            event_name: "form_submit",
+            type: "feedback",
+            text: "Send",
+            section: "Help us improve GOV.UK",
+          }
+        }
       } %>
 
-    <button
-      class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
-      data-track-category="Onsite Feedback"
-      data-track-action="GOV.UK Close Form"
-      aria-controls="something-is-wrong"
-      aria-expanded="true">
-      <%= t("components.feedback.close") %>
-    </button>
-
+      <button
+        class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
+        data-track-category="Onsite Feedback"
+        data-track-action="GOV.UK Close Form"
+        aria-controls="something-is-wrong"
+        aria-expanded="true">
+        <%= t("components.feedback.close") %>
+      </button>
     </div>
   </div>
 </form>
 
 <%
-  # I've added the following script inline in case of a scenario where a bot is able to parse the page, 
-  # without downloading any of the external scripts. 
+  # I've added the following script inline in case of a scenario where a bot is able to parse the page,
+  # without downloading any of the external scripts.
   # This seems to be a more reliable way to make sure the script is executed.
 %>
 

data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

@@ -25,8 +25,16 @@
         describedby: "survey_explanation"
       } %>
 
-       <%= render "govuk_publishing_components/components/button", {
+      <%= render "govuk_publishing_components/components/button", {
         text: t("components.feedback.send_me_survey"),
+        data_attributes: {
+          ga4: {
+            event_name: "form_submit",
+            type: "feedback",
+            text: "Send me the survey",
+            section: "Help us improve GOV.UK",
+          }
+        }
       } %>
 
       <button
@@ -38,7 +46,7 @@
         hidden>
         <%= t("components.feedback.close") %>
       </button>
-      
+
     </div>
   </div>
 </form>

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -39,10 +39,9 @@
     </div>
 
     <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
-      <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
+      <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page", "section": "Is this page useful?"}'>
         <%= t("components.feedback.something_wrong") %>
       </button>
     </div>
-    
   </div>
 </div>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "31.2.0".freeze
+  VERSION = "32.0.0".freeze
 end

data/node_modules/axe-core/README.md

@@ -78,9 +78,9 @@ The [axe-core API](doc/API.md) fully supports the following browsers:
 - Google Chrome v42 and above
 - Mozilla Firefox v38 and above
 - Apple Safari v7 and above
-- Internet Explorer v11
+- Internet Explorer v11 (DEPRECATED)
 
-Support means that we will fix bugs and attempt to test each browser regularly. Only Firefox, Chrome, and Internet Explorer 11 are currently tested on every pull request.
+Support means that we will fix bugs and attempt to test each browser regularly. Only Chrome and Firefox are currently tested on every pull request.
 
 There is limited support for JSDOM. We will attempt to make all rules compatible with JSDOM but where this is not possible, we recommend turning those rules off. Currently the `color-contrast` rule is known not to work with JSDOM.
 
@@ -103,9 +103,9 @@ or equivalently:
 
 `npm run build -- --lang=nl`
 
-This will create a new build for axe, called `axe.<lang>.js` and `axe.<lang>.min.js`. If you want to build localized versions, simply pass in `--all-lang` instead. If you want to build multiple localized versions (but not all of them), you can pass in a comma-separated list of langages to the `--lang` flag, like `--lang=nl,ja`.
+This will create a new build for axe, called `axe.<lang>.js` and `axe.<lang>.min.js`. If you want to build localized versions, simply pass in `--all-lang` instead. If you want to build multiple localized versions (but not all of them), you can pass in a comma-separated list of languages to the `--lang` flag, like `--lang=nl,ja`.
 
-To create a new translation for axe, start by running `grunt translate --lang=<langcode>`. This will create a json file fin the `./locales` directory, with the default English text in it for you to translate. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see [Check Message Template](/docs/check-message-template.md).
+To create a new translation for axe, start by running `grunt translate --lang=<langcode>`. This will create a json file fin the `./locales` directory, with the default English text in it for you to translate. Alternatively, you could copy `./locales/_template.json`. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see [Check Message Template](/docs/check-message-template.md).
 
 To update existing translation file, re-run `grunt translate --lang=<langcode>`. This will add new messages used in English and remove messages which were not used in English.
 
@@ -127,8 +127,7 @@ axe.configure({
       },
       'aria-errormessage': {
         // Note: doT (https://github.com/olado/dot) templates are supported here.
-        fail:
-          'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
+        fail: 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
       }
       // ...
     }
@@ -145,8 +144,10 @@ Axe-core supports the following locales. Do note that since locales are contribu
 - Dutch
 - French
 - German
+- Hebrew
 - Japanese
 - Korean
+- Norwegian (Bokmål)
 - Polish
 - Portuguese (Brazilian)
 - Spanish

data/node_modules/axe-core/axe.d.ts

@@ -250,6 +250,7 @@ declare namespace axe {
     help: string;
     helpUrl: string;
     tags: string[];
+    actIds?: string[];
   }
   interface SerialDqElement {
     source: string;