Release v3.8.0

[vanitabarrett]

3.8.0 (Feature release)

New features

The secondary text colour is now darker

$govuk-secondary-text-colour and govuk-colour("dark-grey") are now darker so users can more clearly read hint text that uses the colour.

The colour now has a contrast ratio of 7:1 against a white background, and helps hint text meet the WCAG 2.1 (AAA) accessibility standard.

This was added in pull request #1827: Make dark grey darker.

Error styling for field border thickness is now the same with and without an error

The error styling for the:

• text input, select and textarea components no longer makes the border thicker
• file upload component no longer includes a border around the file upload input

This means it’s easier for users to tell the difference between a field with an error and a field that's focused.

When an error message is about several fields, make sure you're clear which field has the error. You must not rely on users being able to tell which field has the error styling.

This was added in pull request #1870: Reduce border width of form inputs in the error state.

Set spellcheck with a new option

You can now turn spellcheck on or off in the input, textarea and character count components using the new spellcheck option instead of the attributes option.

For example:

{{ govukInput({
    spellcheck: true
}) }}

This was added in pull requests:

• #1859: Add spellcheck option
• #1869: Add missing spellcheck param to character count

Deprecated features

$govuk-border-width-form-element-error

From GOV.UK Frontend v4.0.0, you'll no longer be able to reference the $govuk-border-width-form-element-error Sass setting.

Change any references to $govuk-border-width-form-element-error in your Sass code so they reference $govuk-border-width-form-element instead.

This was changed in pull request #1870: Reduce border width of form inputs in the error state.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

• #1838: Correctly camel case SVG attributes in the header and footer
• #1842: Preserve the state of conditional reveals when navigating 'back' in the browser
• #1848: Preserve the state of the character count when navigating 'back' in the browser
• #1855: Hint component can render block-level elements as valid HTML
• #1861: Fix the display of checkboxes when border-box box sizing is applied globally
• #1862: Fix display of warning text icon when border-box box sizing is applied globally #1862
• #1879: Explicitly set outline-offset to remove 1px transparent border in chrome v84

[36degrees]

Changes to dist

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index a3f166fc..3be2e4f1 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-3.7.0
+3.8.0
diff --git a/dist/govuk-frontend-3.7.0.min.css b/dist/govuk-frontend-3.8.0.min.css
similarity index 38%
rename from dist/govuk-frontend-3.7.0.min.css
rename to dist/govuk-frontend-3.8.0.min.css
index 48c4db77..7dab0804 100644
--- a/dist/govuk-frontend-3.7.0.min.css
+++ b/dist/govuk-frontend-3.8.0.min.css
@@ -66,7 +66,7 @@
 .govuk-link--muted:hover,
 .govuk-link--muted:link,
 .govuk-link--muted:visited {
-    color: #626a6e
+    color: #505a5f
 }
 
 .govuk-link--muted:focus,
@@ -384,7 +384,7 @@
     line-height: 1.11111;
     display: block;
     margin-bottom: 5px;
-    color: #626a6e
+    color: #505a5f
 }
 
 @media print {
@@ -418,7 +418,7 @@
     line-height: 1.11111;
     display: block;
     margin-bottom: 5px;
-    color: #626a6e
+    color: #505a5f
 }
 
 @media print {
@@ -457,7 +457,7 @@
     font-size: 1rem;
     line-height: 1.25;
     display: block;
-    color: #626a6e
+    color: #505a5f
 }
 
 @media print {
@@ -1400,7 +1400,7 @@
     transform: rotate(225deg);
     border: solid;
     border-width: 1px 1px 0 0;
-    border-color: #626a6e
+    border-color: #505a5f
 }
 
 .govuk-back-link:after {
@@ -1483,7 +1483,7 @@
     transform: rotate(45deg);
     border: solid;
     border-width: 1px 1px 0 0;
-    border-color: #626a6e
+    border-color: #505a5f
 }
 
 .govuk-breadcrumbs__list-item:first-child {
@@ -2010,7 +2010,7 @@
     line-height: 1.25;
     display: block;
     margin-bottom: 15px;
-    color: #626a6e
+    color: #505a5f
 }
 
 @media print {
@@ -2289,11 +2289,12 @@
 
 .govuk-checkboxes__label:after {
     content: "";
+    box-sizing: border-box;
     position: absolute;
     top: 11px;
     left: 9px;
-    width: 18px;
-    height: 7px;
+    width: 23px;
+    height: 12px;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
@@ -2387,8 +2388,8 @@
 .govuk-checkboxes--small .govuk-checkboxes__label:after {
     top: 15px;
     left: 6px;
-    width: 9px;
-    height: 3.5px;
+    width: 12px;
+    height: 6.5px;
     border-width: 0 0 3px 3px
 }
 
@@ -2476,12 +2477,11 @@
 }
 
 .govuk-textarea--error {
-    border: 4px solid #d4351c
+    border: 2px solid #d4351c
 }
 
 .govuk-textarea--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
+    border-color: #0b0c0c
 }
 
 .govuk-character-count {
@@ -2755,12 +2755,11 @@
 }
 
 .govuk-input--error {
-    border: 4px solid #d4351c
+    border: 2px solid #d4351c
 }
 
 .govuk-input--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
