govuk_publishing_components 28.5.0 → 28.6.0

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

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Accordion', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Accordion = factory());
 }(this, (function () { 'use strict';
 
 /**
@@ -762,19 +762,28 @@ function Accordion ($module) {
   this.$module = $module;
   this.moduleId = $module.getAttribute('id');
   this.$sections = $module.querySelectorAll('.govuk-accordion__section');
-  this.$openAllButton = '';
+  this.$showAllButton = '';
   this.browserSupportsSessionStorage = helper.checkForSessionStorage();
 
   this.controlsClass = 'govuk-accordion__controls';
-  this.openAllClass = 'govuk-accordion__open-all';
-  this.iconClass = 'govuk-accordion__icon';
+  this.showAllClass = 'govuk-accordion__show-all';
+  this.showAllTextClass = 'govuk-accordion__show-all-text';
 
+  this.sectionExpandedClass = 'govuk-accordion__section--expanded';
+  this.sectionButtonClass = 'govuk-accordion__section-button';
   this.sectionHeaderClass = 'govuk-accordion__section-header';
-  this.sectionHeaderFocusedClass = 'govuk-accordion__section-header--focused';
   this.sectionHeadingClass = 'govuk-accordion__section-heading';
+  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.sectionButtonClass = 'govuk-accordion__section-button';
-  this.sectionExpandedClass = 'govuk-accordion__section--expanded';
+  this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
 }
 
 // Initialize component
@@ -785,32 +794,39 @@ Accordion.prototype.init = function () {
   }
 
   this.initControls();
-
   this.initSectionHeaders();
 
-  // See if "Open all" button text should be updated
+  // See if "Show all sections" button text should be updated
   var areAllSectionsOpen = this.checkIfAllSectionsOpen();
-  this.updateOpenAllButton(areAllSectionsOpen);
+  this.updateShowAllButton(areAllSectionsOpen);
 };
 
 // Initialise controls and set attributes
 Accordion.prototype.initControls = function () {
-  // Create "Open all" button and set attributes
-  this.$openAllButton = document.createElement('button');
-  this.$openAllButton.setAttribute('type', 'button');
-  this.$openAllButton.innerHTML = 'Open all <span class="govuk-visually-hidden">sections</span>';
-  this.$openAllButton.setAttribute('class', this.openAllClass);
-  this.$openAllButton.setAttribute('aria-expanded', 'false');
-  this.$openAllButton.setAttribute('type', 'button');
+  // 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');
 
-  // Create control wrapper and add controls to it
-  var accordionControls = document.createElement('div');
-  accordionControls.setAttribute('class', this.controlsClass);
-  accordionControls.appendChild(this.$openAllButton);
-  this.$module.insertBefore(accordionControls, this.$module.firstChild);
+  // Create icon, add to element
+  var $icon = document.createElement('span');
+  $icon.classList.add(this.upChevronIconClass);
+  this.$showAllButton.appendChild($icon);
 
-  // Handle events for the controls
-  this.$openAllButton.addEventListener('click', this.onOpenOrCloseAllToggle.bind(this));
+  // 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);
+
+  // 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);
+
+  // Handle click events on the show/hide all button
+  this.$showAllButton.addEventListener('click', this.onShowOrHideAllToggle.bind(this));
 };
 
 // Initialise section headers
@@ -818,13 +834,12 @@ Accordion.prototype.initSectionHeaders = function () {
   // Loop through section headers
   nodeListForEach(this.$sections, function ($section, i) {
     // Set header attributes
-    var header = $section.querySelector('.' + this.sectionHeaderClass);
-    this.initHeaderAttributes(header, i);
-
+    var $header = $section.querySelector('.' + this.sectionHeaderClass);
+    this.constructHeaderMarkup($header, i);
     this.setExpanded(this.isExpanded($section), $section);
 
     // Handle events
-    header.addEventListener('click', this.onSectionToggle.bind(this, $section));
+    $header.addEventListener('click', this.onSectionToggle.bind(this, $section));
 
     // See if there is any state stored in sessionStorage and set the sections to
     // open or closed.
@@ -832,51 +847,100 @@ Accordion.prototype.initSectionHeaders = function () {
   }.bind(this));
 };
 
-// Set individual header attributes
-Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) {
-  var $module = 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);
 
-  // Copy existing span element to an actual button element, for improved accessibility.
+  // Create a button element that will replace the '.govuk-accordion__section-button' span
   var $button = document.createElement('button');
   $button.setAttribute('type', 'button');
-  $button.setAttribute('id', this.moduleId + '-heading-' + (index + 1));
   $button.setAttribute('aria-controls', this.moduleId + '-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++) {
     var attr = $span.attributes.item(i);
-    $button.setAttribute(attr.nodeName, attr.nodeValue);
+    // 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.addEventListener('focusin', function (e) {
-    if (!$headerWrapper.classList.contains($module.sectionHeaderFocusedClass)) {
-      $headerWrapper.className += ' ' + $module.sectionHeaderFocusedClass;
+  // Create container for heading text so it can be styled
+  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;
+
+  // 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);
+  // span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
+  $headingTextFocus.innerHTML = $span.innerHTML;
+
+  // Create container for show / hide icons and text.
+  var $showToggle = document.createElement('span');
+  $showToggle.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', '');
+  // 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);
+  // 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);
+
+  // 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());
+
+  // If summary content exists add to DOM in correct order
+  if (typeof ($summary) !== 'undefined' && $summary !== null) {
+    // 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');
+    // 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);
+
+    // 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);
     }
-  });
 
-  $button.addEventListener('blur', function (e) {
-    $headerWrapper.classList.remove($module.sectionHeaderFocusedClass);
-  });
+    // Copy original contents of summary to the new summary span
+    $summarySpanFocus.innerHTML = $summary.innerHTML;
 
-  if (typeof ($summary) !== 'undefined' && $summary !== null) {
-    $button.setAttribute('aria-describedby', this.moduleId + '-summary-' + (index + 1));
+    // Replace the original summary `div` with the new summary `span`
+    $summary.parentNode.replaceChild($summarySpan, $summary);
+
+    $button.appendChild($summarySpan);
+    $button.appendChild(this.getButtonPunctuationEl());
   }
 
-  // $span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
-  $button.innerHTML = $span.innerHTML;
+  $button.appendChild($showToggle);
 
   $heading.removeChild($span);
   $heading.appendChild($button);
-
-  // Add "+/-" icon
-  var icon = document.createElement('span');
-  icon.className = this.iconClass;
-  icon.setAttribute('aria-hidden', 'true');
-
-  $button.appendChild(icon);
 };
 
 // When section toggled, set and store state
@@ -889,10 +953,9 @@ Accordion.prototype.onSectionToggle = function ($section) {
 };
 
 // When Open/Close All toggled, set and store state
-Accordion.prototype.onOpenOrCloseAllToggle = function () {
+Accordion.prototype.onShowOrHideAllToggle = function () {
   var $module = this;
   var $sections = this.$sections;
-
   var nowExpanded = !this.checkIfAllSectionsOpen();
 
   nodeListForEach($sections, function ($section) {
@@ -901,23 +964,37 @@ Accordion.prototype.onOpenOrCloseAllToggle = function () {
     $module.storeState($section);
   });
 
-  $module.updateOpenAllButton(nowExpanded);
+  $module.updateShowAllButton(nowExpanded);
 };
 
 // Set section attributes when opened/closed
 Accordion.prototype.setExpanded = function (expanded, $section) {
+  var $icon = $section.querySelector('.' + this.upChevronIconClass);
+  var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass);
   var $button = $section.querySelector('.' + this.sectionButtonClass);
+  var $newButtonText = expanded ? 'Hide' : 'Show';
+
+  // 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';
+
+  $showHideText.innerHTML = $newButtonText;
+  $showHideText.appendChild($visuallyHiddenText);
   $button.setAttribute('aria-expanded', expanded);
 
+  // Swap icon, change class
   if (expanded) {
     $section.classList.add(this.sectionExpandedClass);
+    $icon.classList.remove(this.downChevronIconClass);
   } else {
     $section.classList.remove(this.sectionExpandedClass);
+    $icon.classList.add(this.downChevronIconClass);
   }
 
-  // See if "Open all" button text should be updated
+  // See if "Show all sections" button text should be updated
   var areAllSectionsOpen = this.checkIfAllSectionsOpen();
-  this.updateOpenAllButton(areAllSectionsOpen);
+  this.updateShowAllButton(areAllSectionsOpen);
 };
 
 // Get state of section
@@ -936,12 +1013,20 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
   return areAllSectionsOpen
 };
 
-// Update "Open all" button
-Accordion.prototype.updateOpenAllButton = function (expanded) {
-  var newButtonText = expanded ? 'Close all' : 'Open all';
-  newButtonText += '<span class="govuk-visually-hidden"> sections</span>';
-  this.$openAllButton.setAttribute('aria-expanded', expanded);
-  this.$openAllButton.innerHTML = newButtonText;
+// Update "Show all sections" button
+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';
+  this.$showAllButton.setAttribute('aria-expanded', expanded);
+  $showAllText.innerHTML = newButtonText;
+
+  // Swap icon, toggle class
+  if (expanded) {
+    $showAllIcon.classList.remove(this.downChevronIconClass);
+  } else {
+    $showAllIcon.classList.add(this.downChevronIconClass);
+  }
 };
 
 // Check for `window.sessionStorage`, and that it actually works.
@@ -965,7 +1050,7 @@ var helper = {
 // Set the state of the accordions in sessionStorage
 Accordion.prototype.storeState = function ($section) {
   if (this.browserSupportsSessionStorage) {
-    // We need a unique way of identifying each content in the accordion. Since
+    // 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);
@@ -1006,6 +1091,25 @@ 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
+*/
+Accordion.prototype.getButtonPunctuationEl = function () {
+  var $punctuationEl = document.createElement('span');
+  $punctuationEl.classList.add('govuk-visually-hidden', 'govuk-accordion__section-heading-divider');
+  $punctuationEl.innerHTML = ', ';
+  return $punctuationEl
+};
+
 return Accordion;
 
 })));

