govuk_publishing_components 35.3.2 → 35.3.4

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

@@ -1,14 +1,13 @@
-/* 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/Element/prototype/classList.mjs';
+import '../../vendor/polyfills/Element/prototype/closest.mjs';
+import '../../vendor/polyfills/Event.mjs';
+import '../../vendor/polyfills/Function/prototype/bind.mjs';
+import '../../vendor/polyfills/String/prototype/trim.mjs';
 
-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'
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
 
 /**
  * @constant
@@ -23,7 +22,7 @@ var ACCORDION_TRANSLATIONS = {
   showAllSections: 'Show all sections',
   showSection: 'Show',
   showSectionAriaLabel: 'Show this section'
-}
+};
 
 /**
  * Accordion component
@@ -38,372 +37,475 @@ var ACCORDION_TRANSLATIONS = {
  * attribute, which also provides accessibility.
  *
  * @class
- * @param {HTMLElement} $module - HTML element to use for accordion
+ * @param {Element} $module - HTML element to use for accordion
  * @param {AccordionConfig} [config] - Accordion config
  */
 function Accordion ($module, config) {
-  this.$module = $module
+  if (!($module instanceof HTMLElement)) {
+    return this
+  }
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$module = $module;
 
   var defaultConfig = {
-    i18n: ACCORDION_TRANSLATIONS
-  }
+    i18n: ACCORDION_TRANSLATIONS,
+    rememberExpanded: true
+  };
 
+  /**
+   * @deprecated Will be made private in v5.0
+   * @type {AccordionConfig}
+   */
   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'