+    border-color: #0b0c0c
 }
 
 .govuk-input--width-30 {
@@ -3115,24 +3114,6 @@
     box-shadow: inset 0 0 0 4px #0b0c0c
 }
 
-.govuk-file-upload--error {
-    margin-right: -5px;
-    margin-left: -5px;
-    padding-right: 5px;
-    padding-left: 5px;
-    border: 4px solid #d4351c
-}
-
-.govuk-file-upload--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
-}
-
-.govuk-file-upload--error:focus-within {
-    border-color: #0b0c0c;
-    box-shadow: none
-}
-
 .govuk-footer {
     font-family: GDS Transport, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -3353,20 +3334,17 @@ only screen and (min-resolution:192dpi) {
     padding: 0;
     list-style: none;
     -webkit-column-gap: 30px;
-    -moz-column-gap: 30px;
     column-gap: 30px
 }
 
 @media (min-width:48.0625em) {
     .govuk-footer__list--columns-2 {
         -webkit-column-count: 2;
-        -moz-column-count: 2;
         column-count: 2
     }
 
     .govuk-footer__list--columns-3 {
         -webkit-column-count: 3;
-        -moz-column-count: 3;
         column-count: 3
     }
 }
@@ -4037,12 +4015,12 @@ only screen and (min-resolution:192dpi) {
 }
 
 .govuk-tag--inactive {
-    background-color: #626a6e
+    background-color: #505a5f
 }
 
 .govuk-tag--grey {
-    color: #454a4d;
-    background: #eff0f1
+    color: #383f43;
+    background: #eeefef
 }
 
 .govuk-tag--purple {
@@ -4697,12 +4675,11 @@ only screen and (min-resolution:192dpi) {
 }
 
 .govuk-select--error {
-    border: 4px solid #d4351c
+    border: 2px solid #d4351c
 }
 
 .govuk-select--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
+    border-color: #0b0c0c
 }
 
 .govuk-skip-link {
@@ -4787,6 +4764,7 @@ only screen and (min-resolution:192dpi) {
 
 .govuk-skip-link:focus {
     outline: 3px solid #fd0;
+    outline-offset: 0;
     background-color: #fd0
 }
 
@@ -4915,11 +4893,12 @@ only screen and (min-resolution:192dpi) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
+    box-sizing: border-box;
     display: inline-block;
     position: absolute;
     left: 0;
-    min-width: 29px;
-    min-height: 29px;
+    min-width: 35px;
+    min-height: 35px;
     margin-top: -7px;
     border: 3px solid #0b0c0c;
     border-radius: 50%;
diff --git a/dist/govuk-frontend-3.7.0.min.js b/dist/govuk-frontend-3.8.0.min.js
similarity index 47%
rename from dist/govuk-frontend-3.7.0.min.js
rename to dist/govuk-frontend-3.8.0.min.js
index 5fcdd329..a94361a8 100644
--- a/dist/govuk-frontend-3.7.0.min.js
+++ b/dist/govuk-frontend-3.8.0.min.js
@@ -11,7 +11,7 @@
     function n(t) {
         this.$module = t, this.moduleId = t.getAttribute("id"), this.$sections = t.querySelectorAll(".govuk-accordion__section"), this.$openAllButton = "", this.browserSupportsSessionStorage = e.checkForSessionStorage(), this.controlsClass = "govuk-accordion__controls", this.openAllClass = "govuk-accordion__open-all", this.iconClass = "govuk-accordion__icon", this.sectionHeaderClass = "govuk-accordion__section-header", this.sectionHeaderFocusedClass = "govuk-accordion__section-header--focused", this.sectionHeadingClass = "govuk-accordion__section-heading", this.sectionSummaryClass = "govuk-accordion__section-summary", this.sectionButtonClass = "govuk-accordion__section-button", this.sectionExpandedClass = "govuk-accordion__section--expanded"
     }(function(t) {
-        var a, c, l, u;
+        var a, l, c, u;
         "defineProperty" in Object && function() {
             try {
                 return Object.defineProperty({}, "test", {
@@ -20,7 +20,7 @@
             } catch (t) {
                 return !1
             }
-        }() || (a = Object.defineProperty, c = Object.prototype.hasOwnProperty("__defineGetter__"), l = "Getters & setters cannot be defined on this javascript engine", u = "A property cannot both have accessors and be writable or have a value", Object.defineProperty = function(t, e, n) {
+        }() || (a = Object.defineProperty, l = Object.prototype.hasOwnProperty("__defineGetter__"), c = "Getters & setters cannot be defined on this javascript engine", u = "A property cannot both have accessors and be writable or have a value", Object.defineProperty = function(t, e, n) {
             if (a && (t === window || t === document || t === Element.prototype || t instanceof Element)) return a(t, e, n);
             if (null === t || !(t instanceof Object || "object" == typeof t)) throw new TypeError("Object.defineProperty called on non-object");
             if (!(n instanceof Object)) throw new TypeError("Property description must be an object");
@@ -30,13 +30,13 @@
                 s = "set" in n && typeof n.set;
             if (r) {
                 if ("function" !== r) throw new TypeError("Getter must be a function");
-                if (!c) throw new TypeError(l);
+                if (!l) throw new TypeError(c);
                 if (i) throw new TypeError(u);
                 Object.__defineGetter__.call(t, o, n.get)
             } else t[o] = n.value;
             if (s) {
                 if ("function" !== s) throw new TypeError("Setter must be a function");
-                if (!c) throw new TypeError(l);
+                if (!l) throw new TypeError(c);
                 if (i) throw new TypeError(u);
                 Object.__defineSetter__.call(t, o, n.set)
             }
@@ -52,34 +52,34 @@
                         r = t.prototype,
                         s = function s() {},
                         a = i.toString,
-                        c = "function" == typeof Symbol && "symbol" == typeof Symbol.toStringTag,
-                        l = Function.prototype.toString,
+                        l = "function" == typeof Symbol && "symbol" == typeof Symbol.toStringTag,
+                        c = Function.prototype.toString,
                         u = function u(t) {
                             try {
-                                return l.call(t), !0
+                                return c.call(t), !0
                             } catch (e) {
                                 return !1
                             }
                         };
                     n = function n(t) {
                         if ("function" != typeof t) return !1;
-                        if (c) return u(t);
+                        if (l) return u(t);
                         var e = a.call(t);
                         return "[object Function]" === e || "[object GeneratorFunction]" === e
                     };
                     var d = r.slice,
-                        p = r.concat,
-                        h = r.push,
+                        h = r.concat,
+                        p = r.push,
                         f = Math.max,
                         b = this;
                     if (!n(b)) throw new TypeError("Function.prototype.bind called on incompatible " + b);
-                    for (var m, y = d.call(arguments, 1), v = f(0, b.length - y.length), g = [], w = 0; w < v; w++) h.call(g, "$" + w);
+                    for (var m, y = d.call(arguments, 1), v = f(0, b.length - y.length), g = [], w = 0; w < v; w++) p.call(g, "$" + w);
                     return m = Function("binder", "return function (" + g.join(",") + "){ return binder.apply(this, arguments); }")(function() {
                         if (this instanceof m) {
-                            var t = b.apply(this, p.call(y, d.call(arguments)));
+                            var t = b.apply(this, h.call(y, d.call(arguments)));
                             return o(t) === t ? t : this
                         }
-                        return b.apply(e, p.call(y, d.call(arguments)))
+                        return b.apply(e, h.call(y, d.call(arguments)))
                     }), b.prototype && (s.prototype = b.prototype, m.prototype = new s, s.prototype = null), m
                 }
             })
@@ -102,8 +102,8 @@
                 return function(i, r) {
                     var s = this,
                         a = [],
-                        c = {},
-                        l = 0,
+                        l = {},
+                        c = 0,
                         t = 0,
                         e = function(t) {
                             n(s, t, function() {
@@ -111,8 +111,8 @@
                             }, !1)
                         },
                         u = function() {
-                            if (t <= l)
-                                for (; t < l; ++t) e(t)
+                            if (t <= c)
+                                for (; t < c; ++t) e(t)
                         },
                         d = function() {
                             var t, e, n = arguments,
@@ -120,28 +120,28 @@
                             if (n.length)
                                 for (e = 0; e < n.length; ++e)
                                     if (o.test(n[e])) throw (t = new SyntaxError('String "' + n[e] + '" contains an invalid character')).code = 5, t.name = "InvalidCharacterError", t;
-                            for ("" === (a = "object" == typeof i[r] ? ("" + i[r].baseVal).replace(/^\s+|\s+$/g, "").split(o) : ("" + i[r]).replace(/^\s+|\s+$/g, "").split(o))[0] && (a = []), c = {}, e = 0; e < a.length; ++e) c[a[e]] = !0;
-                            l = a.length, u()
+                            for ("" === (a = "object" == typeof i[r] ? ("" + i[r].baseVal).replace(/^\s+|\s+$/g, "").split(o) : ("" + i[r]).replace(/^\s+|\s+$/g, "").split(o))[0] && (a = []), l = {}, e = 0; e < a.length; ++e) l[a[e]] = !0;
+                            c = a.length, u()
                         };
                     return d(), n(s, "length", function() {
-                        return d(), l
+                        return d(), c
                     }), s.toLocaleString = s.toString = function() {
                         return d(), a.join(" ")
                     }, s.item = function(t) {
                         return d(), a[t]
                     }, s.contains = function(t) {
-                        return d(), !!c[t]
+                        return d(), !!l[t]
                     }, s.add = function() {
                         d.apply(s, t = arguments);
-                        for (var t, e, n = 0, o = t.length; n < o; ++n) c[e = t[n]] || (a.push(e), c[e] = !0);
-                        l !== a.length && (l = a.length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u())
+                        for (var t, e, n = 0, o = t.length; n < o; ++n) l[e = t[n]] || (a.push(e), l[e] = !0);
+                        c !== a.length && (c = a.length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u())
                     }, s.remove = function() {
                         d.apply(s, t = arguments);
-                        for (var t, e = {}, n = 0, o = []; n < t.length; ++n) e[t[n]] = !0, delete c[t[n]];
+                        for (var t, e = {}, n = 0, o = []; n < t.length; ++n) e[t[n]] = !0, delete l[t[n]];
                         for (n = 0; n < a.length; ++n) e[a[n]] || o.push(a[n]);
-                        l = (a = o).length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u()
+                        c = (a = o).length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u()
                     }, s.toggle = function(t, e) {
-                        return d.apply(s, [t]), o !== e ? e ? (s.add(t), !0) : (s.remove(t), !1) : c[t] ? (s.remove(t), !1) : (s.add(t), !0)
+                        return d.apply(s, [t]), o !== e ? e ? (s.add(t), !0) : (s.remove(t), !1) : l[t] ? (s.remove(t), !1) : (s.add(t), !0)
                     }, s
                 }
             }()), "classList" in (n = document.createElement("span")) && (n.classList.toggle("x", !1), n.classList.contains("x") && (n.classList.constructor.prototype.toggle = function(t) {
@@ -177,31 +177,31 @@
                     var t, e = document.appendChild(document.createElement("body")),
                         n = e.appendChild(document.createElement("iframe")).contentWindow.document,
                         a = Element.prototype = n.appendChild(n.createElement("*")),
-                        c = {},
-                        l = function(t, e) {
+                        l = {},
+                        c = function(t, e) {
                             var n, o, i, r = t.childNodes || [],
                                 s = -1;
                             if (1 === t.nodeType && t.constructor !== Element)
-                                for (n in t.constructor = Element, c) o = c[n], t[n] = o;
-                            for (; i = e && r[++s];) l(i, e);
+                                for (n in t.constructor = Element, l) o = l[n], t[n] = o;
+                            for (; i = e && r[++s];) c(i, e);
                             return t
                         },
                         u = document.getElementsByTagName("*"),
                         o = document.createElement,
                         i = 100;
                     a.attachEvent("onpropertychange", function(t) {
-                        for (var e, n = t.propertyName, o = !c.hasOwnProperty(n), i = a[n], r = c[n], s = -1; e = u[++s];) 1 === e.nodeType && (!o && e[n] !== r || (e[n] = i));
-                        c[n] = i
+                        for (var e, n = t.propertyName, o = !l.hasOwnProperty(n), i = a[n], r = l[n], s = -1; e = u[++s];) 1 === e.nodeType && (!o && e[n] !== r || (e[n] = i));
+                        l[n] = i
                     }), a.constructor = Element, a.hasAttribute || (a.hasAttribute = function(t) {
                         return null !== this.getAttribute(t)
                     }), r() || (document.onreadystatechange = r, t = setInterval(r, 25)), document.createElement = function(t) {
                         var e = o(String(t).toLowerCase());
-                        return l(e)
+                        return c(e)
                     }, document.removeChild(e)
                 } else window.HTMLElement = window.Element;
 
                 function r() {
-                    return i-- || clearTimeout(t), !(!document.body || document.body.prototype || !/(complete|interactive)/.test(document.readyState)) && (l(document, !0), t && document.body.prototype && clearTimeout(t), !!document.body.prototype)
+                    return i-- || clearTimeout(t), !(!document.body || document.body.prototype || !/(complete|interactive)/.test(document.readyState)) && (c(document, !0), t && document.body.prototype && clearTimeout(t), !!document.body.prototype)
                 }
             }()
         }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}),
@@ -220,24 +220,24 @@
                 } catch (e) {
                     u = !1
                 }
-                var p = function(t, c, l) {
-                    d(t.prototype, c, function() {
+                var h = function(t, l, c) {
+                    d(t.prototype, l, function() {
                         var t, e = this,
-                            n = "__defineGetter__DEFINE_PROPERTY" + c;
+                            n = "__defineGetter__DEFINE_PROPERTY" + l;
                         if (e[n]) return t;
                         if (!(e[n] = !0) === u) {
-                            for (var o, i = p.mirror || document.createElement("div"), r = i.childNodes, s = r.length, a = 0; a < s; ++a)
+                            for (var o, i = h.mirror || document.createElement("div"), r = i.childNodes, s = r.length, a = 0; a < s; ++a)
                                 if (r[a]._R === e) {
                                     o = r[a];
                                     break
-                                } o = o || i.appendChild(document.createElement("div")), t = DOMTokenList.call(o, e, l)
-                        } else t = new DOMTokenList(e, l);
-                        return d(e, c, function() {
+                                } o = o || i.appendChild(document.createElement("div")), t = DOMTokenList.call(o, e, c)
+                        } else t = new DOMTokenList(e, c);
+                        return d(e, l, function() {
                             return t
                         }), delete e[n], t
                     }, !0)
                 };
-                p(t.Element, "classList", "className"), p(t.HTMLElement, "classList", "className"), p(t.HTMLLinkElement, "relList", "rel"), p(t.HTMLAnchorElement, "relList", "rel"), p(t.HTMLAreaElement, "relList", "rel")
+                h(t.Element, "classList", "className"), h(t.HTMLElement, "classList", "className"), h(t.HTMLLinkElement, "relList", "rel"), h(t.HTMLAnchorElement, "relList", "rel"), h(t.HTMLAreaElement, "relList", "rel")
             }(this)
         }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}), n.prototype.init = function() {
             if (this.$module) {
@@ -262,16 +262,16 @@
                 s = document.createElement("button");
             s.setAttribute("type", "button"), s.setAttribute("id", this.moduleId + "-heading-" + (t + 1)), s.setAttribute("aria-controls", this.moduleId + "-content-" + (t + 1));
             for (var a = 0; a < o.attributes.length; a++) {
-                var c = o.attributes.item(a);
-                s.setAttribute(c.nodeName, c.nodeValue)
+                var l = o.attributes.item(a);
+                s.setAttribute(l.nodeName, l.nodeValue)
             }
             s.addEventListener("focusin", function(t) {
                 e.classList.contains(n.sectionHeaderFocusedClass) || (e.className += " " + n.sectionHeaderFocusedClass)
             }), s.addEventListener("blur", function(t) {
                 e.classList.remove(n.sectionHeaderFocusedClass)
             }), null != r && s.setAttribute("aria-describedby", this.moduleId + "-summary-" + (t + 1)), s.innerHTML = o.innerHTML, i.removeChild(o), i.appendChild(s);
-            var l = document.createElement("span");
-            l.className = this.iconClass, l.setAttribute("aria-hidden", "true"), s.appendChild(l)
+            var c = document.createElement("span");
+            c.className = this.iconClass, c.setAttribute("aria-hidden", "true"), s.appendChild(c)
         }, n.prototype.onSectionToggle = function(t) {
             var e = this.isExpanded(t);
             this.setExpanded(!e, t), this.storeState(t)
@@ -455,16 +455,16 @@
         this.$module = t, this.$inputs = t.querySelectorAll('input[type="checkbox"]')
     }
 
-    function c(t) {
+    function l(t) {
         this.$module = t
     }
 
-    function l(t) {
+    function c(t) {
         this.$module = t
     }
 
     function u(t) {
-        this.$module = t
+        this.$module = t, this.$inputs = t.querySelectorAll('input[type="radio"]')
     }
 
     function d(t) {
@@ -513,8 +513,10 @@
             if (e && n) {
                 e.insertAdjacentElement("afterend", n), this.options = this.getDataset(t);
                 var o = this.defaults.characterCountAttribute;
-                if (this.options.maxwords && (o = this.defaults.wordCountAttribute), this.maxLength = t.getAttribute(o), this.maxLength) t.removeAttribute("maxlength"), this.bindChangeEvents.bind(this)(), this.updateCountMessage.bind(this)()
+                this.options.maxwords && (o = this.defaults.wordCountAttribute), this.maxLength = t.getAttribute(o), this.maxLength && (t.removeAttribute("maxlength"), "onpageshow" in window ? window.addEventListener("pageshow", this.sync.bind(this)) : window.addEventListener("DOMContentLoaded", this.sync.bind(this)), this.sync())
             }
+        }, s.prototype.sync = function() {
+            this.bindChangeEvents(), this.updateCountMessage()
         }, s.prototype.getDataset = function(t) {
             var e = {},
                 n = t.attributes;
@@ -533,7 +535,7 @@
             var t = this.$textarea;
             t.addEventListener("keyup", this.checkIfValueChanged.bind(this)), t.addEventListener("focus", this.handleFocus.bind(this)), t.addEventListener("blur", this.handleBlur.bind(this))
         }, s.prototype.checkIfValueChanged = function() {
-            this.$textarea.oldValue || (this.$textarea.oldValue = ""), this.$textarea.value !== this.$textarea.oldValue && (this.$textarea.oldValue = this.$textarea.value, this.updateCountMessage.bind(this)())
+            this.$textarea.oldValue || (this.$textarea.oldValue = ""), this.$textarea.value !== this.$textarea.oldValue && (this.$textarea.oldValue = this.$textarea.value, this.updateCountMessage())
         }, s.prototype.updateCountMessage = function() {
             var t = this.$textarea,
                 e = this.options,
@@ -542,8 +544,8 @@
                 i = this.maxLength,
                 r = i - o;
             o < i * (e.threshold ? e.threshold : 0) / 100 ? (n.classList.add("govuk-character-count__message--disabled"), n.setAttribute("aria-hidden", !0)) : (n.classList.remove("govuk-character-count__message--disabled"), n.removeAttribute("aria-hidden")), r < 0 ? (t.classList.add("govuk-textarea--error"), n.classList.remove("govuk-hint"), n.classList.add("govuk-error-message")) : (t.classList.remove("govuk-textarea--error"), n.classList.remove("govuk-error-message"), n.classList.add("govuk-hint"));
-            var s, a, c = "character";
-            e.maxwords && (c = "word"), c += -1 == r || 1 == r ? "" : "s", s = r < 0 ? "too many" : "remaining", a = Math.abs(r), n.innerHTML = "You have " + a + " " + c + " " + s
+            var s, a, l = "character";
+            e.maxwords && (l = "word"), l += -1 == r || 1 == r ? "" : "s", s = r < 0 ? "too many" : "remaining", a = Math.abs(r), n.innerHTML = "You have " + a + " " + l + " " + s
         }, s.prototype.handleFocus = function() {
             this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1e3)
         }, s.prototype.handleBlur = function() {
@@ -552,18 +554,21 @@
             var n = this.$module;
             r(this.$inputs, function(t) {
                 var e = t.getAttribute("data-aria-controls");
-                e && n.querySelector("#" + e) && (t.setAttribute("aria-controls", e), t.removeAttribute("data-aria-controls"), this.setAttributes(t))
-            }.bind(this)), n.addEventListener("click", this.handleClick.bind(this))
-        }, a.prototype.setAttributes = function(t) {
-            var e = t.checked;
-            t.setAttribute("aria-expanded", e);
-            var n = this.$module.querySelector("#" + t.getAttribute("aria-controls"));
-            n && n.classList.toggle("govuk-checkboxes__conditional--hidden", !e)
+                e && n.querySelector("#" + e) && (t.setAttribute("aria-controls", e), t.removeAttribute("data-aria-controls"))
+            }), "onpageshow" in window ? window.addEventListener("pageshow", this.syncAllConditionalReveals.bind(this)) : window.addEventListener("DOMContentLoaded", this.syncAllConditionalReveals.bind(this)), this.syncAllConditionalReveals(), n.addEventListener("click", this.handleClick.bind(this))
+        }, a.prototype.syncAllConditionalReveals = function() {
+            r(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
+        }, a.prototype.syncConditionalRevealWithInputState = function(t) {
+            var e = this.$module.querySelector("#" + t.getAttribute("aria-controls"));
+            if (e && e.classList.contains("govuk-checkboxes__conditional")) {
+                var n = t.checked;
+                t.setAttribute("aria-expanded", n), e.classList.toggle("govuk-checkboxes__conditional--hidden", !n)
+            }
         }, a.prototype.handleClick = function(t) {
             var e = t.target,
                 n = "checkbox" === e.getAttribute("type"),
                 o = e.getAttribute("aria-controls");
-            n && o && this.setAttributes(e)
+            n && o && this.syncConditionalRevealWithInputState(e)
         },
         function(t) {
             "document" in this && "matches" in document.documentElement || (Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || function(t) {
@@ -579,13 +584,13 @@
                 }
                 return null
             })
-        }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}), c.prototype.init = function() {
+        }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}), l.prototype.init = function() {
             var t = this.$module;
             t && (t.focus(), t.addEventListener("click", this.handleClick.bind(this)))
-        }, c.prototype.handleClick = function(t) {
+        }, l.prototype.handleClick = function(t) {
             var e = t.target;
             this.focusTarget(e) && t.preventDefault()
-        }, c.prototype.focusTarget = function(t) {
+        }, l.prototype.focusTarget = function(t) {
             if ("A" !== t.tagName || !1 === t.href) return !1;
             var e = this.getFragmentFromUrl(t.href),
                 n = document.getElementById(e);
@@ -594,9 +599,9 @@
             return !!o && (o.scrollIntoView(), n.focus({
                 preventScroll: !0
             }), !0)
-        }, c.prototype.getFragmentFromUrl = function(t) {
+        }, l.prototype.getFragmentFromUrl = function(t) {
             return -1 !== t.indexOf("#") && t.split("#").pop()
-        }, c.prototype.getAssociatedLegendOrLabel = function(t) {
+        }, l.prototype.getAssociatedLegendOrLabel = function(t) {
             var e = t.closest("fieldset");
             if (e) {
                 var n = e.getElementsByTagName("legend");
@@ -610,26 +615,28 @@
                 }
             }
             return document.querySelector("label[for='" + t.getAttribute("id") + "']") || t.closest("label")
