govuk_publishing_components 68.2.0 → 69.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba5b24da8c7e37b1df6a4f4fec4aff4cd3b099923b888a2c844aef00fc54259f
-  data.tar.gz: 39e1a0df6c03ca9cc320ec92a6e07738ab30e05a1b7b3c14f61197f23bd0387c
+  metadata.gz: 4d6a8ca8a18729239925c15778ecfe6f9e699c8c1531d199e3259ed084c2b40f
+  data.tar.gz: f94b13c75a3b38547a27716a5b40252b8a62a83cd609365c056eb578d6901741
 SHA512:
-  metadata.gz: 1547f4b8b7362ba0105d288a2f484f2a040dba2f7e4955597d040be78dc1b6d891c36856ffab79f88a0b72eb9be616b8b06e8f79c5ca6a5c0c756fec59ae14e9
-  data.tar.gz: 35d2a6d741b9ec56ceecc69d311e9490d8c67bee32d4a86a7da37a8f82defe489906e8caa24f921aec4b88eb3fa812b528049bc446ccc36badf653890335edca
+  metadata.gz: 5318a3a3ddda3807aedfa588342b942574d5d863ca064d553b9fd83beb0a9817e927f0e8583bd76a9dd90a344b7961e7f4c8c6bcbbb0f1bc2d32bfdc01575b1c
+  data.tar.gz: bca644a69295230d4e4715a01819589b4e50c11c84e47b5410772e4b614b9d7bcbf109680b50015a63907195dea5f7eaa586672e18c0f5115507a11815c54706

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

@@ -11,6 +11,7 @@
     this.useSelectCount = this.module.hasAttribute('data-ga4-form-use-select-count')
     this.redacted = false
     this.useFallbackValue = this.module.hasAttribute('data-ga4-form-no-answer-undefined') ? undefined : 'No answer given'
+    this.piiRemover = new window.GOVUK.analyticsGa4.PIIRemover()
   }
 
   Ga4FormTracker.prototype.init = function () {
@@ -117,6 +118,8 @@
 
       var isDateField = elem.closest('.govuk-date-input')
 
+      var forceReportValue = elem.hasAttribute('data-ga4-force-report-value-in-form-tracker')
+
       if (conditionalCheckbox && !conditionalCheckboxChecked) {
         // don't include conditional field if condition not checked
         inputs.splice(i, 1)
@@ -146,25 +149,10 @@
           // if placeholder value in select, do not include as not filled in
           inputs.splice(i, 1)
         } else {
-          input.answer = this.useSelectCount && selectedOptions.length > 1 ? selectedOptions.length : selectedOptions.join(',')
+          input.answer = this.getInputAnswerFromSelect(selectedOptions, forceReportValue)
         }
       } else if (isTextField && elem.value) {
-        if (this.includeTextInputValues || elem.hasAttribute('data-ga4-form-include-input')) {
-          if (this.useTextCount && !isDateField) {
-            input.answer = elem.value.length
-          } else {
-            var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
-            input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)
-          }
-        } else {
-          // if recording JSON and text input not allowed
-          // set the specific answer to '[REDACTED]'
-          if (this.recordJson) {
-            input.answer = '[REDACTED]'
-          } else {
-            this.redacted = true
-          }
-        }
+        input.answer = this.getInputAnswerFromText(elem, isDateField, forceReportValue)
       } else if (inputType === 'file') {
         input.answer = elem.files.length + ' files chosen'
       } else {
@@ -201,6 +189,45 @@
     return inputs
   }
 
