govuk_publishing_components 32.1.0 → 35.0.0

data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs

@@ -0,0 +1,60 @@
+/* eslint-disable es-x/no-string-prototype-trim -- Polyfill imported */
+
+import '../vendor/polyfills/Element/prototype/dataset.mjs'
+import '../vendor/polyfills/String/prototype/trim.mjs'
+
+/**
+ * Normalise string
+ *
+ * 'If it looks like a duck, and it quacks like a duck…' 🦆
+ *
+ * If the passed value looks like a boolean or a number, convert it to a boolean
+ * or number.
+ *
+ * Designed to be used to convert config passed via data attributes (which are
+ * always strings) into something sensible.
+ *
+ * @param {string} value - The value to normalise
+ * @returns {string | boolean | number | undefined} Normalised data
+ */
+export function normaliseString (value) {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  var trimmedValue = value.trim()
+
+  if (trimmedValue === 'true') {
+    return true
+  }
+
+  if (trimmedValue === 'false') {
+    return false
+  }
+
+  // Empty / whitespace-only strings are considered finite so we need to check
+  // the length of the trimmed string as well
+  if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    return Number(trimmedValue)
+  }
+
+  return value
+}
+
+/**
+ * Normalise dataset
+ *
+ * Loop over an object and normalise each value using normaliseData function
+ *
+ * @param {DOMStringMap} dataset - HTML element dataset
+ * @returns {Object<string, unknown>} Normalised dataset
+ */
+export function normaliseDataset (dataset) {
+  var out = {}
+
+  for (var key in dataset) {
+    out[key] = normaliseString(dataset[key])
+  }
+
+  return out
+}

data/node_modules/govuk-frontend/govuk-esm/common.mjs

@@ -1,28 +1,6 @@
-/**
- * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
- * This seems to fail in IE8, requires more investigation.
- * See: https://github.com/imagitama/nodelist-foreach-polyfill
- */
-export function nodeListForEach (nodes, callback) {
-  if (window.NodeList.prototype.forEach) {
-    return nodes.forEach(callback)
-  }
-  for (var i = 0; i < nodes.length; i++) {
-    callback.call(window, nodes[i], i, nodes)
-  }
-}
-
-// Used to generate a unique string, allows multiple instances of the component without
-// Them conflicting with each other.
-// https://stackoverflow.com/a/8809472
-export function generateUniqueID () {
-  var d = new Date().getTime()
-  if (typeof window.performance !== 'undefined' && typeof window.performance.now === 'function') {
-    d += window.performance.now() // use high-precision timer if available
-  }
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = (d + Math.random() * 16) % 16 | 0
-    d = Math.floor(d / 16)
-    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-  })
-}
+// Implementation of common function is gathered in the `common` folder
+// as some are split in their own modules to limit impacts of the polyfills
+// they require.
+// This module exports the non polyfilled methods as they used to be
+// to avoid breaking changes
+export * from './common/index.mjs'

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

@@ -1,39 +1,71 @@
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+/* eslint-disable es-x/no-string-prototype-trim -- Polyfill imported */
 
-/*
-  Accordion
-
-  This allows a collection of sections to be collapsed by default,
-  showing only their headers. Sections can be expanded or collapsed
-  individually by clicking their headers. An "Show all sections" button is
-  also added to the top of the accordion, which switches to "Hide all sections"
-  when all the sections are expanded.
+import { nodeListForEach, mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
+import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import { I18n } from '../../i18n.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'
 
-  The state of each section is saved to the DOM via the `aria-expanded`
-  attribute, which also provides accessibility.
+/**
+ * @constant
+ * @type {AccordionTranslations}
+ * @see Default value for {@link AccordionConfig.i18n}
+ * @default
+ */
+var ACCORDION_TRANSLATIONS = {
+  hideAllSections: 'Hide all sections',
+  hideSection: 'Hide',
+  hideSectionAriaLabel: 'Hide this section',
+  showAllSections: 'Show all sections',
+  showSection: 'Show',
+  showSectionAriaLabel: 'Show this section'
+}
 
-  A Chevron icon has been added for extra affordance that this is an interactive element.
+/**
+ * Accordion component
+ *
+ * This allows a collection of sections to be collapsed by default, showing only
+ * their headers. Sections can be expanded or collapsed individually by clicking
+ * their headers. A "Show all sections" button is also added to the top of the
+ * accordion, which switches to "Hide all sections" when all the sections are
+ * expanded.
+ *
+ * The state of each section is saved to the DOM via the `aria-expanded`
+ * attribute, which also provides accessibility.
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for accordion
+ * @param {AccordionConfig} [config] - Accordion config
+ */
+function Accordion ($module, config) {
+  this.$module = $module
 
-*/
+  var defaultConfig = {
+    i18n: ACCORDION_TRANSLATIONS
+  }
 
-import { nodeListForEach } from '../../common.mjs'
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-import '../../vendor/polyfills/Element/prototype/classList.mjs'
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  )
 