-        }, l.prototype.init = function() {
+        }, c.prototype.init = function() {
             var t = this.$module;
             if (t) {
                 var e = t.querySelector(".govuk-js-header-toggle");
                 e && e.addEventListener("click", this.handleClick.bind(this))
             }
-        }, l.prototype.toggleClass = function(t, e) {
+        }, c.prototype.toggleClass = function(t, e) {
             0 < t.className.indexOf(e) ? t.className = t.className.replace(" " + e, "") : t.className += " " + e
-        }, l.prototype.handleClick = function(t) {
+        }, c.prototype.handleClick = function(t) {
             var e = this.$module,
                 n = t.target || t.srcElement,
                 o = e.querySelector("#" + n.getAttribute("aria-controls"));
             n && o && (this.toggleClass(o, "govuk-header__navigation--open"), this.toggleClass(n, "govuk-header__menu-button--open"), n.setAttribute("aria-expanded", "true" !== n.getAttribute("aria-expanded")), o.setAttribute("aria-hidden", "false" === o.getAttribute("aria-hidden")))
         }, u.prototype.init = function() {
             var n = this.$module;
-            r(n.querySelectorAll('input[type="radio"]'), function(t) {
+            r(this.$inputs, function(t) {
                 var e = t.getAttribute("data-aria-controls");
-                e && n.querySelector("#" + e) && (t.setAttribute("aria-controls", e), t.removeAttribute("data-aria-controls"), this.setAttributes(t))
-            }.bind(this)), n.addEventListener("click", this.handleClick.bind(this))
-        }, u.prototype.setAttributes = function(t) {
+                e && n.querySelector("#" + e) && (t.setAttribute("aria-controls", e), t.removeAttribute("data-aria-controls"))
+            }), "onpageshow" in window ? window.addEventListener("pageshow", this.syncAllConditionalReveals.bind(this)) : window.addEventListener("DOMContentLoaded", this.syncAllConditionalReveals.bind(this)), this.syncAllConditionalReveals(), n.addEventListener("click", this.handleClick.bind(this))
+        }, u.prototype.syncAllConditionalReveals = function() {
+            r(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
+        }, u.prototype.syncConditionalRevealWithInputState = function(t) {
             var e = document.querySelector("#" + t.getAttribute("aria-controls"));
             if (e && e.classList.contains("govuk-radios__conditional")) {
                 var n = t.checked;
@@ -639,7 +646,7 @@
             var n = t.target;
             "radio" === n.type && r(document.querySelectorAll('input[type="radio"][aria-controls]'), function(t) {
                 var e = t.form === n.form;
-                t.name === n.name && e && this.setAttributes(t)
+                t.name === n.name && e && this.syncConditionalRevealWithInputState(t)
             }.bind(this))
         },
         function(t) {
@@ -756,7 +763,7 @@
         }, d.prototype.getHref = function(t) {
             var e = t.getAttribute("href");
             return e.slice(e.indexOf("#"), e.length)
-        }, t.initAll = function p(t) {
+        }, t.initAll = function h(t) {
             var e = "undefined" != typeof(t = void 0 !== t ? t : {}).scope ? t.scope : document;
             r(e.querySelectorAll('[data-module="govuk-button"]'), function(t) {
                 new o(t).init()
@@ -768,10 +775,10 @@
                 new s(t).init()
             }), r(e.querySelectorAll('[data-module="govuk-checkboxes"]'), function(t) {
                 new a(t).init()
-            }), new c(e.querySelector('[data-module="govuk-error-summary"]')).init(), new l(e.querySelector('[data-module="govuk-header"]')).init(), r(e.querySelectorAll('[data-module="govuk-radios"]'), function(t) {
+            }), new l(e.querySelector('[data-module="govuk-error-summary"]')).init(), new c(e.querySelector('[data-module="govuk-header"]')).init(), r(e.querySelectorAll('[data-module="govuk-radios"]'), function(t) {
                 new u(t).init()
             }), r(e.querySelectorAll('[data-module="govuk-tabs"]'), function(t) {
                 new d(t).init()
             })
-        }, t.Accordion = n, t.Button = o, t.Details = i, t.CharacterCount = s, t.Checkboxes = a, t.ErrorSummary = c, t.Header = l, t.Radios = u, t.Tabs = d
+        }, t.Accordion = n, t.Button = o, t.Details = i, t.CharacterCount = s, t.Checkboxes = a, t.ErrorSummary = l, t.Header = c, t.Radios = u, t.Tabs = d
 });
