dxw_govuk_frontend_rails 3.5.0 → 3.10.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae09a9588462372293e8a6feaa9815bd7317909f8fe984fedfc1fa4eb39d112c
-  data.tar.gz: de694312ec22a3117847497310c0d21f078172fe49ef1ff65442f41b87ed8e48
+  metadata.gz: b45f829ef6c112b8acdc675c702ea6c5b2ed784f67afd8c46fb5fd1ab9e6515f
+  data.tar.gz: cac2861100bd6e495f63cbf61792428d6dd86260ba6ac8a6499d7d4ddd7efcc8
 SHA512:
-  metadata.gz: 4663f2f1786ab540e0d329a96265946b66f45cad0fc220623db398975cebecd7cfc9c1a092d320a53c2c8fe2cc6e7969a1820e64826bda545d50eecc34c89458
-  data.tar.gz: d3024c1c0d1615e8c8f5f18d18eabeec53eec3b2ee0fc877bcde5403609f0b733a8dee3d067beeb9ee62638688b52116bc480d645d492b443eb9b17cf37b6a52
+  metadata.gz: 2bbc39c25ed2bb297c569524f56b4dd998d4363b27f6a861ffd888c2dd5babcb07f9722d72cc7c54c9604522591a8ac2eefed5527137bd11833ea00bcf8777b7
+  data.tar.gz: 38df5dbcd807f25710609517b7aa8458824b09b0b7e33c04713adb18e9d3613fad3f63574ff2d450f32fbb8d51b8e950f767b3ce4ad3cd983e7026b4b5f2cf22

data/CONTRIBUTING.md

@@ -0,0 +1 @@
+The [dxw standard contributing guide](https://github.com/dxw/.github/blob/main/CONTRIBUTING.md) applies for this repository.

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.5.0)
+    dxw_govuk_frontend_rails (3.10.2)
 
 GEM
   remote: https://rubygems.org/
@@ -10,6 +10,7 @@ GEM
 
 PLATFORMS
   ruby
+  x86_64-darwin-19
 
 DEPENDENCIES
   bundler (~> 2.0)
@@ -17,4 +18,4 @@ DEPENDENCIES
   rake (~> 13.0)
 
 BUNDLED WITH
-   2.0.2
+   2.2.1

data/README.md

@@ -1,88 +1,91 @@
 # GOVUK Frontend for Rails
 
-Adds the GOVUK Frontend for Rails using the asset pipeline.
+## Read this first
+
+Although this gem makes it super easy to add the GOVUK Frontend to your
+Rails applications, we would recommend using it as a guide to add the
+GOVUK Frontend yourself.
+
+## About Adds the GOVUK Frontend for Rails using the asset pipeline.
 
 https://github.com/alphagov/govuk-frontend
 
 ## Breaking Changes in v3.0.0
 
-This release of the GOVUK Frontend has breaking changes! Do not update to this version until you have read and understood:
+This release of the GOVUK Frontend has breaking changes! Do not update to this
+version until you have read and understood:
 
-You will not be required to updated any file paths with govuk as we take care of that for you, all others changes will need to be managed:
+You will not be required to updated any file paths with govuk as we take care of
+that for you, all others changes will need to be managed:
 
 https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
 
 ## Limitations
 
-This gem does not include the ie8 version of GOVUK Frontend, as the service standard no longer requires it:
+This gem does not include the ie8 version of GOVUK Frontend, as the service
+standard no longer requires it:
 
 https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
 
-This gem and its documentation cannot tell you how to use the GOVUK effectively, see the GOVUK Design System documentation for that:
+This gem and its documentation cannot tell you how to use the GOVUK effectively,
+see the GOVUK Design System documentation for that:
 
-https://design-system.service.gov.uk/
-## Installation
+https://design-system.service.gov.uk/ ## Installation
 
 Add this line to your application's Gemfile:
 
-```ruby
-gem 'dxw_govuk_frontend_rails'
-```
+```ruby gem 'dxw_govuk_frontend_rails' ```
 
 And then execute:
 
     $ bundle
 
-## Usage
-Your Rails app will need to have sass enabled.
+## Usage Your Rails app will need to have sass enabled.
 
 ### Basic usage
 
-If the service you are building does not need to modify or extend the GOVUK Frontend all you need to do is import the main sass and javascript files into your Rails app:
+If the service you are building does not need to modify or extend the GOVUK
+Frontend all you need to do is import the main sass and javascript files into
+your Rails app:
 
-- create a sass file in your application:
-```
-app/assets/stylesheets/govuk_frontend_rails.scss
-```
-- import the styles into `govuk_frontend_rails.scss`:
-```sass
-@import "govuk-frontend-rails";
-```
-- require the `govuk-frontend-rails.scss` file in `application.css` or equivalent:
+- create a sass file in your application: ```
+  app/assets/stylesheets/govuk_frontend_rails.scss ```
+- import the styles into `govuk_frontend_rails.scss`: ```sass @import
+  "govuk-frontend-rails"; ```
+- require the `govuk-frontend-rails.scss` file in `application.css` or
+  equivalent:
 
-```
-*= require govuk_frontend_rails
-```
+``` *= require govuk_frontend_rails ```
 
 - require the javascript into `app/assets/javascripts/application.js`:
 
-```
-//= require govuk_frontend_rails
-```
-- initialise the GOVUK Frontend either in a .js file on in your application layout:
+``` //= require govuk_frontend_rails ```
+- initialise the GOVUK Frontend either in a .js file on in your application
+  layout:
 