-
-  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.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()
+  );
+
+  /** @deprecated Will be made private in v5.0 */
+  this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'));
+
+  /** @deprecated Will be made private in v5.0 */
+  this.controlsClass = 'govuk-accordion__controls';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.showAllClass = 'govuk-accordion__show-all';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.showAllTextClass = 'govuk-accordion__show-all-text';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionClass = 'govuk-accordion__section';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionExpandedClass = 'govuk-accordion__section--expanded';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionButtonClass = 'govuk-accordion__section-button';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionHeaderClass = 'govuk-accordion__section-header';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionHeadingClass = 'govuk-accordion__section-heading';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.upChevronIconClass = 'govuk-accordion-nav__chevron';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.downChevronIconClass = 'govuk-accordion-nav__chevron--down';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionSummaryClass = 'govuk-accordion__section-summary';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
+
+  /** @deprecated Will be made private in v5.0 */
+  this.sectionContentClass = 'govuk-accordion__section-content';
+
+  var $sections = this.$module.querySelectorAll('.' + this.sectionClass);
+  if (!$sections.length) {
+    return this
+  }
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$sections = $sections;
+
+  /** @deprecated Will be made private in v5.0 */
+  this.browserSupportsSessionStorage = helper.checkForSessionStorage();
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$showAllButton = null;
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$showAllIcon = null;
+
+  /** @deprecated Will be made private in v5.0 */
+  this.$showAllText = null;
 }
 
 /**
  * Initialise component
  */
 Accordion.prototype.init = function () {
-  // Check for module
-  if (!this.$module) {
+  // Check that required elements are present
+  if (!this.$module || !this.$sections) {
     return
   }
 
-  this.initControls()
-  this.initSectionHeaders()
+  this.initControls();
+  this.initSectionHeaders();
 
   // See if "Show all sections" button text should be updated
-  var areAllSectionsOpen = this.checkIfAllSectionsOpen()
-  this.updateShowAllButton(areAllSectionsOpen)
-}
+  var areAllSectionsOpen = this.checkIfAllSectionsOpen();
+  this.updateShowAllButton(areAllSectionsOpen);
+};
 
 /**
  * Initialise controls and set attributes
+ *
+ * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.initControls = function () {
   // Create "Show all" button and set attributes
-  this.$showAllButton = document.createElement('button')
-  this.$showAllButton.setAttribute('type', 'button')
-  this.$showAllButton.setAttribute('class', this.showAllClass)
-  this.$showAllButton.setAttribute('aria-expanded', 'false')
+  this.$showAllButton = document.createElement('button');
+  this.$showAllButton.setAttribute('type', 'button');
+  this.$showAllButton.setAttribute('class', this.showAllClass);
+  this.$showAllButton.setAttribute('aria-expanded', 'false');
 
   // Create icon, add to element
-  this.$showAllIcon = document.createElement('span')
-  this.$showAllIcon.classList.add(this.upChevronIconClass)
-  this.$showAllButton.appendChild(this.$showAllIcon)
+  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')
-  $accordionControls.setAttribute('class', this.controlsClass)
-  $accordionControls.appendChild(this.$showAllButton)
-  this.$module.insertBefore($accordionControls, this.$module.firstChild)
+  var $accordionControls = document.createElement('div');
+  $accordionControls.setAttribute('class', this.controlsClass);
+  $accordionControls.appendChild(this.$showAllButton);
+  this.$module.insertBefore($accordionControls, this.$module.firstChild);
 
   // Build additional wrapper for Show all toggle text and place after icon
-  this.$showAllText = document.createElement('span')
-  this.$showAllText.classList.add(this.showAllTextClass)
-  this.$showAllButton.appendChild(this.$showAllText)
+  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))
+  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))
+    document.addEventListener('beforematch', this.onBeforeMatch.bind(this));
   }
-}
+};
 
 /**
  * Initialise section headers
+ *
+ * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.initSectionHeaders = function () {
-  // Loop through section headers
-  nodeListForEach(this.$sections, function ($section, i) {
+  var $component = this;
+  var $sections = this.$sections;
+
+  // Loop through sections
+  nodeListForEach($sections, function ($section, i) {
+    var $header = $section.querySelector('.' + $component.sectionHeaderClass);
+    if (!$header) {
+      return
+    }
+
     // Set header attributes
-    var $header = $section.querySelector('.' + this.sectionHeaderClass)
-    this.constructHeaderMarkup($header, i)
-    this.setExpanded(this.isExpanded($section), $section)
+    $component.constructHeaderMarkup($header, i);
+    $component.setExpanded($component.isExpanded($section), $section);
 
     // Handle events
-    $header.addEventListener('click', this.onSectionToggle.bind(this, $section))
+    $header.addEventListener('click', $component.onSectionToggle.bind($component, $section));
 
     // See if there is any state stored in sessionStorage and set the sections to
     // open or closed.
-    this.setInitialState($section)
-  }.bind(this))
-}
+    $component.setInitialState($section);
+  });
+};
 
 /**
  * Construct section header
  *
- * @param {HTMLDivElement} $header - Section header
+ * @deprecated Will be made private in v5.0
+ * @param {Element} $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)
+  var $span = $header.querySelector('.' + this.sectionButtonClass);
+  var $heading = $header.querySelector('.' + this.sectionHeadingClass);
+  var $summary = $header.querySelector('.' + this.sectionSummaryClass);
+
+  if (!$span || !$heading) {
+    return
+  }
 
   // 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.$module.id + '-content-' + (index + 1))
+  var $button = document.createElement('button');
+  $button.setAttribute('type', 'button');
+  $button.setAttribute('aria-controls', this.$module.id + '-content-' + (index + 1).toString());
 
   // 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++) {
-    var attr = $span.attributes.item(i)
+    var attr = $span.attributes.item(i);
     // Add all attributes but not ID as this is being added to
     // the section heading ($headingText)
     if (attr.nodeName !== 'id') {
-      $button.setAttribute(attr.nodeName, attr.nodeValue)
+      $button.setAttribute(attr.nodeName, attr.nodeValue);
     }
   }
 
   // Create container for heading text so it can be styled
-  var $headingText = document.createElement('span')
-  $headingText.classList.add(this.sectionHeadingTextClass)
+  var $headingText = document.createElement('span');
+  $headingText.classList.add(this.sectionHeadingTextClass);
   // Copy the span ID to the heading text to allow it to be referenced by `aria-labelledby` on the
   // hidden content area without "Show this section"
-  $headingText.id = $span.id
+  $headingText.id = $span.id;
 
   // Create an inner heading text container to limit the width of the focus state
-  var $headingTextFocus = document.createElement('span')
-  $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass)
-  $headingText.appendChild($headingTextFocus)
+  var $headingTextFocus = document.createElement('span');
+  $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass);
+  $headingText.appendChild($headingTextFocus);
   // span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
-  $headingTextFocus.innerHTML = $span.innerHTML
+  $headingTextFocus.innerHTML = $span.innerHTML;
 
   // Create container for show / hide icons and text.
-  var $showHideToggle = document.createElement('span')
-  $showHideToggle.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
-  $showHideToggle.setAttribute('data-nosnippet', '')
+  $showHideToggle.setAttribute('data-nosnippet', '');
   // Create an inner container to limit the width of the focus state
-  var $showHideToggleFocus = document.createElement('span')
-  $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass)
-  $showHideToggle.appendChild($showHideToggleFocus)
+  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 $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)
+  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
   // 2. Punctuation
   // 3. (Optional: Summary line followed by punctuation)
   // 4. Show / hide toggle
-  $button.appendChild($headingText)
-  $button.appendChild(this.getButtonPunctuationEl())
+  $button.appendChild($headingText);
+  $button.appendChild(this.getButtonPunctuationEl());
 
   // If summary content exists add to DOM in correct order
-  if (typeof ($summary) !== 'undefined' && $summary !== null) {
+  if ($summary) {
     // Create a new `span` element and copy the summary line content from the original `div` to the
     // new `span`
     // This is because the summary line text is now inside a button element, which can only contain
     // phrasing content
-    var $summarySpan = document.createElement('span')
+    var $summarySpan = document.createElement('span');
     // Create an inner summary container to limit the width of the summary focus state
-    var $summarySpanFocus = document.createElement('span')
-    $summarySpanFocus.classList.add(this.sectionSummaryFocusClass)
-    $summarySpan.appendChild($summarySpanFocus)
+    var $summarySpanFocus = document.createElement('span');
+    $summarySpanFocus.classList.add(this.sectionSummaryFocusClass);
+    $summarySpan.appendChild($summarySpanFocus);
 
     // Get original attributes, and pass them to the replacement
     for (var j = 0, l = $summary.attributes.length; j < l; ++j) {
-      var nodeName = $summary.attributes.item(j).nodeName
-      var nodeValue = $summary.attributes.item(j).nodeValue
-      $summarySpan.setAttribute(nodeName, nodeValue)
+      var nodeName = $summary.attributes.item(j).nodeName;
+      var nodeValue = $summary.attributes.item(j).nodeValue;
+      $summarySpan.setAttribute(nodeName, nodeValue);
     }
 
     // Copy original contents of summary to the new summary span
-    $summarySpanFocus.innerHTML = $summary.innerHTML
+    $summarySpanFocus.innerHTML = $summary.innerHTML;
 
     // Replace the original summary `div` with the new summary `span`
-    $summary.parentNode.replaceChild($summarySpan, $summary)
+    $summary.parentNode.replaceChild($summarySpan, $summary);
 
-    $button.appendChild($summarySpan)
-    $button.appendChild(this.getButtonPunctuationEl())
+    $button.appendChild($summarySpan);
+    $button.appendChild(this.getButtonPunctuationEl());
   }
 
-  $button.appendChild($showHideToggle)
+  $button.appendChild($showHideToggle);
 
-  $heading.removeChild($span)
-  $heading.appendChild($button)
-}
+  $heading.removeChild($span);
+  $heading.appendChild($button);
+};
 
 /**
  * When a section is opened by the user agent via the 'beforematch' event
  *
+ * @deprecated Will be made private in v5.0
  * @param {Event} event - Generic event
  */
 Accordion.prototype.onBeforeMatch = function (event) {
-  var $section = event.target.closest('.' + this.sectionClass)
+  var $fragment = event.target;
+
+  // Handle elements with `.closest()` support only
+  if (!($fragment instanceof Element)) {
+    return
+  }
+
+  // Handle when fragment is inside section
+  var $section = $fragment.closest('.' + this.sectionClass);
   if ($section) {
-    this.setExpanded(true, $section)
+    this.setExpanded(true, $section);
   }
-}
+};
 
 /**
  * When section toggled, set and store state
  *
- * @param {HTMLElement} $section - Section element
+ * @deprecated Will be made private in v5.0
+ * @param {Element} $section - Section element
  */
 Accordion.prototype.onSectionToggle = function ($section) {
-  var expanded = this.isExpanded($section)
-  this.setExpanded(!expanded, $section)
+  var expanded = this.isExpanded($section);
+  this.setExpanded(!expanded, $section);
 
   // Store the state in sessionStorage when a change is triggered
-  this.storeState($section)
-}
+  this.storeState($section);
+};
 
 /**
  * When Open/Close All toggled, set and store state
+ *
+ * @deprecated Will be made private in v5.0
  */
 Accordion.prototype.onShowOrHideAllToggle = function () {
-  var $module = this
-  var $sections = this.$sections
-  var nowExpanded = !this.checkIfAllSectionsOpen()
+  var $component = this;
+  var $sections = this.$sections;
+
+  var nowExpanded = !this.checkIfAllSectionsOpen();
 
+  // Loop through sections
   nodeListForEach($sections, function ($section) {
-    $module.setExpanded(nowExpanded, $section)
+    $component.setExpanded(nowExpanded, $section);
     // Store the state in sessionStorage when a change is triggered
-    $module.storeState($section)
-  })
+    $component.storeState($section);
+  });
 