\ No newline at end of file
diff --git a/dist/govuk-frontend-ie8-3.7.0.min.css b/dist/govuk-frontend-ie8-3.8.0.min.css
similarity index 37%
rename from dist/govuk-frontend-ie8-3.7.0.min.css
rename to dist/govuk-frontend-ie8-3.8.0.min.css
index 0ec0732e..c995a088 100644
--- a/dist/govuk-frontend-ie8-3.7.0.min.css
+++ b/dist/govuk-frontend-ie8-3.8.0.min.css
@@ -31,7 +31,7 @@
 .govuk-link--muted:hover,
 .govuk-link--muted:link,
 .govuk-link--muted:visited {
-    color: #626a6e
+    color: #505a5f
 }
 
 .govuk-link--muted:focus,
@@ -192,7 +192,7 @@
     font-size: 1.6875rem;
     line-height: 1.11111;
     margin-bottom: 5px;
-    color: #626a6e
+    color: #505a5f
 }
 
 .govuk-caption-l {
@@ -212,7 +212,7 @@
     font-weight: 400;
     line-height: 1.25;
     display: block;
-    color: #626a6e
+    color: #505a5f
 }
 
 .govuk-caption-m {
@@ -752,7 +752,7 @@
     width: auto;
     height: auto;
     border: 0;
-    color: #626a6e;
+    color: #505a5f;
     font-family: Arial, sans-serif
 }
 
