govuk_publishing_components 37.6.1 → 37.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 057a27088f3e56f3de0b207bf272737059e084e11f7ad5d60c9c64f51b36f36c
-  data.tar.gz: 2e7c53dbecff6dcb761c8b181be7c22a051d1e67738f96d6386cc24b08e4a850
+  metadata.gz: 53bea50d5b775c3e29b495eb9098ceb4d4708f081a7e0d3f6c18069de3f4e82b
+  data.tar.gz: dff2018e3a0320a9bb5f0822ec6145c656d9c4b8afee95a07173fc76f48c337e
 SHA512:
-  metadata.gz: 853e1a7952502815cc9cf864feedb258266b06f402c37d8622ce3e2a8550b160bfc676e60221b5e6a0332adca201bc7a8b651d3cee2ff451f9ade26c61a74304
-  data.tar.gz: 54df263cbc3fe4b0a4bf2b7f8e3207e5d0292fb6dd79fddfe87cdcea0b844d0c5b4a73527de5ef7d747991e505af18b25228c8644d6c973a5431fb993707a3f7
+  metadata.gz: 810afe26d85390892172d9424293c9b2937d6c39531470b680428929852ba512d9e2eb738286fdce53fbf1e55b84c7eab0a1119e3f41661771d429366cf83a49
+  data.tar.gz: aabf6aa8ee19cbbe2c86ecc666a86be58218a0bf5c61e5834cbd93741ad83ceb78458c1b3dd6f4dfccb74179743f7bcda67f1e75613c6807641cbe6654fab7a8

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

@@ -40,11 +40,33 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
         return
       }
 
-      // don't track this link if it's already being tracked by the another tracker (e.g. the link tracker or ecommerce tracker)
-      if (element.closest('[data-ga4-link]') || element.closest('[data-ga4-ecommerce-path]')) {
+      // Don't track this link if it's already being tracked by the ecommerce tracker
+      if (element.closest('[data-ga4-ecommerce-path]')) {
         return
       }
 
+      // Code below ensures the tracker plays nicely with the other link tracker
+      var otherLinkTracker = element.closest('[data-ga4-link]')
+      if (otherLinkTracker) {
+        var limitToElementClass = otherLinkTracker.getAttribute('data-ga4-limit-to-element-class')
+
+        if (!limitToElementClass) {
+          // If this link is inside the other link tracker, and the other link tracker IS NOT limiting itself to specific classes,
+          // then stop this tracker from firing, as the other tracker is responsible for this link.
+          return
+        } else {
+          // If this link is inside the other link tracker, but the other link tracker IS limiting itself to specific classes,
+          // then track the link here only if it is not within the specified classes that the other tracker is looking for.
+          var classes = limitToElementClass.split(',')
+
+          for (var i = 0; i < classes.length; i++) {
+            if (element.closest('.' + classes[i].trim())) {
+              return
+            }
+          }
+        }
+      }
+
       var href = element.getAttribute('href')
 
       if (!href) {

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -93,6 +93,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module = $module
     this.$searchToggle = this.$module.querySelector('#super-search-menu-toggle')
     this.$searchMenu = this.$module.querySelector('#super-search-menu')
+    this.$navToggle = this.$module.querySelector('#super-navigation-menu-toggle')
+    this.$navMenu = this.$module.querySelector('#super-navigation-menu')
 
     // The menu toggler buttons need three attributes for this to work:
     //  - `aria-controls` contains the id of the menu to be toggled
@@ -126,7 +128,68 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     toggle($target, $targetMenu)
   }
 
+  SuperNavigationMegaMenu.prototype.handleKeyDown = function (event) {
+    var KEY_TAB = 9
+    var KEY_ESC = 27
+    var $navMenuLinks = this.$navMenu.querySelectorAll('li a')
+    var $firstNavLink = $navMenuLinks[0]
+    var $lastNavLink = $navMenuLinks[$navMenuLinks.length - 1]
+    var $searchMenuLinks = this.$searchMenu.querySelectorAll('li a')
+    var $lastSearchLink = $searchMenuLinks[$searchMenuLinks.length - 1]
+
+    if (event.keyCode === KEY_TAB) {
+      if (!this.$navMenu.hasAttribute('hidden')) {
+        switch (document.activeElement) {
+          case this.$navToggle:
+            if (!event.shiftKey) {
+              event.preventDefault()
+              $firstNavLink.focus()
+            }
+            break
+          case $lastNavLink:
+            if (!event.shiftKey) {
+              event.preventDefault()
+              this.$searchToggle.focus()
+              hide(this.$navToggle, this.$navMenu)
+            }
+            break
+          case $firstNavLink:
+            if (event.shiftKey) {
+              event.preventDefault()
+              this.$navToggle.focus()
+            }
+            break
+          case this.$searchToggle:
+            if (event.shiftKey) {
+              event.preventDefault()
+              $lastNavLink.focus()
+            }
+            break
+          default:
+            break
+        }
+      } else if (!this.$searchMenu.hasAttribute('hidden')) {
+        if (document.activeElement === $lastSearchLink) {
+          if (!event.shiftKey) {
+            hide(this.$searchToggle, this.$searchMenu)
+          }
+        }
+      }
+    } else if (event.keyCode === KEY_ESC) {
+      if (!this.$navMenu.hasAttribute('hidden')) {
+        hide(this.$navToggle, this.$navMenu)
+        this.$navToggle.focus()
+      } else if (!this.$searchMenu.hasAttribute('hidden')) {
+        hide(this.$searchToggle, this.$searchMenu)
+        this.$searchToggle.focus()
+      }
+    }
+  }
+
   SuperNavigationMegaMenu.prototype.init = function () {
+    // Handle key events for tab and escape keys
+    this.$module.addEventListener('keydown', this.handleKeyDown.bind(this))
+
     for (var j = 0; j < this.$buttons.length; j++) {
       var $button = this.$buttons[j]
       $button.addEventListener('click', this.buttonHandler.bind(this), true)

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -27,6 +27,10 @@
       event.keyCode = keyCode
     }
 
+    if (params.shiftKey) {
+      event.shiftKey = true
+    }
+
     element.dispatchEvent(event)
   }
 }(window))

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

