govuk_publishing_components 34.7.0 → 34.8.0

data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs

@@ -1,9 +1,14 @@
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+/* eslint-disable es-x/no-string-prototype-trim -- Polyfill imported */
+
 import { nodeListForEach, mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
+import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 import { I18n } from '../../i18n.mjs'
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Element/prototype/closest.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 import '../../vendor/polyfills/String/prototype/trim.mjs'
-import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 
 /**
  * @constant
@@ -38,27 +43,29 @@ var ACCORDION_TRANSLATIONS = {
  */
 function Accordion ($module, config) {
   this.$module = $module
-  this.$sections = $module.querySelectorAll('.govuk-accordion__section')
-  this.browserSupportsSessionStorage = helper.checkForSessionStorage()
 
   var defaultConfig = {
     i18n: ACCORDION_TRANSLATIONS
   }
+
   this.config = mergeConfigs(
     defaultConfig,
     config || {},
     normaliseDataset($module.dataset)
   )
+
   this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'))
 
   this.controlsClass = 'govuk-accordion__controls'
   this.showAllClass = 'govuk-accordion__show-all'
   this.showAllTextClass = 'govuk-accordion__show-all-text'
 
+  this.sectionClass = 'govuk-accordion__section'
   this.sectionExpandedClass = 'govuk-accordion__section--expanded'
   this.sectionButtonClass = 'govuk-accordion__section-button'
   this.sectionHeaderClass = 'govuk-accordion__section-header'
   this.sectionHeadingClass = 'govuk-accordion__section-heading'
+  this.sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider'
   this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text'
   this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus'
 
@@ -70,9 +77,15 @@ function Accordion ($module, config) {
 
   this.sectionSummaryClass = 'govuk-accordion__section-summary'
   this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus'
+  this.sectionContentClass = 'govuk-accordion__section-content'
+
+  this.$sections = this.$module.querySelectorAll('.' + this.sectionClass)
+  this.browserSupportsSessionStorage = helper.checkForSessionStorage()
 }
 
-// Initialize component
+/**
+ * Initialise component
+ */
 Accordion.prototype.init = function () {
   // Check for module
   if (!this.$module) {
@@ -87,7 +100,9 @@ Accordion.prototype.init = function () {
   this.updateShowAllButton(areAllSectionsOpen)
 }
 
-// Initialise controls and set attributes
+/**
+ * Initialise controls and set attributes
+ */
 Accordion.prototype.initControls = function () {
   // Create "Show all" button and set attributes
   this.$showAllButton = document.createElement('button')
@@ -96,9 +111,9 @@ Accordion.prototype.initControls = function () {
   this.$showAllButton.setAttribute('aria-expanded', 'false')
 
   // Create icon, add to element
-  var $icon = document.createElement('span')
-  $icon.classList.add(this.upChevronIconClass)
-  this.$showAllButton.appendChild($icon)
+  this.$showAllIcon = document.createElement('span')
+  this.$showAllIcon.classList.add(this.upChevronIconClass)
+  this.$showAllButton.appendChild(this.$showAllIcon)
 
   // Create control wrapper and add controls to it
   var $accordionControls = document.createElement('div')
@@ -107,15 +122,22 @@ Accordion.prototype.initControls = function () {
   this.$module.insertBefore($accordionControls, this.$module.firstChild)
 
   // Build additional wrapper for Show all toggle text and place after icon
-  var $wrappershowAllText = document.createElement('span')
-  $wrappershowAllText.classList.add(this.showAllTextClass)
-  this.$showAllButton.appendChild($wrappershowAllText)
+  this.$showAllText = document.createElement('span')
+  this.$showAllText.classList.add(this.showAllTextClass)
+  this.$showAllButton.appendChild(this.$showAllText)
 
   // Handle click events on the show/hide all button
   this.$showAllButton.addEventListener('click', this.onShowOrHideAllToggle.bind(this))
+
+  // Handle 'beforematch' events, if the user agent supports them
+  if ('onbeforematch' in document) {
+    document.addEventListener('beforematch', this.onBeforeMatch.bind(this))
+  }
 }
 
-// Initialise section headers
+/**
+ * Initialise section headers
+ */
 Accordion.prototype.initSectionHeaders = function () {
   // Loop through section headers
   nodeListForEach(this.$sections, function ($section, i) {
@@ -133,10 +155,16 @@ Accordion.prototype.initSectionHeaders = function () {
   }.bind(this))
 }
 
-Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
-  var $span = $headerWrapper.querySelector('.' + this.sectionButtonClass)
-  var $heading = $headerWrapper.querySelector('.' + this.sectionHeadingClass)
-  var $summary = $headerWrapper.querySelector('.' + this.sectionSummaryClass)
+/**
+ * Construct section header
+ *
+ * @param {HTMLDivElement} $header - Section header
+ * @param {number} index - Section index
+ */
+Accordion.prototype.constructHeaderMarkup = function ($header, index) {
+  var $span = $header.querySelector('.' + this.sectionButtonClass)
+  var $heading = $header.querySelector('.' + this.sectionHeadingClass)
+  var $summary = $header.querySelector('.' + this.sectionSummaryClass)
 
   // Create a button element that will replace the '.govuk-accordion__section-button' span
   var $button = document.createElement('button')
@@ -168,23 +196,23 @@ Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
   $headingTextFocus.innerHTML = $span.innerHTML
 
   // Create container for show / hide icons and text.
-  var $showToggle = document.createElement('span')
-  $showToggle.classList.add(this.sectionShowHideToggleClass)
+  var $showHideToggle = document.createElement('span')
+  $showHideToggle.classList.add(this.sectionShowHideToggleClass)
   // Tell Google not to index the 'show' text as part of the heading
   // For the snippet to work with JavaScript, it must be added before adding the page element to the
   // page's DOM. See https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr
-  $showToggle.setAttribute('data-nosnippet', '')
+  $showHideToggle.setAttribute('data-nosnippet', '')
   // Create an inner container to limit the width of the focus state
-  var $showToggleFocus = document.createElement('span')
-  $showToggleFocus.classList.add(this.sectionShowHideToggleFocusClass)
-  $showToggle.appendChild($showToggleFocus)
+  var $showHideToggleFocus = document.createElement('span')
+  $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass)
+  $showHideToggle.appendChild($showHideToggleFocus)
   // Create wrapper for the show / hide text. Append text after the show/hide icon
-  var $showToggleText = document.createElement('span')
-  var $icon = document.createElement('span')
-  $icon.classList.add(this.upChevronIconClass)
-  $showToggleFocus.appendChild($icon)
-  $showToggleText.classList.add(this.sectionShowHideTextClass)
-  $showToggleFocus.appendChild($showToggleText)
+  var $showHideText = document.createElement('span')
+  var $showHideIcon = document.createElement('span')
+  $showHideIcon.classList.add(this.upChevronIconClass)
+  $showHideToggleFocus.appendChild($showHideIcon)
+  $showHideText.classList.add(this.sectionShowHideTextClass)
+  $showHideToggleFocus.appendChild($showHideText)
 
   // Append elements to the button:
   // 1. Heading text
@@ -223,13 +251,29 @@ Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
     $button.appendChild(this.getButtonPunctuationEl())
   }
 
-  $button.appendChild($showToggle)
+  $button.appendChild($showHideToggle)
 
   $heading.removeChild($span)
   $heading.appendChild($button)
 }
 
-// When section toggled, set and store state
+/**
+ * When a section is opened by the user agent via the 'beforematch' event
+ *
+ * @param {Event} event - Generic event
+ */
+Accordion.prototype.onBeforeMatch = function (event) {
+  var $section = event.target.closest('.' + this.sectionClass)
+  if ($section) {
+    this.setExpanded(true, $section)
+  }
+}
+
+/**
+ * When section toggled, set and store state
+ *
+ * @param {HTMLElement} $section - Section element
+ */
 Accordion.prototype.onSectionToggle = function ($section) {
   var expanded = this.isExpanded($section)
   this.setExpanded(!expanded, $section)
@@ -238,7 +282,9 @@ Accordion.prototype.onSectionToggle = function ($section) {
   this.storeState($section)
 }
 
-// When Open/Close All toggled, set and store state
+/**
+ * When Open/Close All toggled, set and store state
+ */
 Accordion.prototype.onShowOrHideAllToggle = function () {
   var $module = this
   var $sections = this.$sections
@@ -253,11 +299,18 @@ Accordion.prototype.onShowOrHideAllToggle = function () {
   $module.updateShowAllButton(nowExpanded)
 }
 
-// Set section attributes when opened/closed
+/**
+ * Set section attributes when opened/closed
+ *
+ * @param {boolean} expanded - Section expanded
+ * @param {HTMLElement} $section - Section element
+ */
 Accordion.prototype.setExpanded = function (expanded, $section) {
-  var $icon = $section.querySelector('.' + this.upChevronIconClass)
+  var $showHideIcon = $section.querySelector('.' + this.upChevronIconClass)
   var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
   var $button = $section.querySelector('.' + this.sectionButtonClass)
+  var $content = $section.querySelector('.' + this.sectionContentClass)
+
   var newButtonText = expanded
     ? this.i18n.t('hideSection')
     : this.i18n.t('showSection')
@@ -266,8 +319,12 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   $button.setAttribute('aria-expanded', expanded)
 
   // Update aria-label combining
-  var $header = $section.querySelector('.' + this.sectionHeadingTextClass)
-  var ariaLabelParts = [$header.innerText.trim()]
+  var ariaLabelParts = []
+
+  var $headingText = $section.querySelector('.' + this.sectionHeadingTextClass)
+  if ($headingText) {
+    ariaLabelParts.push($headingText.innerText.trim())
+  }
 
   var $summary = $section.querySelector('.' + this.sectionSummaryClass)
   if ($summary) {
@@ -288,11 +345,13 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
 
   // Swap icon, change class
   if (expanded) {
+    $content.removeAttribute('hidden')
     $section.classList.add(this.sectionExpandedClass)
-    $icon.classList.remove(this.downChevronIconClass)
+    $showHideIcon.classList.remove(this.downChevronIconClass)
   } else {
+    $content.setAttribute('hidden', 'until-found')
     $section.classList.remove(this.sectionExpandedClass)
-    $icon.classList.add(this.downChevronIconClass)
+    $showHideIcon.classList.add(this.downChevronIconClass)
   }
 
   // See if "Show all sections" button text should be updated
@@ -300,12 +359,21 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   this.updateShowAllButton(areAllSectionsOpen)
 }
 
-// Get state of section
+/**
+ * Get state of section
+ *
+ * @param {HTMLElement} $section - Section element
+ * @returns {boolean} True if expanded
+ */
 Accordion.prototype.isExpanded = function ($section) {
   return $section.classList.contains(this.sectionExpandedClass)
 }
 
-// Check if all sections are open
+/**
+ * Check if all sections are open
+ *
+ * @returns {boolean} True if all sections are open
+ */
 Accordion.prototype.checkIfAllSectionsOpen = function () {
   // Get a count of all the Accordion sections
   var sectionsCount = this.$sections.length
@@ -316,26 +384,33 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
   return areAllSectionsOpen
 }
 
-// Update "Show all sections" button
+/**
+ * Update "Show all sections" button
+ *
+ * @param {boolean} expanded - Section expanded
+ */
 Accordion.prototype.updateShowAllButton = function (expanded) {
-  var $showAllIcon = this.$showAllButton.querySelector('.' + this.upChevronIconClass)
-  var $showAllText = this.$showAllButton.querySelector('.' + this.showAllTextClass)
   var newButtonText = expanded
     ? this.i18n.t('hideAllSections')
     : this.i18n.t('showAllSections')
+
   this.$showAllButton.setAttribute('aria-expanded', expanded)
-  $showAllText.innerText = newButtonText
+  this.$showAllText.innerText = newButtonText
 
   // Swap icon, toggle class
   if (expanded) {
-    $showAllIcon.classList.remove(this.downChevronIconClass)
+    this.$showAllIcon.classList.remove(this.downChevronIconClass)
   } else {
-    $showAllIcon.classList.add(this.downChevronIconClass)
+    this.$showAllIcon.classList.add(this.downChevronIconClass)
   }
 }
 
-// Check for `window.sessionStorage`, and that it actually works.
 var helper = {
+  /**
+   * Check for `window.sessionStorage`, and that it actually works.
+   *
+   * @returns {boolean} True if session storage is available
+   */
   checkForSessionStorage: function () {
     var testString = 'this is the test string'
     var result
@@ -350,7 +425,11 @@ var helper = {
   }
 }
 
-// Set the state of the accordions in sessionStorage
+/**
+ * Set the state of the accordions in sessionStorage
+ *
+ * @param {HTMLElement} $section - Section element
+ */
 Accordion.prototype.storeState = function ($section) {
   if (this.browserSupportsSessionStorage) {
     // We need a unique way of identifying each content in the Accordion. Since
@@ -370,7 +449,11 @@ Accordion.prototype.storeState = function ($section) {
   }
 }
 
-// Read the state of the accordions from sessionStorage
+/**
+ * Read the state of the accordions from sessionStorage
+ *
+ * @param {HTMLElement} $section - Section element
+ */
 Accordion.prototype.setInitialState = function ($section) {
   if (this.browserSupportsSessionStorage) {
     var $button = $section.querySelector('.' + this.sectionButtonClass)
@@ -389,15 +472,15 @@ Accordion.prototype.setInitialState = function ($section) {
 /**
  * Create an element to improve semantics of the section button with punctuation
  *
- * @returns {HTMLSpanElement} DOM element
- *
  * Adding punctuation to the button can also improve its general semantics by dividing its contents
  * into thematic chunks.
  * See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
+ *
+ * @returns {HTMLElement} DOM element
  */
 Accordion.prototype.getButtonPunctuationEl = function () {
   var $punctuationEl = document.createElement('span')
-  $punctuationEl.classList.add('govuk-visually-hidden', 'govuk-accordion__section-heading-divider')
+  $punctuationEl.classList.add('govuk-visually-hidden', this.sectionHeadingDividerClass)
   $punctuationEl.innerHTML = ', '
   return $punctuationEl
 }

data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs

@@ -1,6 +1,8 @@
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 var KEY_SPACE = 32
@@ -10,8 +12,8 @@ var DEBOUNCE_TIMEOUT_IN_SECONDS = 1
  * JavaScript enhancements for the Button component
  *
  * @class
- * @param {HTMLElement} $module - The element this component controls
- * @param {ButtonConfig} config - Button config
+ * @param {HTMLElement} $module - HTML element to use for button
+ * @param {ButtonConfig} [config] - Button config
  */
 function Button ($module, config) {
   if (!$module) {
@@ -51,14 +53,14 @@ Button.prototype.init = function () {
  *
  * See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
  *
- * @param {KeyboardEvent} event
+ * @param {KeyboardEvent} event - Keydown event
  */
 Button.prototype.handleKeyDown = function (event) {
-  var target = event.target
+  var $target = event.target
 
-  if (target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
+  if ($target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
     event.preventDefault() // prevent the page from scrolling
-    target.click()
+    $target.click()
   }
 }
 
@@ -69,8 +71,8 @@ Button.prototype.handleKeyDown = function (event) {
  * stops people accidentally causing multiple form submissions by double
  * clicking buttons.
  *
- * @param {MouseEvent} event
- * @returns {undefined | false} - Returns undefined, or false when debounced
+ * @param {MouseEvent} event - Mouse click event
+ * @returns {undefined | false} Returns undefined, or false when debounced
  */
 Button.prototype.debounce = function (event) {
   // Check the button that was clicked has preventDoubleClick enabled

data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs

@@ -1,11 +1,14 @@
-import '../../vendor/polyfills/Date/now.mjs'
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normalisation
-import '../../vendor/polyfills/Element/prototype/classList.mjs'
+/* eslint-disable es-x/no-date-now -- Polyfill imported */
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
+import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'
 import { extractConfigByNamespace, mergeConfigs } from '../../common/index.mjs'
-import { I18n } from '../../i18n.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'
+import { I18n } from '../../i18n.mjs'
+import '../../vendor/polyfills/Date/now.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 /**
  * @constant
@@ -50,7 +53,7 @@ var CHARACTER_COUNT_TRANSLATIONS = {
  * of the available characters/words has been entered.
  *
  * @class
- * @param {HTMLElement} $module - The element this component controls
+ * @param {HTMLElement} $module - HTML element to use for character count
  * @param {CharacterCountConfig} [config] - Character count config
  */
 function CharacterCount ($module, config) {

data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs

@@ -1,8 +1,9 @@
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-// addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Event.mjs'
-import '../../vendor/polyfills/Element/prototype/classList.mjs'
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
 import { nodeListForEach } from '../../common/index.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 /**
  * Checkboxes component
@@ -16,7 +17,7 @@ function Checkboxes ($module) {
 }
 
 /**
- * Initialise Checkboxes
+ * Initialise component
  *
  * Checkboxes can be associated with a 'conditionally revealed' content block –
  * for example, a checkbox for 'Phone' could reveal an additional form field for
@@ -34,17 +35,17 @@ Checkboxes.prototype.init = function () {
   var $inputs = this.$inputs
 
   nodeListForEach($inputs, function ($input) {
-    var target = $input.getAttribute('data-aria-controls')
+    var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip checkboxes without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !document.getElementById(target)) {
+    if (!targetId || !document.getElementById(targetId)) {
       return
     }
 
     // Promote the data-aria-controls attribute to a aria-controls attribute
     // so that the relationship is exposed in the AOM
-    $input.setAttribute('aria-controls', target)
+    $input.setAttribute('aria-controls', targetId)
     $input.removeAttribute('data-aria-controls')
   })
 
@@ -63,11 +64,12 @@ Checkboxes.prototype.init = function () {
   // for example if they are added to the page dynamically, so sync now too.
   this.syncAllConditionalReveals()
 
+  // Handle events
   $module.addEventListener('click', this.handleClick.bind(this))
 }
 
 /**
- * Sync the conditional reveal states for all inputs in this $module.
+ * Sync the conditional reveal states for all checkboxes in this $module.
  */
 Checkboxes.prototype.syncAllConditionalReveals = function () {
   nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
@@ -97,6 +99,8 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
  *
  * Find any other checkbox inputs with the same name value, and uncheck them.
  * This is useful for when a “None of these" checkbox is checked.
+ *
+ * @param {HTMLElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
   var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]')
@@ -111,11 +115,13 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
 }
 
 /**
- * Uncheck exclusive inputs
+ * Uncheck exclusive checkboxes
  *
  * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
  * and uncheck them. This helps prevent someone checking both a regular checkbox and a
  * "None of these" checkbox in the same fieldset.
+ *
+ * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
   var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
@@ -140,30 +146,30 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
  * @param {MouseEvent} event - Click event
  */
 Checkboxes.prototype.handleClick = function (event) {
-  var $target = event.target
+  var $clickedInput = event.target
 
   // Ignore clicks on things that aren't checkbox inputs
-  if ($target.type !== 'checkbox') {
+  if ($clickedInput.type !== 'checkbox') {
     return
   }
 
   // If the checkbox conditionally-reveals some content, sync the state
-  var hasAriaControls = $target.getAttribute('aria-controls')
+  var hasAriaControls = $clickedInput.getAttribute('aria-controls')
   if (hasAriaControls) {
-    this.syncConditionalRevealWithInputState($target)
+    this.syncConditionalRevealWithInputState($clickedInput)
   }
 
   // No further behaviour needed for unchecking
-  if (!$target.checked) {
+  if (!$clickedInput.checked) {
     return
   }
 
   // Handle 'exclusive' checkbox behaviour (ie "None of these")
-  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive')
+  var hasBehaviourExclusive = ($clickedInput.getAttribute('data-behaviour') === 'exclusive')
   if (hasBehaviourExclusive) {
-    this.unCheckAllInputsExcept($target)
+    this.unCheckAllInputsExcept($clickedInput)
   } else {
-    this.unCheckExclusiveInputs($target)
+    this.unCheckExclusiveInputs($clickedInput)
   }
 }
 

data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs

@@ -1,12 +1,14 @@
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
 /**
  * JavaScript 'polyfill' for HTML5's <details> and <summary> elements
  * and 'shim' to add accessiblity enhancements for all browsers
  *
  * http://caniuse.com/#feat=details
  */
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
 import { generateUniqueID } from '../../common/index.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 var KEY_ENTER = 13
 var KEY_SPACE = 32
@@ -21,6 +23,9 @@ function Details ($module) {
   this.$module = $module
 }
 
+/**
+ * Initialise component
+ */
 Details.prototype.init = function () {
   if (!this.$module) {
     return
@@ -36,6 +41,9 @@ Details.prototype.init = function () {
   this.polyfillDetails()
 }
 
+/**
+ * Polyfill component in older browsers
+ */
 Details.prototype.polyfillDetails = function () {
   var $module = this.$module
 
@@ -79,7 +87,7 @@ Details.prototype.polyfillDetails = function () {
   }
 
   // Bind an event to handle summary elements
-  this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this))
+  this.polyfillHandleInputs(this.polyfillSetAttributes.bind(this))
 }
 
 /**
@@ -104,21 +112,20 @@ Details.prototype.polyfillSetAttributes = function () {
 /**
  * Handle cross-modal click events
  *
- * @param {object} node - element
  * @param {polyfillHandleInputsCallback} callback - function
  */
-Details.prototype.polyfillHandleInputs = function (node, callback) {
-  node.addEventListener('keypress', function (event) {
-    var target = event.target
+Details.prototype.polyfillHandleInputs = function (callback) {
+  this.$summary.addEventListener('keypress', function (event) {
+    var $target = event.target
     // When the key gets pressed - check if it is enter or space
     if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
-      if (target.nodeName.toLowerCase() === 'summary') {
+      if ($target.nodeName.toLowerCase() === 'summary') {
         // Prevent space from scrolling the page
         // and enter from submitting a form
         event.preventDefault()
         // Click to let the click event do all the necessary action
-        if (target.click) {
-          target.click()
+        if ($target.click) {
+          $target.click()
         } else {
           // except Safari 5.1 and under don't support .click() here
           callback(event)
@@ -128,22 +135,22 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
   })
 
   // Prevent keyup to prevent clicking twice in Firefox when using space key
-  node.addEventListener('keyup', function (event) {
-    var target = event.target
+  this.$summary.addEventListener('keyup', function (event) {
+    var $target = event.target
     if (event.keyCode === KEY_SPACE) {
-      if (target.nodeName.toLowerCase() === 'summary') {
+      if ($target.nodeName.toLowerCase() === 'summary') {
         event.preventDefault()
       }
     }
   })
 
-  node.addEventListener('click', callback)
+  this.$summary.addEventListener('click', callback)
 }
 
 export default Details
 
 /**
  * @callback polyfillHandleInputsCallback
- * @param {KeyboardEvent} event - Keyboard event
- * @returns {undefined}
+ * @param {UIEvent} event - Keyboard or mouse event
+ * @returns {void}
  */