-```javascript
-window.onload = function() {
-  window.GOVUKFrontend.initAll()
-};
-```
+```javascript window.onload = function() { window.GOVUKFrontend.initAll() }; ```
 - update your application markup to use the GOVUK Frontend class names
 
-IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you are building is not on GOV.UK, read and understand the guidance here:
+IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you
+are building is not on GOV.UK, read and understand the guidance here:
 
 https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
 
-## Tracking version
-We aim to tracking the version of GOVUK Frontend.
+## Tracking version We aim to tracking the version of GOVUK Frontend.
 
 ## Updating to a new Version of GOVUK Frontend
 
 When a new version of the GOVUK Frontend is released:
 
-- set the new version number in `package.json` and `lib/dxw_govuk_frontend_rails/version.rb`
-- run  `npm update` to get the new release
-- run `bundle rake` to compile the new assets
+- make a new branch with the GOVUK Frontend version number
+- set the new version number in `package.json` and
+  `lib/dxw_govuk_frontend_rails/version.rb`
+- run  `npm update` to get the new release of the GOVUK Frontend
+- run `bundle exec rake` to compile the new assets
 - commit the changes
 - tag with the same release number as GOVUK Frontend
-- push the changes
-- Github acitons will build the gem and push to Rubygems
+- push the change
+- push the tag
+- merge your branch
+- make a new release of the tag on GitHub
+- GitHub acitons will build the gem and push to Rubygems

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.5.0"
+  VERSION = "3.10.2"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.5.0.tgz",
-      "integrity": "sha512-4tNKgcChO1bMNsrTz2UsK4fDMmU9R87UDxy/KhKIMbnhsuJLVuArDveYLkZuUsZ6B3eaCbl5gmI8i/Q/Mi680A=="
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.10.2.tgz",
+      "integrity": "sha512-MpMymgLsKoMw40MggZ0XLCAj1FY5N2s8Pf3aQR+k0cZOsegjLsnejxNfEB9qEl9jcma2fiiVcvsEZ+Ipo+Oo2g=="
     }
   }
 }

data/package.json

@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "3.5.0"
+    "govuk-frontend": "3.10.2"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -891,7 +891,7 @@ Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) {
   icon.className = this.iconClass;
   icon.setAttribute('aria-hidden', 'true');
 
-  $heading.appendChild(icon);
+  $button.appendChild(icon);
 };
 
 // When section toggled, set and store state
@@ -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);
   }
 };
 
@@ -1748,7 +1803,7 @@ Checkboxes.prototype.handleClick = function (event) {
 
   if (detect) return
 
-    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
+  // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/closest/polyfill.js
   Element.prototype.closest = function closest(selector) {
     var node = this;
 
@@ -1904,173 +1959,257 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
-function Header ($module) {
+function NotificationBanner ($module) {
   this.$module = $module;
 }
 
-Header.prototype.init = function () {
-  // Check for module
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
   var $module = this.$module;
+  // Check for module
   if (!$module) {
     return
   }
 
-  // Check for button
-  var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
-  if (!$toggleButton) {
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
     return
   }
 
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this));
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
 };
 
+function Header ($module) {
+  this.$module = $module;
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  );
+}
+
 /**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '');
-  } else {
-    node.className += ' ' + className;
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
+Header.prototype.init = function () {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
+    return
   }
+
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'));
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));
 };
 
 /**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module;
-  var $toggleButton = event.target || event.srcElement;
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open');
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open');
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible);
+  this.$menuButton.setAttribute('aria-expanded', isVisible);
+};
 
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false');
-  }
+/**
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open');
+  this.syncState(isVisible);
 };
 
 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));
 };
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-b09a5d2acf3314b46a6c8f8d0c31b85c
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/detect.js
     var detect = (
-      'Element' in this && "nextElementSibling" in document.documentElement
+      'document' in this && "nextElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-
-    (function (global) {
-
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L28-L33
-      Object.defineProperty(Element.prototype, "nextElementSibling", {
-        get: function(){
-          var el = this.nextSibling;
-          while (el && el.nodeType !== 1) { el = el.nextSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/nextElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+      get: function(){
+        var el = this.nextSibling;
+        while (el && el.nodeType !== 1) { el = el.nextSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
 (function(undefined) {
 
-    // Detection from https://github.com/Financial-Times/polyfill-service/pull/1062/files#diff-a162235fbc9c0dd40d4032265f44942e
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/detect.js
     var detect = (
-      'Element' in this && 'previousElementSibling' in document.documentElement
+      'document' in this && "previousElementSibling" in document.documentElement
     );
 
     if (detect) return
 
-    (function (global) {
-      // There is no polyfill in polyfill-library (https://github.com/Financial-Times/polyfill-library/issues/338)
-      // So we source this from https://github.com/Alhadis/Snippets/blob/e09b4dfb7ffc9e250bc28319051e39ead3e5f70a/js/polyfills/IE8-child-elements.js#L35-L40
-      Object.defineProperty(Element.prototype, 'previousElementSibling', {
-        get: function(){
-          var el = this.previousSibling;
-          while (el && el.nodeType !== 1) { el = el.previousSibling; }
-          return el;
-        }
-      });
-
-    }(this));
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-library/master/polyfills/Element/prototype/previousElementSibling/polyfill.js
+    Object.defineProperty(Element.prototype, 'previousElementSibling', {
+      get: function(){
+        var el = this.previousSibling;
+        while (el && el.nodeType !== 1) { el = el.previousSibling; }
+        return el;
+      }
+    });
 
 }).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
@@ -2389,6 +2528,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();