govuk_tech_docs 6.5.2.1 → 6.6.0.beta

data/node_modules/govuk-frontend/dist/govuk/component.mjs

@@ -1,6 +1,7 @@
 import { isInitialised, isSupported } from './common/index.mjs';
 import { InitError, ElementError, SupportError } from './errors/index.mjs';
 
+const _self = typeof globalThis !== 'undefined' ? globalThis : self;
 class Component {
   /**
    * Returns the root element of the component
@@ -54,7 +55,7 @@ class Component {
 /**
  * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-Component.elementType = HTMLElement;
+Component.elementType = _self.HTMLElement;
 
 export { Component };
 //# sourceMappingURL=component.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/_index.import.scss

@@ -10,6 +10,7 @@
 @import "error-message";
 @import "error-summary";
 @import "exit-this-page";
+@import "feedback";
 @import "fieldset";
 @import "file-upload";
 @import "footer";
@@ -19,6 +20,7 @@
 @import "input";
 @import "inset-text";
 @import "label";
+@import "language-navigation";
 @import "notification-banner";
 @import "pagination";
 @import "panel";

data/node_modules/govuk-frontend/dist/govuk/components/_index.scss

@@ -10,6 +10,7 @@
 @use "error-message";
 @use "error-summary";
 @use "exit-this-page";
+@use "feedback";
 @use "fieldset";
 @use "file-upload";
 @use "footer";
@@ -19,6 +20,7 @@
 @use "input";
 @use "inset-text";
 @use "label";
+@use "language-navigation";
 @use "notification-banner";
 @use "pagination";
 @use "panel";

data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js

@@ -29,6 +29,9 @@
   function isObject(option) {
     return !!option && typeof option === 'object' && !isArray(option);
   }
+  function isScope($scope) {
+    return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+  }
   function formatErrorMessage(Component, message) {
     return `${Component.moduleName}: ${message}`;
   }
@@ -47,11 +50,14 @@
     /**
      * Checks if GOV.UK Frontend is supported on this page
      *
-     * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+     * @param {Element | Document | null | string} [scopeOrMessage] - HTML element `<body>` checked for browser support or support error message
      */
-    constructor($scope = document.body) {
-      const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
-      super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+    constructor(scopeOrMessage = document.body) {
+      let supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+      if (!isScope(scopeOrMessage)) {
+        supportMessage = 'GOV.UK Frontend initialised without `<script type="module">`';
+      }
+      super(typeof scopeOrMessage === 'string' ? scopeOrMessage : supportMessage);
       this.name = 'SupportError';
     }
   }
@@ -92,6 +98,7 @@
    * @import { ComponentWithModuleName } from '../common/index.mjs'
    */
 
+  const _self = typeof globalThis !== 'undefined' ? globalThis : self;
   class Component {
     /**
      * Returns the root element of the component
@@ -145,7 +152,7 @@
   /**
    * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  Component.elementType = HTMLElement;
+  Component.elementType = _self.HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
   class ConfigurableComponent extends Component {
@@ -170,10 +177,14 @@
         throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
       }
       const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
-      this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+      this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {});
+      this._config = mergeConfigs(this._config, this[configOverride](datasetConfig), datasetConfig);
     }
   }
   function normaliseString(value, property) {
+    if (property != null && property.type && !['string', 'number', 'boolean'].includes(property.type)) {
+      return;
+    }
     const trimmedValue = value ? value.trim() : '';
     let output;
     let outputType = property == null ? void 0 : property.type;
@@ -293,6 +304,17 @@
    * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
    */
 
+  function createElement(tagName, attributes = {}, children = []) {
+    const $element = document.createElement(tagName);
+    Object.entries(attributes).forEach(([name, value]) => {
+      $element.setAttribute(name, value);
+    });
+    for (const child of children) {
+      $element.append(child);
+    }
+    return $element;
+  }
+
   class I18n {
     constructor(translations = {}, config = {}) {
       var _config$locale;
@@ -384,24 +406,16 @@
     constructor($root, config = {}) {
       super($root, config);
       this.i18n = void 0;
-      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.sectionExpandedModifier = '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';
-      this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle';
-      this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus';
-      this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text';
-      this.upChevronIconClass = 'govuk-accordion-nav__chevron';
-      this.downChevronIconClass = 'govuk-accordion-nav__chevron--down';
+      this.sectionToggleTextClass = 'govuk-accordion__section-toggle-text';
+      this.iconClass = 'govuk-accordion-nav__chevron';
+      this.iconOpenModifier = 'govuk-accordion-nav__chevron--down';
       this.sectionSummaryClass = 'govuk-accordion__section-summary';
-      this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
       this.sectionContentClass = 'govuk-accordion__section-content';
       this.$sections = void 0;
       this.$showAllButton = null;
@@ -421,19 +435,23 @@
       this.updateShowAllButton(this.areAllSectionsOpen());
     }
     initControls() {
-      this.$showAllButton = document.createElement('button');
-      this.$showAllButton.setAttribute('type', 'button');
-      this.$showAllButton.setAttribute('class', this.showAllClass);
-      this.$showAllButton.setAttribute('aria-expanded', 'false');
-      this.$showAllIcon = document.createElement('span');
-      this.$showAllIcon.classList.add(this.upChevronIconClass);
+      this.$showAllButton = createElement('button', {
+        type: 'button',
+        class: 'govuk-accordion__show-all',
+        'aria-expanded': 'false'
+      });
+      this.$showAllIcon = createElement('span', {
+        class: this.iconClass
+      });
       this.$showAllButton.appendChild(this.$showAllIcon);
-      const $accordionControls = document.createElement('div');
-      $accordionControls.setAttribute('class', this.controlsClass);
+      const $accordionControls = createElement('div', {
+        class: 'govuk-accordion__controls'
+      });
       $accordionControls.appendChild(this.$showAllButton);
       this.$root.insertBefore($accordionControls, this.$root.firstChild);
-      this.$showAllText = document.createElement('span');
-      this.$showAllText.classList.add(this.showAllTextClass);
+      this.$showAllText = createElement('span', {
+        class: 'govuk-accordion__show-all-text'
+      });
       this.$showAllButton.appendChild(this.$showAllText);
       this.$showAllButton.addEventListener('click', () => this.onShowOrHideAllToggle());
       if ('onbeforematch' in document) {
@@ -471,39 +489,45 @@
           identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
         });
       }
-      const $button = document.createElement('button');
-      $button.setAttribute('type', 'button');
-      $button.setAttribute('aria-controls', `${this.$root.id}-content-${index + 1}`);
+      const $button = createElement('button', {
+        type: 'button',
+        'aria-controls': `${this.$root.id}-content-${index + 1}`
+      });
       for (const attr of Array.from($span.attributes)) {
         if (attr.name !== 'id') {
           $button.setAttribute(attr.name, attr.value);
         }
       }
-      const $headingText = document.createElement('span');
-      $headingText.classList.add(this.sectionHeadingTextClass);
-      $headingText.id = $span.id;
-      const $headingTextFocus = document.createElement('span');
-      $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass);
+      const $headingText = createElement('span', {
+        class: this.sectionHeadingTextClass,
+        id: $span.id
+      });
+      const $headingTextFocus = createElement('span', {
+        class: 'govuk-accordion__section-heading-text-focus'
+      });
       $headingText.appendChild($headingTextFocus);
       Array.from($span.childNodes).forEach($child => $headingTextFocus.appendChild($child));
-      const $showHideToggle = document.createElement('span');
-      $showHideToggle.classList.add(this.sectionShowHideToggleClass);
-      $showHideToggle.setAttribute('data-nosnippet', '');
-      const $showHideToggleFocus = document.createElement('span');
-      $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass);
+      const $showHideToggle = createElement('span', {
+        class: 'govuk-accordion__section-toggle',
+        'data-nosnippet': ''
+      });
+      const $showHideToggleFocus = createElement('span', {
+        class: 'govuk-accordion__section-toggle-focus'
+      });
       $showHideToggle.appendChild($showHideToggleFocus);
-      const $showHideText = document.createElement('span');
-      const $showHideIcon = document.createElement('span');
-      $showHideIcon.classList.add(this.upChevronIconClass);
-      $showHideToggleFocus.appendChild($showHideIcon);
-      $showHideText.classList.add(this.sectionShowHideTextClass);
-      $showHideToggleFocus.appendChild($showHideText);
+      $showHideToggleFocus.appendChild(createElement('span', {
+        class: this.iconClass
+      }));
+      $showHideToggleFocus.appendChild(createElement('span', {
+        class: this.sectionToggleTextClass
+      }));
       $button.appendChild($headingText);
       $button.appendChild(this.getButtonPunctuationEl());
       if ($summary) {
-        const $summarySpan = document.createElement('span');
-        const $summarySpanFocus = document.createElement('span');
-        $summarySpanFocus.classList.add(this.sectionSummaryFocusClass);
+        const $summarySpan = createElement('span');
+        const $summarySpanFocus = createElement('span', {
+          class: 'govuk-accordion__section-summary-focus'
+        });
         $summarySpan.appendChild($summarySpanFocus);
         for (const attr of Array.from($summary.attributes)) {
           $summarySpan.setAttribute(attr.name, attr.value);
@@ -541,8 +565,8 @@
       this.updateShowAllButton(nowExpanded);
     }
     setExpanded(expanded, $section) {
-      const $showHideIcon = $section.querySelector(`.${this.upChevronIconClass}`);
-      const $showHideText = $section.querySelector(`.${this.sectionShowHideTextClass}`);
+      const $showHideIcon = $section.querySelector(`.${this.iconClass}`);
+      const $showHideText = $section.querySelector(`.${this.sectionToggleTextClass}`);
       const $button = $section.querySelector(`.${this.sectionButtonClass}`);
       const $content = $section.querySelector(`.${this.sectionContentClass}`);
       if (!$content) {
@@ -571,17 +595,17 @@
       $button.setAttribute('aria-label', ariaLabelParts.join(' , '));
       if (expanded) {
         $content.removeAttribute('hidden');
-        $section.classList.add(this.sectionExpandedClass);
-        $showHideIcon.classList.remove(this.downChevronIconClass);
+        $section.classList.add(this.sectionExpandedModifier);
+        $showHideIcon.classList.remove(this.iconOpenModifier);
       } else {
         $content.setAttribute('hidden', 'until-found');
-        $section.classList.remove(this.sectionExpandedClass);
-        $showHideIcon.classList.add(this.downChevronIconClass);
+        $section.classList.remove(this.sectionExpandedModifier);
+        $showHideIcon.classList.add(this.iconOpenModifier);
       }
       this.updateShowAllButton(this.areAllSectionsOpen());
     }
     isExpanded($section) {
-      return $section.classList.contains(this.sectionExpandedClass);
+      return $section.classList.contains(this.sectionExpandedModifier);
     }
     areAllSectionsOpen() {
       return Array.from(this.$sections).every($section => this.isExpanded($section));
@@ -592,7 +616,7 @@
       }
       this.$showAllButton.setAttribute('aria-expanded', expanded.toString());
       this.$showAllText.textContent = expanded ? this.i18n.t('hideAllSections') : this.i18n.t('showAllSections');
-      this.$showAllIcon.classList.toggle(this.downChevronIconClass, !expanded);
+      this.$showAllIcon.classList.toggle(this.iconOpenModifier, !expanded);
     }
 
     /**
@@ -635,10 +659,11 @@
       }
     }
     getButtonPunctuationEl() {
-      const $punctuationEl = document.createElement('span');
-      $punctuationEl.classList.add('govuk-visually-hidden', this.sectionHeadingDividerClass);
-      $punctuationEl.textContent = ', ';
-      return $punctuationEl;
+      const $element = createElement('span', {
+        class: 'govuk-visually-hidden govuk-accordion__section-heading-divider'
+      });
+      $element.textContent = ', ';
+      return $element;
     }
   }
 

data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs

@@ -23,6 +23,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function isScope($scope) {
+  return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -41,11 +44,14 @@ class SupportError extends GOVUKFrontendError {
   /**
    * Checks if GOV.UK Frontend is supported on this page
    *
-   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   * @param {Element | Document | null | string} [scopeOrMessage] - HTML element `<body>` checked for browser support or support error message
    */
-  constructor($scope = document.body) {
-    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
-    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+  constructor(scopeOrMessage = document.body) {
+    let supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    if (!isScope(scopeOrMessage)) {
+      supportMessage = 'GOV.UK Frontend initialised without `<script type="module">`';
+    }
+    super(typeof scopeOrMessage === 'string' ? scopeOrMessage : supportMessage);
     this.name = 'SupportError';
   }
 }
@@ -86,6 +92,7 @@ class InitError extends GOVUKFrontendError {
  * @import { ComponentWithModuleName } from '../common/index.mjs'
  */
 
+const _self = typeof globalThis !== 'undefined' ? globalThis : self;
 class Component {
   /**
    * Returns the root element of the component
@@ -139,7 +146,7 @@ class Component {
 /**
  * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-Component.elementType = HTMLElement;
+Component.elementType = _self.HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
 class ConfigurableComponent extends Component {
@@ -164,10 +171,14 @@ class ConfigurableComponent extends Component {
       throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
     }
     const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
-    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {});
+    this._config = mergeConfigs(this._config, this[configOverride](datasetConfig), datasetConfig);
   }
 }
 function normaliseString(value, property) {
+  if (property != null && property.type && !['string', 'number', 'boolean'].includes(property.type)) {
+    return;
+  }
   const trimmedValue = value ? value.trim() : '';
   let output;
   let outputType = property == null ? void 0 : property.type;
@@ -287,6 +298,17 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
  */
 
+function createElement(tagName, attributes = {}, children = []) {
+  const $element = document.createElement(tagName);
+  Object.entries(attributes).forEach(([name, value]) => {
+    $element.setAttribute(name, value);
+  });
+  for (const child of children) {
+    $element.append(child);
+  }
+  return $element;
+}
+
 class I18n {
   constructor(translations = {}, config = {}) {
     var _config$locale;
@@ -378,24 +400,16 @@ class Accordion extends ConfigurableComponent {
   constructor($root, config = {}) {
     super($root, config);
     this.i18n = void 0;
-    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.sectionExpandedModifier = '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';
-    this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle';
-    this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus';
-    this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text';
-    this.upChevronIconClass = 'govuk-accordion-nav__chevron';
-    this.downChevronIconClass = 'govuk-accordion-nav__chevron--down';
+    this.sectionToggleTextClass = 'govuk-accordion__section-toggle-text';
+    this.iconClass = 'govuk-accordion-nav__chevron';
+    this.iconOpenModifier = 'govuk-accordion-nav__chevron--down';
     this.sectionSummaryClass = 'govuk-accordion__section-summary';
-    this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
     this.sectionContentClass = 'govuk-accordion__section-content';
     this.$sections = void 0;
     this.$showAllButton = null;
@@ -415,19 +429,23 @@ class Accordion extends ConfigurableComponent {
     this.updateShowAllButton(this.areAllSectionsOpen());
   }
   initControls() {
-    this.$showAllButton = document.createElement('button');
-    this.$showAllButton.setAttribute('type', 'button');
-    this.$showAllButton.setAttribute('class', this.showAllClass);
-    this.$showAllButton.setAttribute('aria-expanded', 'false');
-    this.$showAllIcon = document.createElement('span');
-    this.$showAllIcon.classList.add(this.upChevronIconClass);
+    this.$showAllButton = createElement('button', {
+      type: 'button',
+      class: 'govuk-accordion__show-all',
+      'aria-expanded': 'false'
+    });
+    this.$showAllIcon = createElement('span', {
+      class: this.iconClass
+    });
     this.$showAllButton.appendChild(this.$showAllIcon);
-    const $accordionControls = document.createElement('div');
-    $accordionControls.setAttribute('class', this.controlsClass);
+    const $accordionControls = createElement('div', {
+      class: 'govuk-accordion__controls'
+    });
     $accordionControls.appendChild(this.$showAllButton);
     this.$root.insertBefore($accordionControls, this.$root.firstChild);
-    this.$showAllText = document.createElement('span');
-    this.$showAllText.classList.add(this.showAllTextClass);
+    this.$showAllText = createElement('span', {
+      class: 'govuk-accordion__show-all-text'
+    });
     this.$showAllButton.appendChild(this.$showAllText);
     this.$showAllButton.addEventListener('click', () => this.onShowOrHideAllToggle());
     if ('onbeforematch' in document) {
@@ -465,39 +483,45 @@ class Accordion extends ConfigurableComponent {
         identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
       });
     }
-    const $button = document.createElement('button');
-    $button.setAttribute('type', 'button');
-    $button.setAttribute('aria-controls', `${this.$root.id}-content-${index + 1}`);
+    const $button = createElement('button', {
+      type: 'button',
+      'aria-controls': `${this.$root.id}-content-${index + 1}`
+    });
     for (const attr of Array.from($span.attributes)) {
       if (attr.name !== 'id') {
         $button.setAttribute(attr.name, attr.value);
       }
     }
-    const $headingText = document.createElement('span');
-    $headingText.classList.add(this.sectionHeadingTextClass);
-    $headingText.id = $span.id;
-    const $headingTextFocus = document.createElement('span');
-    $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass);
+    const $headingText = createElement('span', {
+      class: this.sectionHeadingTextClass,
+      id: $span.id
+    });
+    const $headingTextFocus = createElement('span', {
+      class: 'govuk-accordion__section-heading-text-focus'
+    });
     $headingText.appendChild($headingTextFocus);
     Array.from($span.childNodes).forEach($child => $headingTextFocus.appendChild($child));
-    const $showHideToggle = document.createElement('span');
-    $showHideToggle.classList.add(this.sectionShowHideToggleClass);
-    $showHideToggle.setAttribute('data-nosnippet', '');
-    const $showHideToggleFocus = document.createElement('span');
-    $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass);
+    const $showHideToggle = createElement('span', {
+      class: 'govuk-accordion__section-toggle',
+      'data-nosnippet': ''
+    });
+    const $showHideToggleFocus = createElement('span', {
+      class: 'govuk-accordion__section-toggle-focus'
+    });
     $showHideToggle.appendChild($showHideToggleFocus);
-    const $showHideText = document.createElement('span');
-    const $showHideIcon = document.createElement('span');
-    $showHideIcon.classList.add(this.upChevronIconClass);
-    $showHideToggleFocus.appendChild($showHideIcon);
-    $showHideText.classList.add(this.sectionShowHideTextClass);
-    $showHideToggleFocus.appendChild($showHideText);
+    $showHideToggleFocus.appendChild(createElement('span', {
+      class: this.iconClass
+    }));
+    $showHideToggleFocus.appendChild(createElement('span', {
+      class: this.sectionToggleTextClass
+    }));
     $button.appendChild($headingText);
     $button.appendChild(this.getButtonPunctuationEl());
     if ($summary) {
-      const $summarySpan = document.createElement('span');
-      const $summarySpanFocus = document.createElement('span');
-      $summarySpanFocus.classList.add(this.sectionSummaryFocusClass);
+      const $summarySpan = createElement('span');
+      const $summarySpanFocus = createElement('span', {
+        class: 'govuk-accordion__section-summary-focus'
+      });
       $summarySpan.appendChild($summarySpanFocus);
       for (const attr of Array.from($summary.attributes)) {
         $summarySpan.setAttribute(attr.name, attr.value);
@@ -535,8 +559,8 @@ class Accordion extends ConfigurableComponent {
     this.updateShowAllButton(nowExpanded);
   }
   setExpanded(expanded, $section) {
-    const $showHideIcon = $section.querySelector(`.${this.upChevronIconClass}`);
-    const $showHideText = $section.querySelector(`.${this.sectionShowHideTextClass}`);
+    const $showHideIcon = $section.querySelector(`.${this.iconClass}`);
+    const $showHideText = $section.querySelector(`.${this.sectionToggleTextClass}`);
     const $button = $section.querySelector(`.${this.sectionButtonClass}`);
     const $content = $section.querySelector(`.${this.sectionContentClass}`);
     if (!$content) {
@@ -565,17 +589,17 @@ class Accordion extends ConfigurableComponent {
     $button.setAttribute('aria-label', ariaLabelParts.join(' , '));
     if (expanded) {
       $content.removeAttribute('hidden');
-      $section.classList.add(this.sectionExpandedClass);
-      $showHideIcon.classList.remove(this.downChevronIconClass);
+      $section.classList.add(this.sectionExpandedModifier);
+      $showHideIcon.classList.remove(this.iconOpenModifier);
     } else {
       $content.setAttribute('hidden', 'until-found');
-      $section.classList.remove(this.sectionExpandedClass);
-      $showHideIcon.classList.add(this.downChevronIconClass);
+      $section.classList.remove(this.sectionExpandedModifier);
+      $showHideIcon.classList.add(this.iconOpenModifier);
     }
     this.updateShowAllButton(this.areAllSectionsOpen());
   }
   isExpanded($section) {
-    return $section.classList.contains(this.sectionExpandedClass);
+    return $section.classList.contains(this.sectionExpandedModifier);
   }
   areAllSectionsOpen() {
     return Array.from(this.$sections).every($section => this.isExpanded($section));
@@ -586,7 +610,7 @@ class Accordion extends ConfigurableComponent {
     }
     this.$showAllButton.setAttribute('aria-expanded', expanded.toString());
     this.$showAllText.textContent = expanded ? this.i18n.t('hideAllSections') : this.i18n.t('showAllSections');
-    this.$showAllIcon.classList.toggle(this.downChevronIconClass, !expanded);
+    this.$showAllIcon.classList.toggle(this.iconOpenModifier, !expanded);
   }
 
   /**
@@ -629,10 +653,11 @@ class Accordion extends ConfigurableComponent {
     }
   }
   getButtonPunctuationEl() {
-    const $punctuationEl = document.createElement('span');
-    $punctuationEl.classList.add('govuk-visually-hidden', this.sectionHeadingDividerClass);
-    $punctuationEl.textContent = ', ';
-    return $punctuationEl;
+    const $element = createElement('span', {
+      class: 'govuk-visually-hidden govuk-accordion__section-heading-divider'
+    });
+    $element.textContent = ', ';
+    return $element;
   }
 }