govuk_publishing_components 21.59.0 → 21.61.0

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.59.0".freeze
+  VERSION = "21.61.0".freeze
 end

data/node_modules/axe-core/package.json

@@ -1,222 +1,147 @@
 {
-  "_args": [
-    [
-      {
-        "raw": "axe-core@^3.5.4",
-        "scope": null,
-        "escapedName": "axe-core",
-        "name": "axe-core",
-        "rawSpec": "^3.5.4",
-        "spec": ">=3.5.4 <4.0.0",
-        "type": "range"
-      },
-      "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
-    ]
-  ],
-  "_from": "axe-core@>=3.5.4 <4.0.0",
-  "_hasShrinkwrap": false,
-  "_id": "axe-core@3.5.5",
-  "_inCache": true,
-  "_location": "/axe-core",
-  "_nodeVersion": "10.21.0",
-  "_npmOperationalInternal": {
-    "host": "s3://npm-registry-packages",
-    "tmp": "tmp/axe-core_3.5.5_1592406217427_0.7348143825163969"
-  },
-  "_npmUser": {
-    "name": "npmdeque",
-    "email": "axe@deque.com"
-  },
-  "_npmVersion": "6.14.4",
-  "_phantomChildren": {},
-  "_requested": {
-    "raw": "axe-core@^3.5.4",
-    "scope": null,
-    "escapedName": "axe-core",
-    "name": "axe-core",
-    "rawSpec": "^3.5.4",
-    "spec": ">=3.5.4 <4.0.0",
-    "type": "range"
-  },
-  "_requiredBy": [
-    "/"
-  ],
-  "_resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.5.tgz",
-  "_shasum": "84315073b53fa3c0c51676c588d59da09a192227",
-  "_shrinkwrap": null,
-  "_spec": "axe-core@^3.5.4",
-  "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
-  "bugs": {
-    "url": "https://github.com/dequelabs/axe-core/issues"
-  },
-  "contributors": [
-    {
-      "name": "David Sturley",
-      "url": "http://deque.com/"
-    },
-    {
-      "name": "Dylan Barrell",
-      "email": "dylan@barrell.com",
-      "url": "http://deque.com/"
-    },
-    {
-      "name": "Wilco Fiers",
-      "url": "http://deque.com/"
-    },
-    {
-      "name": "Dian Fay",
-      "url": "http://deque.com/"
-    },
-    {
-      "name": "Marcy Sutton",
-      "url": "http://deque.com/"
-    }
-  ],
-  "dependencies": {},
-  "description": "Accessibility engine for automated Web UI testing",
-  "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
-    "@babel/polyfill": "^7.4.4",
-    "@babel/preset-env": "^7.5.4",
-    "@deque/dot": "^1.1.5",
-    "aria-query": "^3.0.0",
-    "axios": "^0.19.0",
-    "babelify": "^10.0.0",
-    "blanket": "~1.2.3",
-    "browserify": "^16.2.3",
-    "chai": "~4.2.0",
-    "clone": "~2.1.1",
-    "core-js": "^3.2.1",
-    "css-selector-parser": "^1.3.0",
-    "derequire": "^2.0.6",
-    "emoji-regex": "8.0.0",
-    "es6-promise": "^4.2.6",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.2.0",
-    "execa": "^2.0.2",
-    "fs-extra": "^8.0.1",
-    "globby": "^10.0.0",
-    "grunt": "^1.0.3",
-    "grunt-babel": "^8.0.0",
-    "grunt-contrib-clean": "^2.0.0",
-    "grunt-contrib-concat": "^1.0.1",
-    "grunt-contrib-connect": "^2.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-uglify": "^4.0.0",
-    "grunt-contrib-watch": "^1.1.0",
-    "grunt-parallel": "^0.5.1",
-    "grunt-run": "^0.8.1",
-    "html-entities": "^1.2.0",
-    "husky": "^3.0.0",
-    "jquery": "^3.0.0",
-    "jsdoc": "^3.5.5",
-    "lint-staged": "^9.2.1",
-    "make-dir": "^3.0.0",
-    "markdown-table": "^1.1.2",
-    "memoizee": "^0.4.14",
-    "minami": "^1.2.3",
-    "mkdirp": "^0.5.1",
-    "mocha": "^6.1.2",
-    "mocha-headless-chrome": "^2.0.3",
-    "prettier": "^1.17.1",
-    "puppeteer": "^2.0.0",
-    "revalidator": "~0.3.1",
-    "selenium-webdriver": "~3.6.0",
-    "sinon": "^7.5.0",
-    "sri-toolbox": "^0.2.0",
-    "standard-version": "^7.0.0",
-    "typescript": "^3.5.3",
-    "uglify-js": "^3.4.4",
-    "weakmap-polyfill": "^2.0.0"
-  },
-  "directories": {},
-  "dist": {
-    "integrity": "sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==",
-    "shasum": "84315073b53fa3c0c51676c588d59da09a192227",
-    "tarball": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.5.tgz",
-    "fileCount": 596,
-    "unpackedSize": 2642777,
-    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6jDJCRA9TVsSAnZWagAAGCMQAJ1oBZRRo34GrgSa/2t6\nYeU2J8z5qkLNFILI65HVEzcu2e/TL8rHFgi9Q1Ga4szh41PTXJd0YfnPvYWt\nx+EiZ+TSoeSSksj5VoS3wjQFn2cQ55LyUOW0lQ3s1sPwEgALZPG3pLCn7GW+\nZiOW+Ai1FHESY/dbxZ1Rl1IrOt+jbOZqsczb0yk8PkZ9QwPJjZL70iLI8DRL\n5JMGoAmO4dJ3Vk+t2Dhy7vnwz+bFbs9lRKZaBJp4dYqY0F8HHC91hROv9pTP\n4hCNXevA6SKSf/Ddl7ub51EN1qQalYHQTQ0al4i0isv6NPlUnPVYaGzTHpZE\n2OTvoZ+dVqSDnCJqYH/WrIRfO0xA3bKTlRn6HyMkHFJOcXmi6NR/47uQfY/6\nr5a/N7nBsWh92aaoEw9ZVoNyMAgeEJlOt5uzXQgOWgJM8WIpqbTUJOeqXfEe\nI9FC2NhNU8Gqw9Ee24KCrCg8PWeODV/r47IHkQRdHqoqh1+/hzkUUhVP1smC\n6eI8qFTnhwws+EwNbxvBg73BCwsEiRwXaE7U0PToPLQvxyr0CRjqzJsl6Hhi\nOowldaReyMQALfJTipnc/Eb1VqCVQ1ABaYltnyVRnCL22mZUJGgq65OINJjT\nYGr9pWAh8r+C4MkIJf8C05eYJB6QL8+kry8YDDDtd2NdUHW8IKOax1p3MuqD\nG8u9\r\n=lmaS\r\n-----END PGP SIGNATURE-----\r\n"
-  },
-  "engines": {
-    "node": ">=4"
-  },
-  "gitHead": "c19c8b616f9ed836fb72f14aaaff53072ea13fdc",
-  "homepage": "https://www.deque.com/axe/",
-  "keywords": [
-    "Accessibility",
-    "a11y",
-    "testing",
-    "unit",
-    "tdd",
-    "bdd",
-    "axe"
-  ],
-  "license": "MPL-2.0",
-  "lint-staged": {
-    "*.{md,json,ts,html}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.js": [
-      "eslint --fix",
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "main": "axe.js",
-  "maintainers": [
-    {
-      "name": "dequelabs",
-      "email": "labs@deque.com"
-    },
-    {
-      "name": "dylanb",
-      "email": "dylan@barrell.com"
-    },
-    {
-      "name": "marcysutton",
-      "email": "marcy.sutton@deque.com"
-    },
-    {
-      "name": "wilcofiers",
-      "email": "wilcofiers@gmail.com"
-    }
-  ],
-  "name": "axe-core",
-  "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dequelabs/axe-core.git"
-  },
-  "scripts": {
-    "api-docs": "jsdoc --configure .jsdoc.json",
-    "build": "grunt",
-    "develop": "grunt dev --force",
-    "eslint": "eslint --color --format stylish '{lib,test,build,doc}/**/*.js' 'Gruntfile.js'",
-    "fmt": "prettier --write *.{json,md,js} **/*.ts './{.github,build,doc,lib,test}/**/*.{json,md,js,ts,html}'",
-    "imports-gen": "node ./build/imports-generator",
-    "next-release": "standard-version --scripts.prebump=./build/next-version.js --skip.commit=true --skip.tag=true",
-    "prepublishOnly": "grunt build && grunt file-exists",
-    "release": "standard-version -a",
-    "rule-gen": "node build/rule-generator",
-    "sri-update": "grunt build && node build/sri-update && git add sri-history.json",
-    "sri-validate": "node build/sri-update --validate",
-    "start": "npm run develop",
-    "test": "tsc && grunt test",
-    "test:examples": "node ./doc/examples/test-examples",
-    "test:headless": "node ./build/test/headless",
-    "test:locales": "mocha test/test-locales.js",
-    "test:rule-help-version": "mocha test/test-rule-help-version.js",
-    "version": "echo \"use 'npm run release' to bump axe-core version\" && exit 1"
-  },
-  "standard-version": {
-    "scripts": {
-      "postbump": "npm ci && npm run sri-update"
-    }
-  },
-  "typings": "axe.d.ts",
-  "version": "3.5.5"
+	"name": "axe-core",
+	"description": "Accessibility engine for automated Web UI testing",
+	"version": "3.5.5",
+	"license": "MPL-2.0",
+	"engines": {
+		"node": ">=4"
+	},
+	"contributors": [
+		{
+			"name": "David Sturley",
+			"organization": "Deque Systems, Inc.",
+			"url": "http://deque.com/"
+		},
+		{
+			"name": "Dylan Barrell",
+			"email": "dylan@barrell.com",
+			"organization": "Deque Systems, Inc.",
+			"url": "http://deque.com/"
+		},
+		{
+			"name": "Wilco Fiers",
+			"organization": "Deque Systems, Inc.",
+			"url": "http://deque.com/"
+		},
+		{
+			"name": "Dian Fay",
+			"organization": "Deque Systems, Inc.",
+			"url": "http://deque.com/"
+		},
+		{
+			"name": "Marcy Sutton",
+			"organization": "Deque Systems, Inc.",
+			"url": "http://deque.com/"
+		}
+	],
+	"homepage": "https://www.deque.com/axe/",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/dequelabs/axe-core.git"
+	},
+	"keywords": [
+		"Accessibility",
+		"a11y",
+		"testing",
+		"unit",
+		"tdd",
+		"bdd",
+		"axe"
+	],
+	"main": "axe.js",
+	"typings": "axe.d.ts",
+	"standard-version": {
+		"scripts": {
+			"postbump": "npm ci && npm run sri-update"
+		}
+	},
+	"scripts": {
+		"start": "npm run develop",
+		"develop": "grunt dev --force",
+		"api-docs": "jsdoc --configure .jsdoc.json",
+		"imports-gen": "node ./build/imports-generator",
+		"build": "grunt",
+		"eslint": "eslint --color --format stylish '{lib,test,build,doc}/**/*.js' 'Gruntfile.js'",
+		"test:headless": "node ./build/test/headless",
+		"test": "tsc && grunt test",
+		"test:examples": "node ./doc/examples/test-examples",
+		"test:locales": "mocha test/test-locales.js",
+		"test:rule-help-version": "mocha test/test-rule-help-version.js",
+		"version": "echo \"use 'npm run release' to bump axe-core version\" && exit 1",
+		"prepublishOnly": "grunt build && grunt file-exists",
+		"release": "standard-version -a",
+		"rule-gen": "node build/rule-generator",
+		"next-release": "standard-version --scripts.prebump=./build/next-version.js --skip.commit=true --skip.tag=true",
+		"sri-update": "grunt build && node build/sri-update && git add sri-history.json",
+		"sri-validate": "node build/sri-update --validate",
+		"fmt": "prettier --write *.{json,md,js} **/*.ts './{.github,build,doc,lib,test}/**/*.{json,md,js,ts,html}'"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.5.4",
+		"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
+		"@babel/polyfill": "^7.4.4",
+		"@babel/preset-env": "^7.5.4",
+		"@deque/dot": "^1.1.5",
+		"aria-query": "^3.0.0",
+		"axios": "^0.19.0",
+		"babelify": "^10.0.0",
+		"blanket": "~1.2.3",
+		"browserify": "^16.2.3",
+		"chai": "~4.2.0",
+		"clone": "~2.1.1",
+		"core-js": "^3.2.1",
+		"css-selector-parser": "^1.3.0",
+		"derequire": "^2.0.6",
+		"emoji-regex": "8.0.0",
+		"es6-promise": "^4.2.6",
+		"eslint": "^6.1.0",
+		"eslint-config-prettier": "^6.2.0",
+		"execa": "^2.0.2",
+		"fs-extra": "^8.0.1",
+		"globby": "^10.0.0",
+		"grunt": "^1.0.3",
+		"grunt-babel": "^8.0.0",
+		"grunt-contrib-clean": "^2.0.0",
+		"grunt-contrib-concat": "^1.0.1",
+		"grunt-contrib-connect": "^2.0.0",
+		"grunt-contrib-copy": "^1.0.0",
+		"grunt-contrib-uglify": "^4.0.0",
+		"grunt-contrib-watch": "^1.1.0",
+		"grunt-parallel": "^0.5.1",
+		"grunt-run": "^0.8.1",
+		"html-entities": "^1.2.0",
+		"husky": "^3.0.0",
+		"jquery": "^3.0.0",
+		"jsdoc": "^3.5.5",
+		"lint-staged": "^9.2.1",
+		"make-dir": "^3.0.0",
+		"markdown-table": "^1.1.2",
+		"memoizee": "^0.4.14",
+		"minami": "^1.2.3",
+		"mkdirp": "^0.5.1",
+		"mocha": "^6.1.2",
+		"mocha-headless-chrome": "^2.0.3",
+		"prettier": "^1.17.1",
+		"puppeteer": "^2.0.0",
+		"revalidator": "~0.3.1",
+		"selenium-webdriver": "~3.6.0",
+		"sinon": "^7.5.0",
+		"sri-toolbox": "^0.2.0",
+		"standard-version": "^7.0.0",
+		"typescript": "^3.5.3",
+		"uglify-js": "^3.4.4",
+		"weakmap-polyfill": "^2.0.0"
+	},
+	"dependencies": {},
+	"lint-staged": {
+		"*.{md,json,ts,html}": [
+			"prettier --write",
+			"git add"
+		],
+		"*.js": [
+			"eslint --fix",
+			"prettier --write",
+			"git add"
+		]
+	}
 }

