govuk_publishing_components 9.6.0 → 9.7.0

data/node_modules/govuk-frontend/components/checkboxes/template.njk

@@ -48,21 +48,33 @@
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
     {% set name = item.name if item.name else params.name %}
     {% set conditionalId = "conditional-" + id %}
+    {% set hasHint = true if item.hint.text or item.hint.html %}
+    {% set itemHintId = id + '-item-hint' %}
     <div class="govuk-checkboxes__item">
       <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
-      {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}>
+      {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}>
       {{ govukLabel({
         html: item.html,
         text: item.text,
-        classes: 'govuk-checkboxes__label',
+        classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
         attributes: item.label.attributes,
         for: id
       }) | indent(6) | trim }}
+      {%- if hasHint %}
+      {{ govukHint({
+        id: itemHintId,
+        classes: 'govuk-checkboxes__hint',
+        attributes: item.hint.attributes,
+        html: item.hint.html,
+        text: item.hint.text
+      }) | indent(6) | trim }}
+      {%- endif %}
     </div>
     {% if item.conditional %}
-      <div class="govuk-checkboxes__conditional" id="{{ conditionalId }}">
+      <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">
         {{ item.conditional.html | safe }}
       </div>
     {% endif %}

data/node_modules/govuk-frontend/components/date-input/README.md

@@ -655,7 +655,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Optional hint. See hint component.</td>
+<td class="govuk-table__cell ">Optional hint. See <a href="../hint/README.md#component-arguments">hint</a> component.</td>
 
 </tr>
 
@@ -667,7 +667,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Optional error message. See errorMessage component.</td>
+<td class="govuk-table__cell ">Optional error message. See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td>
 
 </tr>
 
@@ -679,7 +679,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See fieldset component.</td>
+<td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See <a href="../fieldset/README.md#component-arguments">fieldset</a> component.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/file-upload/README.md

@@ -255,7 +255,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">Yes</td>
 
-<td class="govuk-table__cell ">Arguments for the label component. See label component.</td>
+<td class="govuk-table__cell ">Arguments for the label component. See <a href="../label/README.md#component-arguments">label</a> component.</td>
 
 </tr>
 
@@ -267,7 +267,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td>
+<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td>
 
 </tr>
 
@@ -279,7 +279,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td>
+<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/header/_header.scss

@@ -101,14 +101,16 @@
 
     &:link,
     &:visited {
-      margin-bottom: -1px; // Negate transparent bottom border
-      border-bottom: 1px solid transparent;
       text-decoration: none;
     }
 
     &:hover,
     &:active {
-      border-bottom-color: currentColor;
+      // Negate the added border
+      margin-bottom: -1px;
+      // Omitting colour will use default value of currentColor – if we
+      // specified currentColor explicitly IE8 would ignore this rule.
+      border-bottom: 1px solid;
     }
   }
 

data/node_modules/govuk-frontend/components/input/README.md

@@ -475,7 +475,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the label component. See label component.</td>
+<td class="govuk-table__cell ">Arguments for the label component. See <a href="../label/README.md#component-arguments">label</a> component.</td>
 
 </tr>
 
@@ -487,7 +487,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td>
+<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td>
 
 </tr>
 
@@ -499,7 +499,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td>
+<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See <a href="../error-message/README.md#component-arguments">errorMessage</a> component.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/phase-banner/README.md

@@ -99,7 +99,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the tag object. See tag component.</td>
+<td class="govuk-table__cell ">Arguments for the tag object. See <a href="../tag/README.md#component-arguments">tag</a> component.</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/radios/README.md

@@ -350,6 +350,155 @@ Find out when to use the radios component in your service in the [GOV.UK Design
       ]
     }) }}
 