@@ -819,7 +819,7 @@
     width: auto;
     height: auto;
     border: 0;
-    color: #626a6e;
+    color: #505a5f;
     font-family: Arial, sans-serif
 }
 
@@ -1160,7 +1160,7 @@
     line-height: 1.31579;
     display: block;
     margin-bottom: 15px;
-    color: #626a6e
+    color: #505a5f
 }
 
     {
@@ -1307,11 +1307,12 @@
 
 .govuk-checkboxes__label:after {
     content: "";
+    box-sizing: border-box;
     position: absolute;
     top: 11px;
     left: 9px;
-    width: 18px;
-    height: 7px;
+    width: 23px;
+    height: 12px;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
@@ -1394,8 +1395,8 @@
 .govuk-checkboxes--small .govuk-checkboxes__label:after {
     top: 15px;
     left: 6px;
-    width: 9px;
-    height: 3.5px;
+    width: 12px;
+    height: 6.5px;
     border-width: 0 0 3px 3px
 }
 
@@ -1448,12 +1449,11 @@
 }
 
 .govuk-textarea--error {
-    border: 4px solid #d4351c
+    border: 2px solid #d4351c
 }
 
 .govuk-textarea--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
+    border-color: #0b0c0c
 }
 
 .govuk-character-count {
@@ -1620,12 +1620,11 @@
 }
 
 .govuk-input--error {
-    border: 4px solid #d4351c
+    border: 2px solid #d4351c
 }
 
 .govuk-input--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