-  $module.updateShowAllButton(nowExpanded)
-}
+  $component.updateShowAllButton(nowExpanded);
+};
 
 /**
  * Set section attributes when opened/closed
  *
+ * @deprecated Will be made private in v5.0
  * @param {boolean} expanded - Section expanded
- * @param {HTMLElement} $section - Section element
+ * @param {Element} $section - Section element
  */
 Accordion.prototype.setExpanded = function (expanded, $section) {
-  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 $showHideIcon = $section.querySelector('.' + this.upChevronIconClass);
+  var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass);
+  var $button = $section.querySelector('.' + this.sectionButtonClass);
+  var $content = $section.querySelector('.' + this.sectionContentClass);
+
+  if (!$showHideIcon ||
+    !($showHideText instanceof HTMLElement) ||
+    !$button ||
+    !$content) {
+    return
+  }
 
   var newButtonText = expanded
     ? this.i18n.t('hideSection')
-    : this.i18n.t('showSection')
+    : this.i18n.t('showSection');
 
-  $showHideText.innerText = newButtonText
-  $button.setAttribute('aria-expanded', expanded)
+  $showHideText.innerText = newButtonText;
+  $button.setAttribute('aria-expanded', expanded.toString());
 
   // Update aria-label combining
-  var ariaLabelParts = []
+  var ariaLabelParts = [];
 