@@ -10,9 +10,20 @@
   classes << "disable-youtube" if disable_youtube_expansions
   classes << "gem-c-govspeak--inverse" if inverse
 
+  disable_ga4 ||= false
+
   data_modules = "govspeak"
+  data_modules << " ga4-link-tracker" unless disable_ga4
   data_attributes = { module: data_modules }
 
+  unless disable_ga4
+    data_attributes.merge!({
+      ga4_track_links_only: "",
+      ga4_limit_to_element_class: "call-to-action, info-notice, help-notice, advisory",
+      ga4_link: { "event_name": "navigation", "type": "callout" }.to_json,
+    })
+  end
+
 %>
 
 <%= tag.div(class: "gem-c-govspeak govuk-govspeak " + classes.join(" "), data: data_attributes) do %>

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

@@ -162,7 +162,6 @@
 
       <%
         link = t("components.layout_super_navigation_header.navigation_link")
-        unique_id = SecureRandom.hex(4)
         show_menu_text = show_navigation_menu_text
         hide_menu_text = hide_navigation_menu_text
         tracking_label = link[:label].downcase.gsub(/\s+/, "")
@@ -192,7 +191,7 @@
 
             <%= content_tag(:button, {
               aria: {
-                controls: "super-navigation-menu-#{unique_id}",
+                controls: "super-navigation-menu",
                 expanded: false,
                 label: show_menu_text,
               },
@@ -213,7 +212,7 @@
                 }
               },
               hidden: true,
-              id: "super-navigation-menu-#{unique_id}-toggle",
+              id: "super-navigation-menu-toggle",
               type: "button",
             }) do %>
               <%= tag.span link[:label], class: top_toggle_button_inner_classes %>
@@ -282,7 +281,7 @@
       </div>
 
       <%= content_tag(:div, {
-        id: "super-navigation-menu-#{unique_id}",
+        id: "super-navigation-menu",
         hidden: "",
         class: dropdown_menu_classes,
       }) do %>

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

@@ -914,3 +914,12 @@ examples:
             <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
           </figcaption>
         </figure>
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      block: |
+        <p>
+          <a href='https://www.gov.uk'>Hello World</a>
+        </p>
+      disable_ga4: true

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

@@ -7,6 +7,8 @@ accessibility_criteria: |
   The component must:
 
   * have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+  * follow the expected tabbing border
+  * allow menus to be closed when the escape key is pressed
 
   Images in the super navigation header must:
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "37.6.1".freeze
+  VERSION = "37.7.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 37.6.1
+  version: 37.7.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-03-11 00:00:00.000000000 Z
+date: 2024-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config