+### Radios with a divider
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-a-divider/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+
+      <fieldset class="govuk-fieldset">
+
+      <legend class="govuk-fieldset__legend">
+        How do you want to sign in?
+      </legend>
+
+      <div class="govuk-radios">
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="example-divider-1" name="example" type="radio" value="governement-gateway">
+          <label class="govuk-label govuk-radios__label" for="example-divider-1">
+            Use Government Gateway
+          </label>
+        </div>
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="example-divider-2" name="example" type="radio" value="govuk-verify">
+          <label class="govuk-label govuk-radios__label" for="example-divider-2">
+            Use GOV.UK Verify
+          </label>
+        </div>
+
+        <div class="govuk-radios__divider">or</div>
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="example-divider-4" name="example" type="radio" value="create-account">
+          <label class="govuk-label govuk-radios__label" for="example-divider-4">
+            Create an account
+          </label>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from "radios/macro.njk" import govukRadios %}
+
+    {{ govukRadios({
+      "idPrefix": "example-divider",
+      "name": "example",
+      "fieldset": {
+        "legend": {
+          "text": "How do you want to sign in?"
+        }
+      },
+      "items": [
+        {
+          "value": "governement-gateway",
+          "text": "Use Government Gateway"
+        },
+        {
+          "value": "govuk-verify",
+          "text": "Use GOV.UK Verify"
+        },
+        {
+          "divider": "or"
+        },
+        {
+          "value": "create-account",
+          "text": "Create an account"
+        }
+      ]
+    }) }}
+
+### Radios with hints on items
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-hints-on-items/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+
+      <fieldset class="govuk-fieldset">
+
+      <legend class="govuk-fieldset__legend">
+        <h1 class="govuk-fieldset__heading">
+          How do you want to sign in?
+        </h1>
+      </legend>
+
+      <div class="govuk-radios">
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="gov-1" name="gov" type="radio" value="gateway" aria-describedby="gov-1-item-hint">
+          <label class="govuk-label govuk-radios__label" for="gov-1">
+            Sign in with Government Gateway
+          </label>
+          <span id="gov-1-item-hint" class="govuk-hint govuk-radios__hint">
+            You&#39;ll have a user ID if you&#39;ve registered for Self Assessment or filed a tax return online before.
+          </span>
+        </div>
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="gov-2" name="gov" type="radio" value="verify" aria-describedby="gov-2-item-hint">
+          <label class="govuk-label govuk-radios__label" for="gov-2">
+            Sign in with GOV.UK Verify
+          </label>
+          <span id="gov-2-item-hint" class="govuk-hint govuk-radios__hint">
+            You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
+          </span>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from "radios/macro.njk" import govukRadios %}
+
+    {{ govukRadios({
+      "idPrefix": "gov",
+      "name": "gov",
+      "fieldset": {
+        "legend": {
+          "text": "How do you want to sign in?",
+          "isPageHeading": true
+        }
+      },
+      "items": [
+        {
+          "value": "gateway",
+          "text": "Sign in with Government Gateway",
+          "hint": {
+            "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before."
+          }
+        },
+        {
+          "value": "verify",
+          "text": "Sign in with GOV.UK Verify",
+          "hint": {
+            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+          }
+        }
+      ]
+    }) }}
+
 ### Radios without fieldset
 
 [Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview)
@@ -536,7 +685,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See fieldset component.</td>
+<td class="govuk-table__cell ">Arguments for the fieldset component (e.g. legend). See <a href="../fieldset/README.md#component-arguments">fieldset</a> component.</td>
 
 </tr>
 
@@ -548,7 +697,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td>
+<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See <a href="../hint/README.md#component-arguments">hint</a> component.</td>
 
 </tr>
 
@@ -656,7 +805,31 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Provide additional attributes to each radio item label. See `label` component for more details.</td>
+<td class="govuk-table__cell ">Provide additional attributes and classes to each radio item label. See [label](../label/README.md#component-arguments) component for more details.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.hint</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Provide optional hint to each radio item. See `hint` component for more details.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.divider</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional divider text to separate radio items, for example the text "or".</td>
 
 </tr>
 

data/node_modules/govuk-frontend/components/radios/_radios.scss

@@ -70,6 +70,12 @@
     touch-action: manipulation;
   }
 