+    border-color: #0b0c0c
 }
 
 .govuk-input--width-30 {
@@ -1874,24 +1873,6 @@
     box-shadow: inset 0 0 0 4px #0b0c0c
 }
 
-.govuk-file-upload--error {
-    margin-right: -5px;
-    margin-left: -5px;
-    padding-right: 5px;
-    padding-left: 5px;
-    border: 4px solid #d4351c
-}
-
-.govuk-file-upload--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
-}
-
-.govuk-file-upload--error:focus-within {
-    border-color: #0b0c0c;
-    box-shadow: none
-}
-
 .govuk-footer {
     font-family: GDS Transport, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -2037,19 +2018,16 @@
     padding: 0;
     list-style: none;
     -webkit-column-gap: 30px;
-    -moz-column-gap: 30px;
     column-gap: 30px
 }
 
 .govuk-footer__list--columns-2 {
     -webkit-column-count: 2;
-    -moz-column-count: 2;
     column-count: 2
 }
 
 .govuk-footer__list--columns-3 {
     -webkit-column-count: 3;
-    -moz-column-count: 3;
     column-count: 3
 }
 
@@ -2441,12 +2419,12 @@
 }
 
 .govuk-tag--inactive {
-    background-color: #626a6e
+    background-color: #505a5f
 }
 
 .govuk-tag--grey {
-    color: #454a4d;
-    background: #eff0f1
+    color: #383f43;
+    background: #eeefef
 }
 
 .govuk-tag--purple {
@@ -2917,12 +2895,11 @@
 }
 
 .govuk-select--error {
-    border: 4px solid #d4351c
+    border: 2px solid #d4351c
 }
 
 .govuk-select--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
+    border-color: #0b0c0c
 }
 
 .govuk-skip-link {
@@ -2978,6 +2955,7 @@
 
 .govuk-skip-link:focus {
     outline: 3px solid #fd0;
+    outline-offset: 0;
     background-color: #fd0
 }
 
@@ -3065,11 +3043,12 @@
 }
 
 .govuk-warning-text__icon {
+    box-sizing: border-box;
     display: inline-block;
     position: absolute;
     left: 0;
-    min-width: 29px;
-    min-height: 29px;
+    min-width: 35px;
+    min-height: 35px;
     margin-top: -5px;
     border: 3px solid #0b0c0c;
     border-radius: 50%;