-function Accordion ($module) {
-  this.$module = $module
-  this.moduleId = $module.getAttribute('id')
-  this.$sections = $module.querySelectorAll('.govuk-accordion__section')
-  this.$showAllButton = ''
-  this.browserSupportsSessionStorage = helper.checkForSessionStorage()
+  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'
 
@@ -45,9 +77,15 @@ function Accordion ($module) {
 
   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) {
@@ -62,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')
@@ -71,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')
@@ -82,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) {
@@ -108,15 +155,21 @@ 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')
   $button.setAttribute('type', 'button')
-  $button.setAttribute('aria-controls', this.moduleId + '-content-' + (index + 1))
+  $button.setAttribute('aria-controls', this.$module.id + '-content-' + (index + 1))
 
   // Copy all attributes (https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) from $span to $button
   for (var i = 0; i < $span.attributes.length; i++) {
@@ -143,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
@@ -198,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)
@@ -213,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
@@ -228,29 +299,59 @@ 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 newButtonText = expanded ? 'Hide' : 'Show'
+  var $content = $section.querySelector('.' + this.sectionContentClass)
 
-  // Build additional copy of "this section" for assistive technology and place inside toggle link
-  var $visuallyHiddenText = document.createElement('span')
-  $visuallyHiddenText.classList.add('govuk-visually-hidden')
-  $visuallyHiddenText.innerHTML = ' this section'
+  var newButtonText = expanded
+    ? this.i18n.t('hideSection')
+    : this.i18n.t('showSection')
 
-  $showHideText.innerHTML = newButtonText
-  $showHideText.appendChild($visuallyHiddenText)
+  $showHideText.innerText = newButtonText
   $button.setAttribute('aria-expanded', expanded)
 
+  // Update aria-label combining
+  var ariaLabelParts = []
+
+  var $headingText = $section.querySelector('.' + this.sectionHeadingTextClass)
+  if ($headingText) {
+    ariaLabelParts.push($headingText.innerText.trim())
+  }
+
+  var $summary = $section.querySelector('.' + this.sectionSummaryClass)
+  if ($summary) {
+    ariaLabelParts.push($summary.innerText.trim())
+  }
+
+  var ariaLabelMessage = expanded
+    ? this.i18n.t('hideSectionAriaLabel')
+    : this.i18n.t('showSectionAriaLabel')
+  ariaLabelParts.push(ariaLabelMessage)
+
+  /*
+   * Join with a comma to add pause for assistive technology.
+   * Example: [heading]Section A ,[pause] Show this section.
+   * https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/
+   */
+  $button.setAttribute('aria-label', ariaLabelParts.join(' , '))
+
   // 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
@@ -258,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
@@ -274,24 +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 ? 'Hide all sections' : 'Show all sections'
+  var newButtonText = expanded
+    ? this.i18n.t('hideAllSections')
+    : this.i18n.t('showAllSections')
+
   this.$showAllButton.setAttribute('aria-expanded', expanded)
-  $showAllText.innerHTML = 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
@@ -306,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
@@ -326,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)
@@ -343,22 +470,48 @@ Accordion.prototype.setInitialState = function ($section) {
 }
 
 /**
-* Create an element to improve semantics of the section button with punctuation
-* @return {object} DOM element
-*
-* Used to add pause (with a comma) for assistive technology.
-* Example: [heading]Section A ,[pause] Show this section.
-* https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/
-*
-* 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
-*/
+ * Create an element to improve semantics of the section button with punctuation
+ *
+ * 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
 }
 
 export default Accordion
+
+/**
+ * Accordion config
+ *
+ * @typedef {object} AccordionConfig
+ * @property {AccordionTranslations} [i18n = ACCORDION_TRANSLATIONS] - See constant {@link ACCORDION_TRANSLATIONS}
+ */
+
+/**
+ * Accordion translations
+ *
+ * @typedef {object} AccordionTranslations
+ *
+ * Messages used by the component for the labels of its buttons. This includes
+ * the visible text shown on screen, and text to help assistive technology users
+ * for the buttons toggling each section.
+ * @property {string} [hideAllSections] - The text content for the 'Hide all
+ * sections' button, used when at least one section is expanded.
+ * @property {string} [hideSection] - The text content for the 'Hide'
+ * button, used when a section is expanded.
+ * @property {string} [hideSectionAriaLabel] - The text content appended to the
+ * 'Hide' button's accessible name when a section is expanded.
+ * @property {string} [showAllSections] - The text content for the 'Show all
+ * sections' button, used when all sections are collapsed.
+ * @property {string} [showSection] - The text content for the 'Show'
+ * button, used when a section is collapsed.
+ * @property {string} [showSectionAriaLabel] - The text content appended to the
+ * 'Show' button's accessible name when a section is expanded.
+ */