+  .govuk-radios__hint {
+    display: block;
+    padding-right: $govuk-radios-label-padding-left-right;
+    padding-left: $govuk-radios-label-padding-left-right;
+  }
+
   .govuk-radios__input + .govuk-radios__label::before {
     content: "";
     -webkit-box-sizing: border-box;
@@ -141,6 +147,14 @@
     }
   }
 
+  .govuk-radios__divider {
+    $govuk-divider-size: $govuk-radios-size !default;
+    @include govuk-font($size: 19);
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
   $conditional-border-width: $govuk-border-width-mobile;
   // Calculate the amount of padding needed to keep the border centered against the radios.
   $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
@@ -155,7 +169,7 @@
     padding-left: $conditional-padding-left;
     border-left: $conditional-border-width solid $govuk-border-colour;
 
-    &[aria-hidden="true"] {
+    .js-enabled &--hidden {
       display: none;
     }
 

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

@@ -659,6 +659,361 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+(function(undefined) {
+
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
+    var detect = (
+      'DOMTokenList' in this && (function (x) {
+        return 'classList' in x ? !x.classList.toggle('x', false) && !x.className : true;
+      })(document.createElement('x'))
+    );
+
+    if (detect) return
+
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/polyfill.js
+    (function (global) {
+      var nativeImpl = "DOMTokenList" in global && global.DOMTokenList;
+
+      if (
+          !nativeImpl ||
+          (
+            !!document.createElementNS &&
+            !!document.createElementNS('http://www.w3.org/2000/svg', 'svg') &&
+            !(document.createElementNS("http://www.w3.org/2000/svg", "svg").classList instanceof DOMTokenList)
+          )
+        ) {
+        global.DOMTokenList = (function() { // eslint-disable-line no-unused-vars
+          var dpSupport = true;
+          var defineGetter = function (object, name, fn, configurable) {
+            if (Object.defineProperty)
+              Object.defineProperty(object, name, {
+                configurable: false === dpSupport ? true : !!configurable,
+                get: fn
+              });
+
+            else object.__defineGetter__(name, fn);
+          };
+
+          /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */
+          try {
+            defineGetter({}, "support");
+          }
+          catch (e) {
+            dpSupport = false;
+          }
+
+
+          var _DOMTokenList = function (el, prop) {
+            var that = this;
+            var tokens = [];
+            var tokenMap = {};
+            var length = 0;
+            var maxLength = 0;
+            var addIndexGetter = function (i) {
+              defineGetter(that, i, function () {
+                preop();
+                return tokens[i];
+              }, false);
+
+            };
+            var reindex = function () {
+
+              /** Define getter functions for array-like access to the tokenList's contents. */
+              if (length >= maxLength)
+                for (; maxLength < length; ++maxLength) {
+                  addIndexGetter(maxLength);
+                }
+            };
+
+            /** Helper function called at the start of each class method. Internal use only. */
+            var preop = function () {
+              var error;
+              var i;
+              var args = arguments;
+              var rSpace = /\s+/;
+
+              /** Validate the token/s passed to an instance method, if any. */
+              if (args.length)
+                for (i = 0; i < args.length; ++i)
+                  if (rSpace.test(args[i])) {
+                    error = new SyntaxError('String "' + args[i] + '" ' + "contains" + ' an invalid character');
+                    error.code = 5;
+                    error.name = "InvalidCharacterError";
+                    throw error;
+                  }
+
+
+              /** Split the new value apart by whitespace*/
+              if (typeof el[prop] === "object") {
+                tokens = ("" + el[prop].baseVal).replace(/^\s+|\s+$/g, "").split(rSpace);
+              } else {
+                tokens = ("" + el[prop]).replace(/^\s+|\s+$/g, "").split(rSpace);
+              }
+
+              /** Avoid treating blank strings as single-item token lists */
+              if ("" === tokens[0]) tokens = [];
+
+              /** Repopulate the internal token lists */
+              tokenMap = {};
+              for (i = 0; i < tokens.length; ++i)
+                tokenMap[tokens[i]] = true;
+              length = tokens.length;
+              reindex();
+            };
+
+            /** Populate our internal token list if the targeted attribute of the subject element isn't empty. */
+            preop();
+
+            /** Return the number of tokens in the underlying string. Read-only. */
+            defineGetter(that, "length", function () {
+              preop();
+              return length;
+            });
+
+            /** Override the default toString/toLocaleString methods to return a space-delimited list of tokens when typecast. */
+            that.toLocaleString =
+              that.toString = function () {
+                preop();
+                return tokens.join(" ");
+              };
+
+            that.item = function (idx) {
+              preop();
+              return tokens[idx];
+            };
+
+            that.contains = function (token) {
+              preop();
+              return !!tokenMap[token];
+            };
+
+            that.add = function () {
+              preop.apply(that, args = arguments);
+
+              for (var args, token, i = 0, l = args.length; i < l; ++i) {
+                token = args[i];
+                if (!tokenMap[token]) {
+                  tokens.push(token);
+                  tokenMap[token] = true;
+                }
+              }
+
+              /** Update the targeted attribute of the attached element if the token list's changed. */
+              if (length !== tokens.length) {
+                length = tokens.length >>> 0;
+                if (typeof el[prop] === "object") {
+                  el[prop].baseVal = tokens.join(" ");
+                } else {
+                  el[prop] = tokens.join(" ");
+                }
+                reindex();
+              }
+            };
+
+            that.remove = function () {
+              preop.apply(that, args = arguments);
+
+              /** Build a hash of token names to compare against when recollecting our token list. */
+              for (var args, ignore = {}, i = 0, t = []; i < args.length; ++i) {
+                ignore[args[i]] = true;
+                delete tokenMap[args[i]];
+              }
+
+              /** Run through our tokens list and reassign only those that aren't defined in the hash declared above. */
+              for (i = 0; i < tokens.length; ++i)
+                if (!ignore[tokens[i]]) t.push(tokens[i]);
+
+              tokens = t;
+              length = t.length >>> 0;
+
+              /** Update the targeted attribute of the attached element. */
+              if (typeof el[prop] === "object") {
+                el[prop].baseVal = tokens.join(" ");
+              } else {
+                el[prop] = tokens.join(" ");
+              }
+              reindex();
+            };
+
+            that.toggle = function (token, force) {
+              preop.apply(that, [token]);
+
+              /** Token state's being forced. */
+              if (undefined !== force) {
+                if (force) {
+                  that.add(token);
+                  return true;
+                } else {
+                  that.remove(token);
+                  return false;
+                }
+              }
+
+              /** Token already exists in tokenList. Remove it, and return FALSE. */
+              if (tokenMap[token]) {
+                that.remove(token);
+                return false;
+              }
+
+              /** Otherwise, add the token and return TRUE. */
+              that.add(token);
+              return true;
+            };
+
+            return that;
+          };
+
+          return _DOMTokenList;
+        }());
+      }
+
+      // Add second argument to native DOMTokenList.toggle() if necessary
+      (function () {
+        var e = document.createElement('span');
+        if (!('classList' in e)) return;
+        e.classList.toggle('x', false);
+        if (!e.classList.contains('x')) return;
+        e.classList.constructor.prototype.toggle = function toggle(token /*, force*/) {
+          var force = arguments[1];
+          if (force === undefined) {
+            var add = !this.contains(token);
+            this[add ? 'add' : 'remove'](token);
+            return add;
+          }
+          force = !!force;
+          this[force ? 'add' : 'remove'](token);
+          return force;
+        };
+      }());
+
+      // Add multiple arguments to native DOMTokenList.add() if necessary
+      (function () {
+        var e = document.createElement('span');
+        if (!('classList' in e)) return;
+        e.classList.add('a', 'b');
+        if (e.classList.contains('b')) return;
+        var native = e.classList.constructor.prototype.add;
+        e.classList.constructor.prototype.add = function () {
+          var args = arguments;
+          var l = arguments.length;
+          for (var i = 0; i < l; i++) {
+            native.call(this, args[i]);
+          }
+        };
+      }());
+
+      // Add multiple arguments to native DOMTokenList.remove() if necessary
+      (function () {
+        var e = document.createElement('span');
+        if (!('classList' in e)) return;
+        e.classList.add('a');
+        e.classList.add('b');
+        e.classList.remove('a', 'b');
+        if (!e.classList.contains('b')) return;
+        var native = e.classList.constructor.prototype.remove;
+        e.classList.constructor.prototype.remove = function () {
+          var args = arguments;
+          var l = arguments.length;
+          for (var i = 0; i < l; i++) {
+            native.call(this, args[i]);
+          }
+        };
+      }());
+
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
+(function(undefined) {
+
+    // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/detect.js
+    var detect = (
+      'document' in this && "classList" in document.documentElement && 'Element' in this && 'classList' in Element.prototype && (function () {
+        var e = document.createElement('span');
+        e.classList.add('a', 'b');
+        return e.classList.contains('b');
+      }())
+    );
+
+    if (detect) return
+
+    // Polyfill from https://raw.githubusercontent.com/Financial-Times/polyfill-service/8717a9e04ac7aff99b4980fbedead98036b0929a/packages/polyfill-library/polyfills/Element/prototype/classList/polyfill.js
+    (function (global) {
+      var dpSupport = true;
+      var defineGetter = function (object, name, fn, configurable) {
+        if (Object.defineProperty)
+          Object.defineProperty(object, name, {
+            configurable: false === dpSupport ? true : !!configurable,
+            get: fn
+          });
+
+        else object.__defineGetter__(name, fn);
+      };
+      /** Ensure the browser allows Object.defineProperty to be used on native JavaScript objects. */
+      try {
+        defineGetter({}, "support");
+      }
+      catch (e) {
+        dpSupport = false;
+      }
+      /** Polyfills a property with a DOMTokenList */
+      var addProp = function (o, name, attr) {
+
+        defineGetter(o.prototype, name, function () {
+          var tokenList;
+
+          var THIS = this,
+
+          /** Prevent this from firing twice for some reason. What the hell, IE. */
+          gibberishProperty = "__defineGetter__" + "DEFINE_PROPERTY" + name;
+          if(THIS[gibberishProperty]) return tokenList;
+          THIS[gibberishProperty] = true;
+
+          /**
+           * IE8 can't define properties on native JavaScript objects, so we'll use a dumb hack instead.
+           *
+           * What this is doing is creating a dummy element ("reflection") inside a detached phantom node ("mirror")
+           * that serves as the target of Object.defineProperty instead. While we could simply use the subject HTML
+           * element instead, this would conflict with element types which use indexed properties (such as forms and
+           * select lists).
+           */
+          if (false === dpSupport) {
+
+            var visage;
+            var mirror = addProp.mirror || document.createElement("div");
+            var reflections = mirror.childNodes;
+            var l = reflections.length;
+
+            for (var i = 0; i < l; ++i)
+              if (reflections[i]._R === THIS) {
+                visage = reflections[i];
+                break;
+              }
+
+            /** Couldn't find an element's reflection inside the mirror. Materialise one. */
+            visage || (visage = mirror.appendChild(document.createElement("div")));
+
+            tokenList = DOMTokenList.call(visage, THIS, attr);
+          } else tokenList = new DOMTokenList(THIS, attr);
+
+          defineGetter(THIS, name, function () {
+            return tokenList;
+          });
+          delete THIS[gibberishProperty];
+
+          return tokenList;
+        }, true);
+      };
+
+      addProp(global.Element, "classList", "className");
+      addProp(global.HTMLElement, "classList", "className");
+      addProp(global.HTMLLinkElement, "relList", "rel");
+      addProp(global.HTMLAnchorElement, "relList", "rel");
+      addProp(global.HTMLAreaElement, "relList", "rel");
+    }(this));
+
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+
 /**
  * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
  * This seems to fail in IE8, requires more investigation.
@@ -711,7 +1066,7 @@ Radios.prototype.setAttributes = function ($input) {
   $input.setAttribute('aria-expanded', inputIsChecked);
 
   var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
-  $content.setAttribute('aria-hidden', !inputIsChecked);
+  $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
 };
 
 Radios.prototype.handleClick = function (event) {