govuk_publishing_components 37.6.0 → 37.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5059f8b24e5d099520ca6f53061525153ddf6e7e31a5d4d1401516cb3856fc4
-  data.tar.gz: 6565eeaa1b13939dbb5295327aa5d9862bd568b8af022d803419d22bc6890f5b
+  metadata.gz: 53bea50d5b775c3e29b495eb9098ceb4d4708f081a7e0d3f6c18069de3f4e82b
+  data.tar.gz: dff2018e3a0320a9bb5f0822ec6145c656d9c4b8afee95a07173fc76f48c337e
 SHA512:
-  metadata.gz: 828d20c4426cad1bce861a0f4eef8f9aa46947fa0f381ca54f8408ef9675d828b3d9c7be18d513bf5c9f4b9c34197cb30cefa030f33134cac24ae1cdead608ab
-  data.tar.gz: 53515ff838f233ab6b5bf5d3db5fe4d78e4c360faf4368cdfff7d9ef1ebbcebb8959637728348c74acd2e7003b94c4fa127c9dfe83c0a0b608263bcfdb17ce1f
+  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/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -50,7 +50,7 @@
   padding-left: $contents-spacing;
   padding-right: $contents-spacing;
 
-  &::before {
+  & span::before {
     content: "—";
     position: absolute;
     left: 0;

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

@@ -41,6 +41,7 @@
       <% index_link = 1 unless disable_ga4 %>
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
+          <span aria-hidden="true"></span>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
             unless disable_ga4
               ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href]
@@ -64,6 +65,7 @@
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
+                  <span aria-hidden="true"></span>
                   <%
                     unless disable_ga4
                       ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]

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/contents_list.yml

@@ -18,6 +18,7 @@ accessibility_criteria: |
   - convey the content structure
   - indicate the current page when contents span different pages, and not link to itself
   - include an aria-label to contextualise the list
+  - ensure dashes before each list item are hidden from screen readers
 
   Links with formatted numbers must separate the number and text with a space for correct screen reader pronunciation. This changes pronunciation from "1 dot Item" to "1 Item".
 shared_accessibility_criteria:

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.0".freeze
+  VERSION = "37.7.0".freeze
 end

data/node_modules/govuk-single-consent/README.md

@@ -0,0 +1,157 @@
+# Single Consent client
+
+The Single Consent client is a small Javascript which can be embedded in a
+website to enable easily sharing a user's consent or rejection of cookies across
+different websites.
+
+See the [Single Consent service README](../README.md).
+
+## Quick start
+
+See the [CommonJS example](https://github.com/alphagov/consent-api/blob/main/client/examples/commonJS-usage/index.js).
+
+Contact data-tools-team@digital.cabinet-office.gov.uk to get the URL of the API endpoint.
+
+The library provides the following static methods for finding out which types of
+cookies a user has consented to.
+
+- `hasConsentedToEssential`
+- `hasConsentedToUsage`
+- `hasConsentedToCampaigns`
+- `hasConsentedToSetting`
+
+The method `GovSingleConsent.getConsents()` provides the current state of the
+user's consents to all types of cookies.
+
+### 1. Install with npm
+
+In order to set first-party cookies, the client Javascript must be served with
+your application.
+
+We recommend installing the Single Consent client using
+[node package manager (npm)](https://www.npmjs.com/).
+
+```sh
+npm i govuk-single-consent
+```
+
+https://www.npmjs.com/package/govuk-single-consent
+
+### 2. Including the Javascript client
+
+The javascript client can be included in different ways. Choose one below.
+
+#### CommonJS
+
+See the [example](https://github.com/alphagov/consent-api/blob/main/client/examples/commonJS-usage/index.js).
+
+#### Typescript
+
+See the [example](https://github.com/alphagov/consent-api/blob/main/client/examples/typescript-usage/index.ts).
+
+#### HTML script tag (IIFE)
+
+The javascript client makes available the object `window.GovSingleConsent` for
+interacting with the API. It needs to be loaded on any page that could be an
+entry point to your web application, that allows modifying cookie consent, or
+provides a link to another domain with which you want to share cookie consent
+status. It is probably easiest to add the script to a base template used for all
+pages.
+
+On the same pages, you need to load your javascript for interacting with the
+`window.GovSingleConsent` object.
+
+See the following examples.
+
+- [Cookie banner script](https://github.com/alphagov/consent-api/blob/main/client/example/cookie-banner.js)
+- [Cooke page script](https://github.com/alphagov/consent-api/blob/main/client/example/cookies-page.js)
+
+It is common practice to add Javascript tags just before the end `</body>` tag,
+eg:
+
+```html
+    ...
+
+    <script src="{path_to_client_js}/singleconsent.js"></script>
+    <script src="{path_to_cookie_banner_script}.js"></script>
+    <script src="{path_to_cookies_page_script}.js"></script>
+  </body>
+</html>
+```
+
+### 3. Passing the base URL to the constructor
+
+You can either pass an environment string, or a custom base URL.
+
+If using an environment string, its value should be either `staging` or `production`.
+
+e.g
+
+```javascript
+const dummyCallback = () => {}
+
+// With an environemnt string to the staging environment
+new GovSingleConsent(dummyCallback, 'staging')
+
+// With an environemnt string to the production environment
+new GovSingleConsent(dummyCallback, 'production')
+
+// With a custom base URL
+new GovSingleConsent(dummyCallback, 'http://some-development-url.com')
+```
+
+### 4. Share the user's consent to cookies via the API
+
+When the user interacts with your cookie banner or cookie settings page to
+consent to or reject cookies you can update the central database by invoking the
+following function:
+
+```typescript
+exampleCookieConsentStatusObject: Consents = {
+  essential: true,
+  settings: false,
+  usage: true,
+  campaigns: false,
+}
+
+singleConsentObject.setConsents(exampleCookieConsentStatusObject)
+```
+
+## Content Security Policy
+
+If your website is served with a
+[`Content-Security-Policy` HTTP header or `<meta>` element](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you
+may need to modify it to allow the client to access the Single Consent service.
+The value of the header or meta element should contain the following:
+
+```
+connect-src 'self' https://consent-api-nw.a.run.app/api/v1/consent [... other site URLs separated by spaces];
+```
+
+## What the library does
+
+The library manages all read/write operations with a cookie that stores the
+state of a user's consent.
+
+### Callback
+
+Websites using the Consent API must provide a callback function. This will be
+invoked each time the consent has been updated. It will be called with three
+parameters:
+
+- `consents` An object describing the new consent state.
+- `consentsPreferencesSet` Boolean, the cookie banner must be displayed if this
+  value is `false`.
+- `error` An object describing any error, otherwise `null`. If there is an
+  error, then the `consents` object will say that the consents have been
+  revoked.
+
+The structure of the consent data object is currently based on the
+[GOV.UK `cookies_policy` cookie](https://www.gov.uk/help/cookies). If your
+website cookies do not fall into any of the four categories listed, please
+contact us.
+
+## Getting updates
+
+To be notified when there's a new release, you can watch the
+[consent-api Github repository](https://github.com/alphagov/consent-api).