data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json

@@ -11,7 +11,7 @@
                             "text": "Section A"
                         },
                         "content": {
-                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                            "html": "<p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n"
                         }
                     },
                     {
@@ -24,7 +24,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n          <p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
             "hidden": false
         },
         {
@@ -40,7 +40,7 @@
                             "text": "Additional description"
                         },
                         "content": {
-                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                            "html": "<p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
                         }
                     },
                     {
@@ -48,7 +48,39 @@
                             "text": "Test 2"
                         },
                         "summary": {
-                            "html": "<span class=\"govuk-!-font-weight-regular\">Additional description</span>"
+                            "html": "<span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n          <p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with long content and description",
+            "options": {
+                "id": "with-long-content-and-description",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor."
+                        },
+                        "summary": {
+                            "text": "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem."
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum."
+                        },
+                        "summary": {
+                            "html": "<span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>"
                         },
                         "content": {
                             "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
@@ -56,7 +88,7 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-1\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n              Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n            </div>\n          \n        </div>\n        <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-2\">\n              Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n            </div>\n          \n        </div>\n        <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
             "hidden": false
         },
         {

data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json

@@ -33,13 +33,13 @@
                 "name": "heading.text",
                 "type": "string",
                 "required": true,
-                "description": "The title of each section. If `heading.html` is supplied, this is ignored. This is used both as the title for each section, and as the button to open or close each section."
+                "description": "The title of each section. If `heading.html` is supplied, this is ignored."
             },
             {
                 "name": "heading.html",
                 "type": "string",
                 "required": true,
-                "description": "The HTML content of the header for each section which is used both as the title for each section, and as the button to open or close each section."
+                "description": "The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML `<button>` element, so you can only add [phrasing content](https://html.spec.whatwg.org/#phrasing-content) to it."
             },
             {
                 "name": "summary.text",
@@ -51,7 +51,7 @@
                 "name": "summary.html",
                 "type": "string",
                 "required": false,
-                "description": "HTML content for summary line."
+                "description": "The HTML content for the summary line. The summary line is inside the HTML `<button>` element, so you can only add [phrasing content](https://html.spec.whatwg.org/#phrasing-content) to it."
             },
             {
                 "name": "content.text",
@@ -69,7 +69,7 @@
                 "name": "expanded",
                 "type": "boolean",
                 "required": false,
-                "description": "Whether the section should be expanded upon initial load or not. Defaults to `false`."
+                "description": "Sets whether the section should be expanded when the page loads for the first time. Defaults to `false`."
             }
         ]
     }

