dxw_govuk_frontend_rails 3.6.0 → 3.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de482bfdfa09a6ce5fa71d92b1e3aeba8067157a06e3da22bc86b34713b7c9b8
-  data.tar.gz: f3e866b3cb02ec7ef83d934beddb3ee3a84d17cf191228051301a5301d551f10
+  metadata.gz: 53ce04369f5585d9d7e25d250a3e346746bf5b8541387d23b9debfa85996d034
+  data.tar.gz: 50c7eedd8c1c126a6f55873bdb8e9955747de10048909861a086c81b2ae0bef4
 SHA512:
-  metadata.gz: 9e1a93086b6f6ed875cb2d63452496cd20ba10c82d6b3f344ea3aa8bc82abf82ce07c5b76e473a864065066cf3cdd852425973c6105f47ec2991e71bc85f5e4e
-  data.tar.gz: b45b9b5aa0bcc6f675d07438cfb9092dec30f836fe95f2ac594b74034c0ec85ff277dcf0478fb2f133398ccf30a0fc47670769e75ed997737984bdcb899a43a9
+  metadata.gz: 82eba76e269590ae83f405a02c03c76177d9d9bf35610e9f4a8b34a4e3550e5ab63f7d66c919744b5b404e08568af98924085f2c18fb17c1a38e8d33e96c958b
+  data.tar.gz: 68f8c51f435994ece6f8d8e219e3c369cfa4579e42cc2fb5f55d272cfd4504563c44f742c23595a7673d74ea6bdc0d05c34105d9d0a38054e31001468458f403

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.6.0)
+    dxw_govuk_frontend_rails (3.11.0)
 
 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,26 +1,39 @@
-# GOVUK Frontend for Rails
+# GOV.UK 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 GOV.UK Frontend to your Rails
+applications, we would recommend using it as a guide to add the GOV.UK Frontend
+yourself.
+
+## About
+
+Adds the GOV.UK 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 GOV.UK 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 GOV.UK Frontend, as the service
+standard no longer requires support for Internet Explorer versions less than 11:
 
 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 GOV.UK patterns
+effectively, see the GOV.UK Design System documentation for that:
 
 https://design-system.service.gov.uk/
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -31,58 +44,69 @@ gem 'dxw_govuk_frontend_rails'
 
 And then execute:
 
-    $ bundle
+```
+$ bundle
+```
 
 ## Usage
-Your Rails app will need to have sass enabled.
+
+Your Rails app will need to have SCSS enabled.
+
+**IMPORTANT: You must not use this library 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
 
 ### 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 GOV.UK
+Frontend, all you need to do is import the main SCSS and JavaScript files into
+your Rails app:
+
+- create a SCSS file in your application:
+
+  `app/assets/stylesheets/govuk_frontend_rails.scss`
 
-- 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
-```
+  `@import "govuk-frontend-rails";`
 
-- require the javascript into `app/assets/javascripts/application.js`:
+- import the `govuk-frontend-rails.scss` file in the comment block in
+  `app/assets/stylesheets/application.css` or equivalent:
 
-```
-//= require govuk_frontend_rails
-```
-- initialise the GOVUK Frontend either in a .js file on in your application layout:
+  `*= require govuk_frontend_rails`
 
-```javascript
-window.onload = function() {
-  window.GOVUKFrontend.initAll()
-};
-```
-- update your application markup to use the GOVUK Frontend class names
+- import the JavaScript in the comment block of
+  `app/assets/javascripts/application.js`:
 
-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:
+  `//= require govuk_frontend_rails`
 
-https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
+- initialise the GOV.UK Frontend either in a .js file or in your application
+  layout:
+
+  `window.onload = function() { window.GOVUKFrontend.initAll() };`
+
+- update your application markup to use the GOV.UK Frontend class names
+
+## Tracking GOV.UK Frontend versions
 
-## Tracking version
-We aim to tracking the version of GOVUK Frontend.
+We aim to track the latest version of GOV.UK Frontend but we may fall behind.
+Opening an issue if we are behind on a new release would be helpful, or open a
+PR to update to the latest release!
 
-## Updating to a new Version of GOVUK Frontend
+## Updating to a new version of GOV.UK Frontend
 
-When a new version of the GOVUK Frontend is released:
+When a new version of the GOV.UK 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 GOV.UK 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 GOV.UK 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
+- tag with the same release number as GOV.UK Frontend
+- push the change
+- push the tag
+- merge your branch
+- make a new release of the tag on GitHub
+- GitHub actions will build the gem and push to RubyGems

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.6.0"
+  VERSION = "3.11.0"
 end

data/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.6.0.tgz",
-      "integrity": "sha512-wTxufdY8vFvKJ2EmmQKmarrQ7n30kzg+vvqgGib2dawl7c5Wst8dffkEJQpy9Zs99TE/yEEFgj0VUO4GRUO22A=="
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.11.0.tgz",
+      "integrity": "sha512-1hW/3etYBtKPM+PNdWVOijvWVI3mpYL8eb7WLTtlh/Qxf2mCp6LkCsZk9I034n4EJBYQ5jlUWsUlTOOIypftpg=="
     }
   }
 }

data/package.json

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

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
@@ -1498,7 +1498,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 = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 
@@ -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'));
+
+  if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
+    var inputIsChecked = $input.checked;
 
-  var $content = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
-  if ($content) {
-    $content.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
+    $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);
   }
 };
 
@@ -1904,122 +1959,216 @@ 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));
+};
+
+/**
+ * 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 ($content && $content.classList.contains('govuk-radios__conditional')) {
+  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));
 };
@@ -2379,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();