data/node_modules/govuk-frontend/govuk/all.js

@@ -1542,13 +1542,22 @@ CharacterCount.prototype.init = function () {
   // Remove hard limit if set
   $module.removeAttribute('maxlength');
 
-  // Bind event changes to the textarea
-  var boundChangeEvents = this.bindChangeEvents.bind(this);
-  boundChangeEvents();
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of the character count is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.sync.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+  }
+
+  this.sync();
+};
 
-  // Update count message
-  var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-  boundUpdateCountMessage();
+CharacterCount.prototype.sync = function () {
+  this.bindChangeEvents();
+  this.updateCountMessage();
 };
 
 // Read data attributes
@@ -1596,8 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   if (!this.$textarea.oldValue) this.$textarea.oldValue = '';
   if (this.$textarea.value !== this.$textarea.oldValue) {
     this.$textarea.oldValue = this.$textarea.value;
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
+    this.updateCountMessage();
   }
 };
 
@@ -1666,44 +1674,91 @@ function Checkboxes ($module) {
   this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
 }
 
+/**
+ * Initialise Checkboxes
+ *
+ * Checkboxes can be associated with a 'conditionally revealed' content block –
+ * for example, a checkbox for 'Phone' could reveal an additional form field for
+ * the user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the checkbox state.
+ */
 Checkboxes.prototype.init = function () {
   var $module = this.$module;
   var $inputs = this.$inputs;
 
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
   nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
+    var target = $input.getAttribute('data-aria-controls');
 
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
+    // Skip checkboxes without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !$module.querySelector('#' + target)) {
       return
     }
 
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target);
     $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