data/node_modules/govuk-frontend/govuk/components/button/button.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Button', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Button = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {

data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.CharacterCount', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.CharacterCount = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {
@@ -1018,7 +1018,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
+    this.$countMessage = document.getElementById(this.$textarea.id + '-info');
   }
 }
 

data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json

@@ -58,7 +58,7 @@
                     "text": "Please do not exceed the maximum allowed limit"
                 }
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n\n\n  \n  \n  <span id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n\n\n  \n  \n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
             "hidden": false
         },
         {
@@ -220,7 +220,7 @@
                     "text": "Error message"
                 }
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n\n\n  \n  \n  <span id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n\n\n  \n  \n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
             "hidden": true
         },
         {
@@ -235,6 +235,19 @@
             },
             "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
             "hidden": true
+        },
+        {
+            "name": "with id with special characters",
+            "options": {
+                "id": "user1.profile[address]",
+                "name": "address",
+                "maxlength": 10,
+                "label": {
+                    "text": "Full address"
+                }
+            },
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n</div>\n\n  <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>",
+            "hidden": false
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Checkboxes', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Checkboxes = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {
@@ -1056,7 +1056,7 @@ Checkboxes.prototype.init = function () {
 
     // Skip checkboxes without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !$module.querySelector('#' + target)) {
+    if (!target || !document.getElementById(target)) {
       return
     }
 
@@ -1100,7 +1100,7 @@ Checkboxes.prototype.syncAllConditionalReveals = function () {
  * @param {HTMLInputElement} $input Checkbox input
  */
 Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
-  var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+  var $target = document.getElementById($input.getAttribute('aria-controls'));
 
   if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
     var inputIsChecked = $input.checked;
@@ -1123,10 +1123,9 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
     var hasSameFormOwner = ($input.form === $inputWithSameName.form);
     if (hasSameFormOwner && $inputWithSameName !== $input) {
       $inputWithSameName.checked = false;
+      this.syncConditionalRevealWithInputState($inputWithSameName);
     }
-  });
-
-  this.syncAllConditionalReveals();
+  }.bind(this));
 };
 
 /**
@@ -1145,10 +1144,9 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
     var hasSameFormOwner = ($input.form === $exclusiveInput.form);
     if (hasSameFormOwner) {
       $exclusiveInput.checked = false;
+      this.syncConditionalRevealWithInputState($exclusiveInput);
     }
-  });
-
-  this.syncAllConditionalReveals();
+  }.bind(this));
 };
 
 /**