+  Ga4FormTracker.prototype.getInputAnswerFromSelect = function (selectedOptions, forceReportValue) {
+    var joinedSelections = selectedOptions.join(',')
+
+    if (forceReportValue) {
+      return joinedSelections
+    }
+
+    if (this.useSelectCount && selectedOptions.length > 1) {
+      return selectedOptions.length
+    }
+
+    return joinedSelections
+  }
+
+  Ga4FormTracker.prototype.getInputAnswerFromText = function (inputElement, isDateField, forceReportValue) {
+    var willRecordInputValue = this.includeTextInputValues || inputElement.hasAttribute('data-ga4-form-include-input')
+    var willReplaceInputValueWithLength = this.useTextCount && !isDateField
+
+    if (forceReportValue) {
+      willReplaceInputValueWithLength = false
+    }
+
+    if (willRecordInputValue) {
+      if (willReplaceInputValueWithLength) {
+        return inputElement.value.length
+      }
+
+      return this.piiRemover.stripPIIWithOverride(inputElement.value, true, true)
+    }
+
+    // if recording JSON when recording text input not allowed
+    // set the specific answer to '[REDACTED]'
+    if (this.recordJson) {
+      return '[REDACTED]'
+    } else {
+      this.redacted = true
+    }
+  }
+
   Ga4FormTracker.prototype.combineGivenAnswers = function (data) {
     var answers = this.recordJson ? {} : []
 

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

@@ -1,89 +1,51 @@
 (function (Modules) {
-  var SETTINGS = {
+  const SETTINGS = {
     label: {
       hide: 'data-text-for-hide',
       show: 'data-text-for-show'
     }
   }
 
-  // Small helpers that update the label when the state of the button has
-  // changed:
-  var setLabel = function ($button, showOrHide) {
-    var newLabel = $button.getAttribute(SETTINGS.label[showOrHide])
+  // Small helpers that update the label when the state of the button has changed:
+  const setLabel = function (button, showOrHide) {
+    const newLabel = button.getAttribute(SETTINGS.label[showOrHide])
 
     if (newLabel) {
-      $button.setAttribute('aria-label', newLabel)
+      button.setAttribute('aria-label', newLabel)
     }
   }
 
   // Wrapper functions to contain all of the mechanisms needed for hiding and
   // toggling the menus.
-  var hide = function ($button, $menu) {
-    $button.setAttribute('aria-expanded', false)
-    $button.classList.remove('gem-c-layout-super-navigation-header__open-button')
-    $menu.setAttribute('hidden', 'hidden')
-    setLabel($button, 'show')
+  const hide = function (button, menu) {
+    button.setAttribute('aria-expanded', false)
+    button.classList.remove('gem-c-layout-super-navigation-header__open-button')
+    menu.setAttribute('hidden', 'hidden')
+    setLabel(button, 'show')
   }
-  var show = function ($button, $menu) {
-    $button.setAttribute('aria-expanded', true)
-    $button.classList.add('gem-c-layout-super-navigation-header__open-button')
-    $menu.removeAttribute('hidden')
-    setLabel($button, 'hide')
+
+  const show = function (button, menu) {
+    button.setAttribute('aria-expanded', true)
+    button.classList.add('gem-c-layout-super-navigation-header__open-button')
+    menu.removeAttribute('hidden')
+    setLabel(button, 'hide')
   }
 
-  var toggle = function ($button, $menu) {
-    var isOpen = $button.getAttribute('aria-expanded') === 'true'
+  const toggle = function (button, menu) {
+    const isOpen = button.getAttribute('aria-expanded') === 'true'
     if (isOpen) {
-      hide($button, $menu)
+      hide(button, menu)
     } else {
-      show($button, $menu)
+      show(button, menu)
     }
   }
 
-  // Clicking an element inside a `button` element causes the `event.target` to
-  // be the inside element, not the button. This can be taken care of by setting
-  // the CSS pointer-events to be none, but that doesn't work for older
-  // browsers, won't work for people with CSS turned off, or for people who are
-  // using CSS overrides.
-  //    This checks if the $element is the `elementType`; if it is, it gets
-  // returned; if not it recursively checks to see if the parent element is a
-  // `elementType`. This means that it can be used with `pointer-events: none`.
-  var closestParentIncluding = function ($element, elementType) {
-    if ($element.tagName.toLowerCase() === elementType.toLowerCase()) {
-      return $element
-    }
-    return closestParentIncluding($element.parentNode, elementType)
-  }
-
-  // Searched the previous elements to find one with the same tag as set in
-  // `elementType` . If it's found the element is returned; if not, it returns
-  // null.
-  var closestPrevious = function ($element, elementType) {
-    if ($element === null) {
-      return null
-    }
-
-    // Using `previousSibling` means that there is a possibility that the
-    // $element could be a text node or a comment node - checking the `nodeType`
-    // of the element will ensure that it's a real element.
-    if ($element.nodeType === 1 && $element.tagName.toLowerCase() === elementType.toLowerCase()) {
-      return $element
-    }
-
-    // If `previousElementSibling` can be used then let's use it as it'll be
-    // slightly faster since it skips things that aren't elements. If not,
-    // `previousSibling` can still be used as there's a `nodeType` check.
-    var previousElement = $element.previousElementSibling || $element.previousSibling
-
-    return closestPrevious(previousElement, elementType)
-  }
-
-  function SuperNavigationMegaMenu ($module) {
-    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')
+  function SuperNavigationMegaMenu (module) {
+    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
@@ -91,132 +53,129 @@
     //    smaller screens
     //  - `data-toggle-desktop-group` is the group that the menu belongs to on
     //    larger screens
-    this.$buttons = this.$module.querySelectorAll(
+    this.buttons = this.module.querySelectorAll(
       'button[aria-controls][data-toggle-mobile-group][data-toggle-desktop-group]'
     )
 
-    this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
+    this.hiddenButtons = this.module.querySelectorAll('button[hidden]')
   }
 
   SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
-    var $target = closestParentIncluding(event.target, 'button')
-    var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
-
-    var toggleGroupAttribute = 'data-toggle-desktop-group'
-    var toggleGroupName = $target.getAttribute(toggleGroupAttribute)
-    var toggleGroupList = this.$module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
-
-    for (var k = 0; k < toggleGroupList.length; k++) {
-      var $element = toggleGroupList[k]
-      if ($element !== $target) {
-        var $menu = this.$module.querySelector('#' + $element.getAttribute('aria-controls'))
-        hide($element, $menu)
+    const target = event.target.closest('button')
+    const targetMenu = this.module.querySelector('#' + target.getAttribute('aria-controls'))
+
+    const toggleGroupAttribute = 'data-toggle-desktop-group'
+    const toggleGroupName = target.getAttribute(toggleGroupAttribute)
+    const toggleGroupList = this.module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
+
+    for (const element of toggleGroupList) {
+      if (element !== target) {
+        const menu = this.module.querySelector('#' + element.getAttribute('aria-controls'))
+        hide(element, menu)
       }
     }
 
-    toggle($target, $targetMenu)
+    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 $searchMenuTabbable = this.$searchMenu.querySelectorAll('li a, input, button')
-    var $lastSearchMenuTabbable = $searchMenuTabbable[$searchMenuTabbable.length - 1]
-
-    if (event.keyCode === KEY_TAB) {
-      if (!this.$navMenu.hasAttribute('hidden')) {
+    if (event.key !== 'Tab' && event.key !== 'Escape') {
+      return
+    }
+
+    const navMenuLinks = this.navMenu.querySelectorAll('li a')
+    const firstNavLink = navMenuLinks[0]
+    const lastNavLink = navMenuLinks[navMenuLinks.length - 1]
+    const searchMenuTabbable = this.searchMenu.querySelectorAll('li a, input, button')
+    const lastSearchMenuTabbable = searchMenuTabbable[searchMenuTabbable.length - 1]
+
+    if (event.key === 'Tab') {
+      if (!this.navMenu.hasAttribute('hidden')) {
         switch (document.activeElement) {
-          case this.$navToggle:
+          case this.navToggle:
             if (!event.shiftKey) {
               event.preventDefault()
-              $firstNavLink.focus()
+              firstNavLink.focus()
             }
             break
-          case $lastNavLink:
+          case lastNavLink:
             if (!event.shiftKey) {
               event.preventDefault()
-              this.$searchToggle.focus()
-              hide(this.$navToggle, this.$navMenu)
+              this.searchToggle.focus()
+              hide(this.navToggle, this.navMenu)
             }
             break
-          case $firstNavLink:
+          case firstNavLink:
             if (event.shiftKey) {
               event.preventDefault()
-              this.$navToggle.focus()
+              this.navToggle.focus()
             }
             break
-          case this.$searchToggle:
+          case this.searchToggle:
             if (event.shiftKey) {
               event.preventDefault()
-              $lastNavLink.focus()
+              lastNavLink.focus()
             }
             break
           default:
             break
         }
-      } else if (!this.$searchMenu.hasAttribute('hidden')) {
-        if (document.activeElement === $lastSearchMenuTabbable) {
+      } else if (!this.searchMenu.hasAttribute('hidden')) {
+        if (document.activeElement === lastSearchMenuTabbable) {
           if (!event.shiftKey) {
-            hide(this.$searchToggle, this.$searchMenu)
+            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()
+    } else if (event.key === 'Escape') {
+      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))
+    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)
+    for (const button of this.buttons) {
+      button.addEventListener('click', this.buttonHandler.bind(this), true)
     }
 
-    // The toggle buttons are hardcoded to be hidden in the markup - this means
-    // that people without JavaScript turned on won't have buttons present that
-    // don't do anything.
-    //     Since JavaScript is enabled we can remove the hidden attribute from
-    // the buttons so that they're perceivable by users.
-    //     As the toggle buttons are now selectable, we should prevent the links
-    // from being selectable to avoid confusion.
-    for (var i = 0; i < this.hiddenButtons.length; i++) {
-      var $element = this.hiddenButtons[i]
-      $element.removeAttribute('hidden')
-
-      var closestSiblingLink = closestPrevious($element, 'a')
-
-      if (closestSiblingLink) {
-        closestSiblingLink.setAttribute('hidden', 'hidden')
+    // Reveal toggle buttons hidden by default in HTML for non-JavaScript users
+    // and hide the fallback links now that JavaScript is available.
+    for (const element of this.hiddenButtons) {
+      element.removeAttribute('hidden')
+
+      let sibling = element.previousElementSibling
+
+      // Find and hide the preceding no JavaScript fallback links
+      while (sibling) {
+        if (sibling.matches('a')) {
+          sibling.setAttribute('hidden', 'hidden')
+          break
+        }
+        sibling = sibling.previousElementSibling
       }
     }
 
-    this.$module.querySelector('.gem-c-layout-super-navigation-header__search-item-link')
+    this.module.querySelector('.gem-c-layout-super-navigation-header__search-item-link')
       .setAttribute('hidden', 'hidden')
 
     // Navigation menu and search menu are hardcoded to be open in the markup -
-    // this means that the menu still makes sense with CSS and JavaScript turned
-    // off.
-    //     The menus now need to be hidden as part of the JavaScript
-    // initialisation.
-    //   - On both mobile and desktop, this means hiding the search menu
-    //   - On mobile, this means hiding the navigation
-    //   - On desktop, this means hiding the navigation button, showing the
-    //     second level navigation menu
-    hide(this.$searchToggle, this.$searchMenu)
-
-    this.$module.classList.add('js-module-initialised')
+    // this means that the menu still makes sense with CSS and JavaScript turned off.
+    // The menus now need to be hidden as part of the JavaScript initialisation:
+    //  - On both mobile and desktop, this means hiding the search menu
+    //  - On mobile, this means hiding the navigation
+    //  - On desktop, this means hiding the navigation button, showing the
+    //    second level navigation menu
+    hide(this.searchToggle, this.searchMenu)
+
+    this.module.classList.add('js-module-initialised')
   }
 
   Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu

data/app/assets/javascripts/govuk_publishing_components/components/option-select.js

@@ -1,15 +1,11 @@
 (function (Modules) {
-  /* This JavaScript provides two functional enhancements to option-select components:
-    1) A count that shows how many results have been checked in the option-container
-    2) Open/closing of the list of checkboxes
-  */
   function OptionSelect ($module) {
     this.$optionSelect = $module
     this.$options = this.$optionSelect.querySelectorAll("input[type='checkbox']")
     this.$optionsContainer = this.$optionSelect.querySelector('.js-options-container')
     this.$optionList = this.$optionsContainer.querySelector('.js-auto-height-inner')
     this.$allCheckboxes = this.$optionsContainer.querySelectorAll('.govuk-checkboxes__item')
-    this.hasFilter = this.$optionSelect.getAttribute('data-filter-element') || ''
+    this.filterAttributes = this.$optionSelect.getAttribute('data-filter-attributes')
 
     this.checkedCheckboxes = []
 
@@ -19,15 +15,9 @@
   }
 
   OptionSelect.prototype.init = function () {
-    if (this.hasFilter.length) {
-      var filterEl = document.createElement('div')
-      filterEl.innerHTML = this.hasFilter
-
-      var optionSelectFilter = document.createElement('div')
-      optionSelectFilter.classList.add('gem-c-option-select__filter')
-      optionSelectFilter.innerHTML = filterEl.childNodes[0].nodeValue
-
-      this.$optionsContainer.parentNode.insertBefore(optionSelectFilter, this.$optionsContainer)
+    if (this.filterAttributes) {
+      this.filterAttributes = JSON.parse(this.filterAttributes)
+      this.$optionsContainer.parentNode.insertBefore(this.createFilter(), this.$optionsContainer)
 
       this.$filter = this.$optionSelect.querySelector('input[name="option-select-filter"]')
       this.$filterCount = document.getElementById(this.$filter.getAttribute('aria-describedby'))
@@ -73,6 +63,26 @@
     }
   }
 
+  OptionSelect.prototype.createFilter = function () {
+    const filter = document.createElement('div')
+    filter.classList.add('gem-c-option-select__filter')
+
+    const label = document.createElement('label')
+    label.classList.add('govuk-label', 'govuk-visually-hidden')
+    label.setAttribute('for', this.filterAttributes.id)
+    label.textContent = this.filterAttributes.title
+
+    const input = document.createElement('input')
+    input.classList.add('gem-c-option-select__filter-input', 'govuk-input')
+    input.name = 'option-select-filter'
+    input.id = this.filterAttributes.id
+    input.setAttribute('aria-describedby', this.filterAttributes.describedby)
+    input.setAttribute('aria-controls', this.filterAttributes.controls)
+
+    filter.append(label, input)
+    return filter
+  }
+
   OptionSelect.prototype.toggleVisibility = function (isTabletOrLarger) {
     if (isTabletOrLarger) {
       if (this.isClosedOnLoad === 'true') {
@@ -142,8 +152,8 @@
 
     var lenChecked = obj.$optionsContainer.querySelectorAll('.govuk-checkboxes__input:checked').length
     var len = showCheckboxes.length + lenChecked
-    var html = len + (len === 1 ? obj.filterTextSingle : obj.filterTextMultiple) + ', ' + lenChecked + obj.filterTextSelected
-    obj.$filterCount.innerHTML = html
+    var hiddenText = len + (len === 1 ? obj.filterTextSingle : obj.filterTextMultiple) + ', ' + lenChecked + obj.filterTextSelected
+    obj.$filterCount.textContent = hiddenText
   }
 
   OptionSelect.prototype.replaceHeadingSpanWithButton = function replaceHeadingSpanWithButton () {

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -168,19 +168,20 @@
       var thisel = this.$module.steps[i]
       var title = thisel.querySelectorAll('.js-step-title')[0]
       var contentId = thisel.querySelectorAll('.js-panel')[0].getAttribute('id')
-      var titleText = title.textContent || title.innerText // IE8 fallback
+      var titleText = title.textContent
 
       title.outerHTML =
-        '<span class="js-step-title">' +
-          '<button ' +
-            'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
-            'aria-expanded="false" aria-controls="' + contentId + '"' + '>' +
-              '<span class="gem-c-step-nav____title-text-focus">' +
-                  '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
-                  '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +
-              '</span>' +
-          '</button>' +
-        '</span>'
+        `<span class="js-step-title">
+          <button class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button"
+            aria-expanded="false" aria-controls="${contentId}">
+              <span class="gem-c-step-nav____title-text-focus">
+                <span class="gem-c-step-nav__title-text js-step-title-text"></span>
+                <span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>
+              </span>
+          </button>
+        </span>`
+
+      thisel.querySelector('.gem-c-step-nav__title-text').textContent = titleText
 
       if (this.$module.isGa4Enabled) {
         var ga4JSON = {

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -45,9 +45,11 @@
         <span class="govuk-heading-s">How to watch this YouTube video</span>
         <span class="gem-c-govspeak__youtube-placeholder-text">There's a YouTube video on this page. You can't access it because of your cookie settings.</span>
         <span class="gem-c-govspeak__youtube-placeholder-text">You can <a href="/help/cookies" class="govuk-link">change your cookie settings</a> or watch the video on YouTube instead:</span>
-        <a href="${href}" class="govuk-link">${text}</a>
+        <a href="${href}" class="govuk-link js-youtube-link"></a>
       `
       placeholder.innerHTML = markup
+      const link = placeholder.querySelector('.js-youtube-link')
+      link.textContent = text
       $linkParent.after(placeholder)
       $linkParent.classList.add('gem-c-govspeak__youtube-placeholder-link')
     }

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

@@ -1,11 +1,13 @@
 // see https://github.com/alphagov/govuk_publishing_components/blob/main/docs/lib/trigger_event.md
-(function (root) {
+(function () {
   'use strict'
 
+  window.GOVUK = window.GOVUK || {}
+
   window.GOVUK.triggerEvent = function (element, eventName, parameters) {
-    var params = parameters || {}
-    var event
-    var keyCode = params.keyCode
+    const params = parameters || {}
+    const keyCode = params.keyCode
+    const key = params.key
 
     if (!Object.prototype.hasOwnProperty.call(params, 'bubbles')) {
       params.bubbles = true
@@ -15,11 +17,10 @@
       params.cancelable = true
     }
 
-    if (typeof window.CustomEvent === 'function') {
-      event = new window.CustomEvent(eventName, params)
-    } else {
-      event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail)
+    const event = new window.CustomEvent(eventName, params)
+
+    if (key) {
+      event.key = key
     }
 
     if (keyCode) {
@@ -30,6 +31,8 @@
       event.shiftKey = true
     }
 
-    element.dispatchEvent(event)
+    if (element && typeof element.dispatchEvent === 'function') {
+      element.dispatchEvent(event)
+    }
   }
-}(window))
+}())

data/app/assets/stylesheets/component_guide/application.scss

@@ -15,7 +15,7 @@ $gem-guide-border-width: 1px;
   border: 3px solid govuk-functional-colour(error);
   margin: 0 0 govuk-spacing(6);
   padding: govuk-spacing(6);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 
   .component-violation__title {
     margin: 0;
@@ -68,7 +68,7 @@ $gem-guide-border-width: 1px;
 }
 
 .component-guide-preview {
-  padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
+  padding: govuk-spacing(8) govuk-spacing(6) govuk-spacing(6);
   border: $gem-guide-border-width solid govuk-functional-colour(border);
   position: relative;
   margin-bottom: govuk-spacing(8);
@@ -115,8 +115,8 @@ $gem-guide-border-width: 1px;
 .component-guide-preview--violation,
 .component-guide-preview--warning {
   margin-top: -$gem-guide-border-width;
-
-  @include govuk-text-colour;
+  
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 19);
 
   &:empty {
@@ -475,7 +475,7 @@ $code-delete-bg: #fadddd;
 
 .gem-full-width__container {
   container-type: inline-size;
-  container-name: gem_page;
+  container-name: gem-page;
 }
 
 .full-width__table-wrapper {
@@ -500,7 +500,7 @@ $code-delete-bg: #fadddd;
   }
 }
 
-@container gem_page (width > 1040px) {
+@container gem-page (width > 1040px) {
   $w: 960px;
 
   .gem-full-width__element {
@@ -529,7 +529,7 @@ $code-delete-bg: #fadddd;
 .govuk-tabs {
   $w: 920px;
 
-  @container gem_page (width > 1040px) {
+  @container gem-page (width > 1040px) {
     .full-width__table-wrapper {
       margin-left: calc(((-100cqw + $w) / 2) - 1px);
       margin-right: calc(((-100cqw + $w) / 2) - 1px);

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/accordion/accordion";
+@import "govuk/components/accordion";
 
 // Prevent elements inside the button from receiving click events
 .gem-c-accordion__show-all > * {