+  });
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals();
 
-  // Handle events
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
-Checkboxes.prototype.setAttributes = function ($input) {
-  var inputIsChecked = $input.checked;
-  $input.setAttribute('aria-expanded', inputIsChecked);
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Checkboxes.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
+
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Checkbox input
+ */
+Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
 
-  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
-  if ($content) {
-    $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+  if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
+    var inputIsChecked = $input.checked;
+
+    $input.setAttribute('aria-expanded', inputIsChecked);
+    $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a checkbox, sync
+ * the state of any associated conditional reveal with the checkbox state.
+ *
+ * @param {MouseEvent} event Click event
+ */
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
@@ -1711,7 +1766,7 @@ Checkboxes.prototype.handleClick = function (event) {
   var isCheckbox = $target.getAttribute('type') === 'checkbox';
   var hasAriaControls = $target.getAttribute('aria-controls');
   if (isCheckbox && hasAriaControls) {
-    this.setAttributes($target);
+    this.syncConditionalRevealWithInputState($target);
   }
 };
 
@@ -1959,67 +2014,115 @@ Header.prototype.handleClick = function (event) {
 
 function Radios ($module) {
   this.$module = $module;
+  this.$inputs = $module.querySelectorAll('input[type="radio"]');
 }
 
+/**
+ * Initialise Radios
+ *
+ * Radios can be associated with a 'conditionally revealed' content block – for
+ * example, a radio for 'Phone' could reveal an additional form field for the
+ * user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the radio state.
+ */
 Radios.prototype.init = function () {
   var $module = this.$module;
-  var $inputs = $module.querySelectorAll('input[type="radio"]');
+  var $inputs = this.$inputs;
 
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
   nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
+    var target = $input.getAttribute('data-aria-controls');
 
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
+    // Skip radios without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !$module.querySelector('#' + target)) {
       return
     }
 
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target);
     $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
+  });
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals();
 
   // Handle events
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
-Radios.prototype.setAttributes = function ($input) {
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Radios.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
 
-  if ($content && $content.classList.contains('govuk-radios__conditional')) {
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Radio input
+ */
+Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
+
+  if ($target && $target.classList.contains('govuk-radios__conditional')) {
     var inputIsChecked = $input.checked;
 
     $input.setAttribute('aria-expanded', inputIsChecked);
-
-    $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+    $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a radio, sync
+ * the state of the conditional reveal for all radio buttons in the same form
+ * with the same name (because checking one radio could have un-checked a radio
+ * in another $module)
+ *
+ * @param {MouseEvent} event Click event
+ */
 Radios.prototype.handleClick = function (event) {
   var $clickedInput = event.target;
-  // We only want to handle clicks for radio inputs
+
+  // Ignore clicks on things that aren't radio buttons
   if ($clickedInput.type !== 'radio') {
     return
   }
-  // Because checking one radio can uncheck a radio in another $module,
-  // we need to call set attributes on all radios in the same form, or document if they're not in a form.
-  //
-  // We also only want radios which have aria-controls, as they support conditional reveals.
+
+  // We only need to consider radios with conditional reveals, which will have
+  // aria-controls attributes.
   var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
+
   nodeListForEach($allInputs, function ($input) {
-    // Only inputs with the same form owner should change.
     var hasSameFormOwner = ($input.form === $clickedInput.form);
-
-    // In radios, only radios with the same name will affect each other.
     var hasSameName = ($input.name === $clickedInput.name);
+
     if (hasSameName && hasSameFormOwner) {
-      this.setAttributes($input);
+      this.syncConditionalRevealWithInputState($input);
     }
   }.bind(this));
 };