-  var $headingText = $section.querySelector('.' + this.sectionHeadingTextClass)
-  if ($headingText) {
-    ariaLabelParts.push($headingText.innerText.trim())
+  var $headingText = $section.querySelector('.' + this.sectionHeadingTextClass);
+  if ($headingText instanceof HTMLElement) {
+    ariaLabelParts.push($headingText.innerText.trim());
   }
 
-  var $summary = $section.querySelector('.' + this.sectionSummaryClass)
-  if ($summary) {
-    ariaLabelParts.push($summary.innerText.trim())
+  var $summary = $section.querySelector('.' + this.sectionSummaryClass);
+  if ($summary instanceof HTMLElement) {
+    ariaLabelParts.push($summary.innerText.trim());
   }
 
   var ariaLabelMessage = expanded
     ? this.i18n.t('hideSectionAriaLabel')
-    : this.i18n.t('showSectionAriaLabel')
-  ariaLabelParts.push(ariaLabelMessage)
+    : 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(' , '))
+  $button.setAttribute('aria-label', ariaLabelParts.join(' , '));
 
   // Swap icon, change class
   if (expanded) {
-    $content.removeAttribute('hidden')
-    $section.classList.add(this.sectionExpandedClass)
-    $showHideIcon.classList.remove(this.downChevronIconClass)
+    $content.removeAttribute('hidden');
+    $section.classList.add(this.sectionExpandedClass);
+    $showHideIcon.classList.remove(this.downChevronIconClass);
   } else {
-    $content.setAttribute('hidden', 'until-found')
-    $section.classList.remove(this.sectionExpandedClass)
-    $showHideIcon.classList.add(this.downChevronIconClass)
+    $content.setAttribute('hidden', 'until-found');
+    $section.classList.remove(this.sectionExpandedClass);
+    $showHideIcon.classList.add(this.downChevronIconClass);
   }
 
   // See if "Show all sections" button text should be updated
-  var areAllSectionsOpen = this.checkIfAllSectionsOpen()
-  this.updateShowAllButton(areAllSectionsOpen)
-}
+  var areAllSectionsOpen = this.checkIfAllSectionsOpen();
+  this.updateShowAllButton(areAllSectionsOpen);
+};
 
 /**
  * Get state of section
  *
- * @param {HTMLElement} $section - Section element
+ * @deprecated Will be made private in v5.0
+ * @param {Element} $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
  *
+ * @deprecated Will be made private in v5.0
  * @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
+  var sectionsCount = this.$sections.length;
   // Get a count of all Accordion sections that are expanded
-  var expandedSectionCount = this.$module.querySelectorAll('.' + this.sectionExpandedClass).length
-  var areAllSectionsOpen = sectionsCount === expandedSectionCount
+  var expandedSectionCount = this.$module.querySelectorAll('.' + this.sectionExpandedClass).length;
+  var areAllSectionsOpen = sectionsCount === expandedSectionCount;
 
   return areAllSectionsOpen
-}
+};
 
 /**
  * Update "Show all sections" button
  *
+ * @deprecated Will be made private in v5.0
  * @param {boolean} expanded - Section expanded
  */
 Accordion.prototype.updateShowAllButton = function (expanded) {
   var newButtonText = expanded
     ? this.i18n.t('hideAllSections')
-    : this.i18n.t('showAllSections')
+    : this.i18n.t('showAllSections');
 
-  this.$showAllButton.setAttribute('aria-expanded', expanded)
-  this.$showAllText.innerText = newButtonText
+  this.$showAllButton.setAttribute('aria-expanded', expanded.toString());
+  this.$showAllText.innerText = newButtonText;
 
   // Swap icon, toggle class
   if (expanded) {
-    this.$showAllIcon.classList.remove(this.downChevronIconClass)
+    this.$showAllIcon.classList.remove(this.downChevronIconClass);
   } else {
-    this.$showAllIcon.classList.add(this.downChevronIconClass)
+    this.$showAllIcon.classList.add(this.downChevronIconClass);
   }
-}
+};
 
 var helper = {
   /**
@@ -412,62 +514,64 @@ var helper = {
    * @returns {boolean} True if session storage is available
    */
   checkForSessionStorage: function () {
-    var testString = 'this is the test string'
-    var result
+    var testString = 'this is the test string';
+    var result;
     try {
-      window.sessionStorage.setItem(testString, testString)
-      result = window.sessionStorage.getItem(testString) === testString.toString()
-      window.sessionStorage.removeItem(testString)
+      window.sessionStorage.setItem(testString, testString);
+      result = window.sessionStorage.getItem(testString) === testString.toString();
+      window.sessionStorage.removeItem(testString);
       return result
     } catch (exception) {
       return false
     }
   }
-}
+};
 
 /**
  * Set the state of the accordions in sessionStorage
  *
- * @param {HTMLElement} $section - Section element
+ * @deprecated Will be made private in v5.0
+ * @param {Element} $section - Section element
  */
 Accordion.prototype.storeState = function ($section) {
-  if (this.browserSupportsSessionStorage) {
+  if (this.browserSupportsSessionStorage && this.config.rememberExpanded) {
     // We need a unique way of identifying each content in the Accordion. Since
     // an `#id` should be unique and an `id` is required for `aria-` attributes
     // `id` can be safely used.
-    var $button = $section.querySelector('.' + this.sectionButtonClass)
+    var $button = $section.querySelector('.' + this.sectionButtonClass);
 
     if ($button) {
-      var contentId = $button.getAttribute('aria-controls')
-      var contentState = $button.getAttribute('aria-expanded')
+      var contentId = $button.getAttribute('aria-controls');
+      var contentState = $button.getAttribute('aria-expanded');
 
       // Only set the state when both `contentId` and `contentState` are taken from the DOM.
       if (contentId && contentState) {
-        window.sessionStorage.setItem(contentId, contentState)
+        window.sessionStorage.setItem(contentId, contentState);
       }
     }
   }
-}
+};
 
 /**
  * Read the state of the accordions from sessionStorage
  *
- * @param {HTMLElement} $section - Section element
+ * @deprecated Will be made private in v5.0
+ * @param {Element} $section - Section element
  */
 Accordion.prototype.setInitialState = function ($section) {
-  if (this.browserSupportsSessionStorage) {
-    var $button = $section.querySelector('.' + this.sectionButtonClass)
+  if (this.browserSupportsSessionStorage && this.config.rememberExpanded) {
+    var $button = $section.querySelector('.' + this.sectionButtonClass);
 
     if ($button) {
-      var contentId = $button.getAttribute('aria-controls')
-      var contentState = contentId ? window.sessionStorage.getItem(contentId) : null
+      var contentId = $button.getAttribute('aria-controls');
+      var contentState = contentId ? window.sessionStorage.getItem(contentId) : null;
 
       if (contentState !== null) {
-        this.setExpanded(contentState === 'true', $section)
+        this.setExpanded(contentState === 'true', $section);
       }
     }
   }
-}
+};
 
 /**
  * Create an element to improve semantics of the section button with punctuation
@@ -476,22 +580,23 @@ Accordion.prototype.setInitialState = function ($section) {
  * into thematic chunks.
  * See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
  *
- * @returns {HTMLElement} DOM element
+ * @deprecated Will be made private in v5.0
+ * @returns {Element} DOM element
  */
 Accordion.prototype.getButtonPunctuationEl = function () {
-  var $punctuationEl = document.createElement('span')
-  $punctuationEl.classList.add('govuk-visually-hidden', this.sectionHeadingDividerClass)
-  $punctuationEl.innerHTML = ', '
+  var $punctuationEl = document.createElement('span');
+  $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}
+ * @property {boolean} [rememberExpanded] - Whether the expanded and collapsed
+ *   state of each section is remembered and restored when navigating.
  */
 
 /**
@@ -503,15 +608,18 @@ export default Accordion
  * 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.
+ *   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.
+ *   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.
+ *   '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.
+ *   sections' button, used when all sections are collapsed.
  * @property {string} [showSection] - The text content for the 'Show'
- * button, used when a section is collapsed.
+ *   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.
+ *   'Show' button's accessible name when a section is expanded.
  */
+
+export default Accordion;
+//# sourceMappingURL=components/accordion/accordion.mjs.map