Preserve conditional reveal state when going back

When the user navigates back to a previous page that includes a conditional reveal, the visible state of the conditionally revealed content is currently only preserved in some browsers.

Firefox / Safari
----------------

Recent versions of Firefox and Safari use a Back-Forward Cache ('bfcache')[1] which preserves the entire page, which means the JavaScript is not re-evaluated but the browser 'remembers' that the conditional reveal was visible.

Internet Explorer
-----------------

In Internet Explorer the state of the form controls has not been restored at the point we currently call the init function, and so the conditional reveal state is not preserved.

To fix this, wait for the `DOMContentLoaded` event before syncing the visibility of the conditional reveals to their checkbox / radio state. As the checkbox state in IE8-11 has been restored before the `DOMContentLoaded` event fires, this fixes the preservation of the reveal state in Internet Explorer.

We already polyfill document.addEventListener and the DOMContentLoaded event for IE8, so we don't have to treat it as a special case.

Edge Legacy
-----------

In Edge 18, the state of the form controls does not seem to be restored at all when navigating back, so there is nothing to sync the conditional reveal state to 😢

Chromium based browsers (Chrome, Edge, Opera)
---------------------------------------------

In browsers based on Chromium 78 or older, the state of the form controls has been restored at the point we invoke the init function, and so the reveal state currently displays correctly, even without waiting for the `DOMContentLoaded` event.

In Chromium 79, the 'timing of restoring control state was changed so that it is done as a task posted just after DOMContentLoaded' [2]. This means that even after the `DOMContentLoaded` event the form state has not yet been restored. The recommended approach seems to be to wait for the `pageshow` event, however in Chromium 79 the form control state has not been restored at the point this event fires either [3]! This was fixed in Chromium 80 [4].

So:

- in Chrome ≤ 78, the form control state is restored before the script is evaluated, before both the `DOMContentLoaded` and `pageshow` events.
- in Chrome = 79, the form control state is restored after both the `DOMContentLoaded` and `pageshow` events.
- in Chrome ≥ 80, the form control state is restored after the `DOMContentLoaded` but before the `pageshow` event.

Syncing the conditional reveal state after the `pageshow` event preserves the conditional reveal state except for Chromium 79 where it remains broken. Given that Chrome 79's usage is already trending towards 0 [5] (0.29% in May 2020) and there's seemingly no other event we can listen for that'll guarantee the state is restored, we'll accept that it'll remain broken in this specific version (affecting Chrome 79, Edge 79 and Opera 66).

The `pageshow` event is not supported in older browsers including IE8-10 so we need to listen for both. This means that we 'sync' twice in browsers that support `pageshow`, but the performance impact should be minimal.

[1]: https://www.chromestatus.com/feature/5815270035685376
[2]: https://chromium.googlesource.com/chromium/src.git/+/069ad65654655b7bdfb9b760f188395840bc4be4
[3]: https://bugs.chromium.org/p/chromium/issues/detail?id=1035662
[4]: https://crrev.com/069ad65654655b7bdfb9b760f188395840bc4be4
[5]: https://gs.statcounter.com/browser-version-market-share

src/govuk/components/checkboxes/checkboxes.js

@@ -1,5 +1,6 @@
 import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+// addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Event'
 import '../../vendor/polyfills/Element/prototype/classList'
 import { nodeListForEach } from '../../common'
 
@@ -29,13 +30,32 @@ Checkboxes.prototype.init = function () {
     // If we have content that is controlled, set attributes.
     $input.setAttribute('aria-controls', controls)
     $input.removeAttribute('data-aria-controls')
-    this.setAttributes($input)
-  }.bind(this))
+  })
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', this.syncState.bind(this))
+  } else {
+    this.syncState()
+  }
+
+  // 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 is fired as
+  // well.
+  //
+  // (Older browsers don't have a pageshow event, so we do both.)
+  window.addEventListener('pageshow', this.syncState.bind(this))
 
   // Handle events
   $module.addEventListener('click', this.handleClick.bind(this))
 }
 
+Checkboxes.prototype.syncState = function () {
+  nodeListForEach(this.$inputs, function ($input) {
+    this.setAttributes($input)
+  }.bind(this))
+}
+
 Checkboxes.prototype.setAttributes = function ($input) {
   var inputIsChecked = $input.checked
   $input.setAttribute('aria-expanded', inputIsChecked)

src/govuk/components/radios/radios.js

@@ -1,15 +1,17 @@
 import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
+// addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Event'
 import '../../vendor/polyfills/Element/prototype/classList'
 import { nodeListForEach } from '../../common'
 
 function Radios ($module) {
   this.$module = $module
+  this.$inputs = $module.querySelectorAll('input[type="radio"]')
 }
 
 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]
@@ -28,13 +30,32 @@ Radios.prototype.init = function () {
     // If we have content that is controlled, set attributes.
     $input.setAttribute('aria-controls', controls)
     $input.removeAttribute('data-aria-controls')
-    this.setAttributes($input)
-  }.bind(this))
+  })
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', this.syncState.bind(this))
+  } else {
+    this.syncState()
+  }
+
+  // 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 is fired as
+  // well.
+  //
+  // (Older browsers don't have a pageshow event, so we do both.)
+  window.addEventListener('pageshow', this.syncState.bind(this))
 
   // Handle events
   $module.addEventListener('click', this.handleClick.bind(this))
 }
 
+Radios.prototype.syncState = function () {
+  nodeListForEach(this.$inputs, function ($input) {
+    this.setAttributes($input)
+  }.bind(this))
+}
+
 Radios.prototype.setAttributes = function ($input) {
   var $content = document.querySelector('#' + $input.getAttribute('aria-controls'))