Release v4.1.0 (Feature release)

[domoscargin]

New features

Import GOV.UK Frontend JavaScript as ECMAScript (ES) modules

You can now import our component JavaScript into your service as ES modules, if you're using a bundler.

This change allows you to import only the JavaScript you need, and helps reduce duplication of polyfills.

Because we're shipping ES modules in addition to how we currently publish our component JavaScript, this change is backwards compatible. You will not be required to make any changes unless you want to.

If you want to import using ES modules, we recommend you only use import to import the JavaScript for components you're using in your service. For example:

import { SkipLink, Radios } from 'govuk-frontend'

var $skipLink = document.querySelector('[data-module="govuk-skip-link"]')
if ($skipLink) {
  new SkipLink($skipLink).init()
}

var $radios = document.querySelectorAll('[data-module="govuk-radios]')
if ($radios) {
  for (var i = 0; i < $radios.length; i++) {
    new Radios($radios[i]).init()
  }
}

If you need to import all of GOV.UK Frontend's components, then use the initAll function to initialise them:

import { initAll } from 'govuk-frontend'
initAll()

Depending on the bundler you use, you may also need to make changes to your JavaScript bundler configuration file. You can read more in our installation instructions about importing JavaScript using a bundler.

This was added in pull request #2586: Publish our JavaScript as ES modules alongside Universal Module Definition (UMD).

Recommended changes

We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

Remove aria-live from the character count component

If you're not using the Nunjucks macros, remove the aria-live attribute from the character count message element. This element's content no longer updates, as we've moved the live counter functionality to a new element injected by JavaScript.

This change was introduced in pull request #2577: Refactor character count to inject new element.

Remove pattern from the date input component

If you're not using the Nunjucks macros, remove pattern="[0-9]*" from each of the date input's elements.

We originally added the pattern attribute to make numeric keypad functionality the default functionality in Safari on iOS. However, we no longer need to use it, as the inputmode attribute provides this functionality for newer Safari versions.

This change was introduced in pull request #2599: Remove pattern attribute from date input component.

Fixes

We've made the following fixes in pull request #2577: Refactor character count to inject new element:

• fix character count message being repeated twice by screen readers
• fix character count hint text being announced as part of the count message
• fix multiple outdated character count messages being announced at once
• fix character count message being announced when input length is below a defined threshold

We’ve also made fixes in the following pull requests:

• #2549: Fix header with product name focus and hover state length
• #2573: Better handle cases where $govuk-text-colour is set to a non-colour value
• #2590: Remove maxlength attribute from textarea after character count JavaScript has been initialised
• #2615: Fix hints for disabled checkboxes or radios appearing darker than the associated labels

[github-actions]

Changes to dist

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index d7b983ec..5dbaad6d 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-4.0.1
+4.1.0
diff --git a/dist/govuk-frontend-4.0.1.min.css b/dist/govuk-frontend-4.1.0.min.css
similarity index 13%
rename from dist/govuk-frontend-4.0.1.min.css
rename to dist/govuk-frontend-4.1.0.min.css
index adf7c076..2cc59b2b 100644
--- a/dist/govuk-frontend-4.0.1.min.css
+++ b/dist/govuk-frontend-4.1.0.min.css
@@ -776,17 +776,10 @@
 
 .govuk-button-group {
     margin-bottom: 5px;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center
 }
@@ -840,16 +833,10 @@
 @media (min-width:40.0625em) {
     .govuk-button-group {
         margin-right: -15px;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
-        -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
-        -webkit-box-align: baseline;
-        -webkit-align-items: baseline;
         -ms-flex-align: baseline;
         align-items: baseline
     }
@@ -1084,7 +1071,7 @@
 .govuk-template {
     background-color: #f3f2f1;
     -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
     text-size-adjust: 100%
 }
 
@@ -1762,8 +1749,6 @@
     }
 
     .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list {
-        display: -webkit-box;
-        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex
     }
@@ -1938,13 +1923,9 @@
     font-size: 18px;
     font-size: 1.125rem;
     line-height: 1;
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
     min-height: auto;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -1967,10 +1948,8 @@
 .govuk-button__start-icon {
     margin-left: 5px;
     vertical-align: middle;
-    -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    -webkit-align-self: center;
     -ms-flex-item-align: center;
     align-self: center;
     forced-color-adjust: auto
@@ -2544,7 +2523,8 @@ screen and (forced-colors:active) {
     cursor: default
 }
 
-.govuk-checkboxes__input:disabled+.govuk-checkboxes__label {
+.govuk-checkboxes__input:disabled+.govuk-checkboxes__label,
+.govuk-checkboxes__input:disabled~.govuk-hint {
     opacity: .5
 }
 
@@ -2999,7 +2979,6 @@ screen and (forced-colors:active) {
     border: 2px solid #0b0c0c;
     border-radius: 0;
     -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none
 }
 
@@ -3077,15 +3056,11 @@ screen and (forced-colors:active) {
 }
 
 .govuk-input__wrapper {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex
 }
 
 .govuk-input__wrapper .govuk-input {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto
 }
@@ -3125,8 +3100,6 @@ screen and (forced-colors:active) {
     text-align: center;
     white-space: nowrap;
     cursor: default;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto
 }
@@ -3651,21 +3624,14 @@ screen and (forced-colors:active) {
 }
 
 .govuk-footer__meta {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -15px;
     margin-left: -15px;
-    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: end;
-    -webkit-align-items: flex-end;
     -ms-flex-align: end;
     align-items: flex-end;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -3677,15 +3643,12 @@ screen and (forced-colors:active) {
 }
 
 .govuk-footer__meta-item--grow {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1
 }
 
 @media (max-width:40.0525em) {
     .govuk-footer__meta-item--grow {
-        -webkit-flex-basis: 320px;
         -ms-flex-preferred-size: 320px;
         flex-basis: 320px
     }
@@ -3887,7 +3850,7 @@ only screen and (min-resolution:192dpi) {
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top
 }
 
@@ -3984,6 +3947,16 @@ only screen and (min-resolution:192dpi) {
     }
 }
 
+@media (min-width:40.0625em) {
+    .govuk-header__link--homepage {
+        display: inline
+    }
+
+    .govuk-header__link--homepage:focus {
+        box-shadow: 0 0 #fd0
+    }
+}
+
 .govuk-header__link--homepage:link,
 .govuk-header__link--homepage:visited {
     text-decoration: none
@@ -4593,7 +4566,7 @@ only screen and (min-resolution:192dpi) {
 
 @media print {
     .govuk-panel--confirmation {
-        border-color: currentColor;
+        border-color: currentcolor;
         color: #000;
         background: none
     }
@@ -5156,7 +5129,7 @@ only screen and (min-resolution:192dpi) {
     border: 10px solid;
     border-radius: 50%;
     opacity: 0;
-    background: currentColor
+    background: currentcolor
 }
 
 .govuk-radios__hint {
@@ -5188,7 +5161,8 @@ screen and (forced-colors:active) {
     cursor: default
 }
 
-.govuk-radios__input:disabled+.govuk-radios__label {
+.govuk-radios__input:disabled+.govuk-radios__label,
+.govuk-radios__input:disabled~.govuk-hint {
     opacity: .5
 }
 
diff --git a/dist/govuk-frontend-4.0.1.min.js b/dist/govuk-frontend-4.1.0.min.js
similarity index 83%
rename from dist/govuk-frontend-4.0.1.min.js
rename to dist/govuk-frontend-4.1.0.min.js
index 2b1c6e23..dcc81064 100644
--- a/dist/govuk-frontend-4.0.1.min.js
+++ b/dist/govuk-frontend-4.1.0.min.js
@@ -73,8 +73,8 @@
                         f = Math.max,
                         m = this;
                     if (!n(m)) throw new TypeError("Function.prototype.bind called on incompatible " + m);
-                    for (var b, v = d.call(arguments, 1), y = f(0, m.length - v.length), g = [], w = 0; w < y; w++) p.call(g, "$" + w);
-                    return b = Function("binder", "return function (" + g.join(",") + "){ return binder.apply(this, arguments); }")(function() {
+                    for (var b, v = d.call(arguments, 1), g = f(0, m.length - v.length), y = [], w = 0; w < g; w++) p.call(y, "$" + w);
+                    return b = Function("binder", "return function (" + y.join(",") + "){ return binder.apply(this, arguments); }")(function() {
                         if (this instanceof b) {
                             var t = m.apply(this, h.call(v, d.call(arguments)));
                             return o(t) === t ? t : this
@@ -283,9 +283,9 @@
                     m = document.createElement("span");
                 m.classList.add(this.sectionSummaryFocusClass), f.appendChild(m);
                 for (var b = 0, v = i.attributes.length; b < v; ++b) {
-                    var y = i.attributes.item(b).nodeName,
-                        g = i.attributes.item(b).nodeValue;
-                    f.setAttribute(y, g)
+                    var g = i.attributes.item(b).nodeName,
+                        y = i.attributes.item(b).nodeValue;
+                    f.setAttribute(g, y)
                 }
                 m.innerHTML = i.innerHTML, i.parentNode.replaceChild(f, i), s.appendChild(f), s.appendChild(this.getButtonPunctuationEl())
             }
@@ -476,7 +476,7 @@
     }
 
     function r(t) {
-        this.$module = t, this.$textarea = t.querySelector(".govuk-js-character-count"), this.$textarea && (this.$countMessage = document.getElementById(this.$textarea.id + "-info"))
+        this.$module = t, this.$textarea = t.querySelector(".govuk-js-character-count"), this.$visibleCountMessage = null, this.$screenReaderCountMessage = null, this.lastInputTimestamp = null
     }
 
     function a(t) {
@@ -543,16 +543,18 @@
             characterCountAttribute: "data-maxlength",
             wordCountAttribute: "data-maxwords"
         }, r.prototype.init = function() {
-            var t = this.$module,
-                e = this.$textarea,
-                n = this.$countMessage;
-            if (e && n) {
-                e.insertAdjacentElement("afterend", n), this.options = this.getDataset(t);
-                var o = this.defaults.characterCountAttribute;
-                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())
+            if (this.$textarea) {
+                var t = this.$module,
+                    e = this.$textarea,
+                    n = document.getElementById(e.id + "-info");
+                e.insertAdjacentElement("afterend", n);
+                var o = document.createElement("div");
+                o.className = "govuk-character-count__sr-status govuk-visually-hidden", o.setAttribute("aria-live", "polite"), this.$screenReaderCountMessage = o, n.insertAdjacentElement("afterend", o);
+                var i = document.createElement("div");
+                i.className = n.className, i.classList.add("govuk-character-count__status"), i.setAttribute("aria-hidden", "true"), this.$visibleCountMessage = i, n.insertAdjacentElement("afterend", i), n.classList.add("govuk-visually-hidden"), this.options = this.getDataset(t);
+                var s = this.defaults.characterCountAttribute;
+                this.options.maxwords && (s = this.defaults.wordCountAttribute), this.maxLength = t.getAttribute(s), this.maxLength && (e.removeAttribute("maxlength"), this.bindChangeEvents(), "onpageshow" in window ? window.addEventListener("pageshow", this.updateCountMessage.bind(this)) : window.addEventListener("DOMContentLoaded", this.updateCountMessage.bind(this)), this.updateCountMessage())
             }
-        }, r.prototype.sync = function() {
-            this.bindChangeEvents(), this.updateCountMessage()
         }, r.prototype.getDataset = function(t) {
             var e = {},
                 n = t.attributes;
@@ -569,21 +571,36 @@
             return e
         }, r.prototype.bindChangeEvents = function() {
             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))
+            t.addEventListener("keyup", this.handleKeyUp.bind(this)), t.addEventListener("focus", this.handleFocus.bind(this)), t.addEventListener("blur", this.handleBlur.bind(this))
         }, r.prototype.checkIfValueChanged = function() {
             this.$textarea.oldValue || (this.$textarea.oldValue = ""), this.$textarea.value !== this.$textarea.oldValue && (this.$textarea.oldValue = this.$textarea.value, this.updateCountMessage())
         }, r.prototype.updateCountMessage = function() {
+            this.updateVisibleCountMessage(), this.updateScreenReaderCountMessage()
+        }, r.prototype.updateVisibleCountMessage = function() {
+            var t = this.$textarea,
+                e = this.$visibleCountMessage,
+                n = this.maxLength - this.count(t.value);
+            this.isOverThreshold() ? e.classList.remove("govuk-character-count__message--disabled") : e.classList.add("govuk-character-count__message--disabled"), n < 0 ? (t.classList.add("govuk-textarea--error"), e.classList.remove("govuk-hint"), e.classList.add("govuk-error-message")) : (t.classList.remove("govuk-textarea--error"), e.classList.remove("govuk-error-message"), e.classList.add("govuk-hint")), e.innerHTML = this.formattedUpdateMessage()
+        }, r.prototype.updateScreenReaderCountMessage = function() {
+            var t = this.$screenReaderCountMessage;
+            this.isOverThreshold() ? t.removeAttribute("aria-hidden") : t.setAttribute("aria-hidden", !0), t.innerHTML = this.formattedUpdateMessage()
+        }, r.prototype.formattedUpdateMessage = function() {
+            var t, e = this.$textarea,
+                n = this.options,
+                o = this.maxLength - this.count(e.value),
+                i = "character";
+            return n.maxwords && (i = "word"), i += -1 == o || 1 == o ? "" : "s", t = o < 0 ? "too many" : "remaining", "You have " + Math.abs(o) + " " + i + " " + t
+        }, r.prototype.isOverThreshold = function() {
             var t = this.$textarea,
                 e = this.options,
-                n = this.$countMessage,
-                o = this.count(t.value),
-                i = this.maxLength,
-                s = 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")), s < 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 r, a, l = "character";
-            e.maxwords && (l = "word"), l += -1 == s || 1 == s ? "" : "s", r = s < 0 ? "too many" : "remaining", a = Math.abs(s), n.innerHTML = "You have " + a + " " + l + " " + r
+                n = this.count(t.value);
+            return this.maxLength * (e.threshold ? e.threshold : 0) / 100 <= n
+        }, r.prototype.handleKeyUp = function() {
+            this.updateVisibleCountMessage(), this.lastInputTimestamp = Date.now()
         }, r.prototype.handleFocus = function() {
-            this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1e3)
+            this.valueChecker = setInterval(function() {
+                (!this.lastInputTimestamp || Date.now() - 500 >= this.lastInputTimestamp) && this.checkIfValueChanged()
+            }.bind(this), 1e3)
         }, r.prototype.handleBlur = function() {
             clearInterval(this.valueChecker)
         }, a.prototype.init = function() {
diff --git a/dist/govuk-frontend-ie8-4.0.1.min.css b/dist/govuk-frontend-ie8-4.1.0.min.css
similarity index 12%
rename from dist/govuk-frontend-ie8-4.0.1.min.css
rename to dist/govuk-frontend-ie8-4.1.0.min.css
index 20f85aaf..dc094070 100644
--- a/dist/govuk-frontend-ie8-4.0.1.min.css
+++ b/dist/govuk-frontend-ie8-4.1.0.min.css
@@ -347,28 +347,17 @@
 
 .govuk-button-group {
     margin-bottom: 15px;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     margin-right: -15px;
-    -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
-    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: baseline;
-    -webkit-align-items: baseline;
     -ms-flex-align: baseline;
     align-items: baseline
 }
@@ -542,7 +531,7 @@
 .govuk-template {
     background-color: #f3f2f1;
     -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
     text-size-adjust: 100%;
     overflow-y: scroll
 }
@@ -1158,13 +1147,9 @@
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1;
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
     min-height: auto;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -1172,10 +1157,8 @@
 .govuk-button__start-icon {
     margin-left: 10px;
     vertical-align: middle;
-    -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    -webkit-align-self: center;
     -ms-flex-item-align: center;
     align-self: center;
     forced-color-adjust: auto
@@ -1464,7 +1447,8 @@
     cursor: default
 }
 
-.govuk-checkboxes__input:disabled+.govuk-checkboxes__label {
+.govuk-checkboxes__input:disabled+.govuk-checkboxes__label,
+.govuk-checkboxes__input:disabled~.govuk-hint {
     filter: alpha(opacity=50)
 }
 
@@ -1776,7 +1760,6 @@
     border: 2px solid #0b0c0c;
     border-radius: 0;
     -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none
 }
 
@@ -1834,15 +1817,11 @@
 }
 
 .govuk-input__wrapper {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex
 }
 
 .govuk-input__wrapper .govuk-input {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto
 }
@@ -1875,8 +1854,6 @@
     text-align: center;
     white-space: nowrap;
     cursor: default;
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto
 }
@@ -2167,21 +2144,14 @@
 }
 
 .govuk-footer__meta {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -15px;
     margin-left: -15px;
-    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: end;
-    -webkit-align-items: flex-end;
     -ms-flex-align: end;
     align-items: flex-end;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -2193,8 +2163,6 @@
 }
 
 .govuk-footer__meta-item--grow {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1
 }
@@ -2342,7 +2310,7 @@
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top
 }
 
@@ -2405,7 +2373,12 @@
     display: inline-block;
     margin-right: 10px;
     font-size: 30px;
-    line-height: 1
+    line-height: 1;
+    display: inline
+}
+
+.govuk-header__link--homepage:focus {
+    box-shadow: 0 0 #fd0
 }
 
 .govuk-header__link--homepage:link,
@@ -3127,7 +3100,7 @@
     border: 10px solid;
     border-radius: 50%;
     filter: alpha(opacity=0);
-    background: currentColor
+    background: currentcolor
 }
 
 .govuk-radios__hint {
@@ -3152,7 +3125,8 @@
     cursor: default
 }
 
-.govuk-radios__input:disabled+.govuk-radios__label {
+.govuk-radios__input:disabled+.govuk-radios__label,
+.govuk-radios__input:disabled~.govuk-hint {
     filter: alpha(opacity=50)
 }
 

[owenatgov]

🚀