Release v4.0.1

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.0.1 (Fix release)
+
 ### Recommended changes
 
 We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

dist/VERSION.txt

@@ -1 +1 @@
-4.0.0
+4.0.1

package/govuk/all.js

@@ -1986,11 +1986,32 @@ ErrorSummary.prototype.init = function () {
   if (!$module) {
     return
   }
-  $module.focus();
 
+  this.setFocus();
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
+/**
+ * Focus the error summary
+ */
+ErrorSummary.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element programmatically focusable, but
+  // remove it on blur as the error summary doesn't need to be focused again.
+  $module.setAttribute('tabindex', '-1');
+
+  $module.addEventListener('blur', function () {
+    $module.removeAttribute('tabindex');
+  });
+
+  $module.focus();
+};
+
 /**
 * Click event handler
 *

package/govuk/components/accordion/_index.scss

@@ -22,17 +22,14 @@
   }
 
   .govuk-accordion__section-button {
+    @include govuk-font($size: 24, $weight: bold);
     @include govuk-text-colour;
 
     display: block;
     margin-bottom: 0;
     padding-top: govuk-spacing(3);
   }
 
-  .govuk-accordion__section-heading-text {
-    @include govuk-font($size: 24, $weight: bold);
-  }
-
   // Remove the bottom margin from the last item inside the content
   .govuk-accordion__section-content > :last-child {
     margin-bottom: 0;
@@ -305,7 +302,8 @@
 
     // Add toggle link with Chevron icon on left.
     .govuk-accordion__section-toggle {
-      @include govuk-font($size: 19);
+      @include govuk-typography-responsive($size: 19);
+      @include govuk-typography-weight-regular;
       color: $govuk-link-colour;
     }
 

package/govuk/components/accordion/macro-options.json

@@ -69,7 +69,7 @@
                 "name": "expanded",
                 "type": "boolean",
                 "required": false,
-                "description": "Whether the section should be expanded upon initial load or not. Defaults to `false`."
+                "description": "Sets whether the section should be expanded when the page loads for the first time. Defaults to `false`."
             }
         ]
     }

package/govuk/components/error-summary/error-summary.js

@@ -715,11 +715,32 @@ ErrorSummary.prototype.init = function () {
   if (!$module) {
     return
   }
-  $module.focus();
 
+  this.setFocus();
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
+/**
+ * Focus the error summary
+ */
+ErrorSummary.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element programmatically focusable, but
+  // remove it on blur as the error summary doesn't need to be focused again.
+  $module.setAttribute('tabindex', '-1');
+
+  $module.addEventListener('blur', function () {
+    $module.removeAttribute('tabindex');
+  });
+
+  $module.focus();
+};
+
 /**
 * Click event handler
 *

package/govuk/components/error-summary/macro-options.json

@@ -55,6 +55,12 @@
             }
         ]
     },
+    {
+        "name": "disableAutoFocus",
+        "type": "boolean",
+        "required": false,
+        "description": "Prevent moving focus to the error summary when the page loads."
+    },
     {
         "name": "classes",
         "type": "string",

package/govuk/components/error-summary/template.njk

@@ -1,5 +1,6 @@
 <div class="govuk-error-summary
-  {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
+  {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert"
+  {%- if params.disableAutoFocus %} data-disable-auto-focus="true"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-error-summary">
   <h2 class="govuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}

package/govuk/components/input/template.njk

@@ -38,9 +38,9 @@
   }) | indent(2) | trim }}
 {% endif %}
 
-{%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
+  {%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
 
-  {%- if params.prefix.text or params.prefix.html %}
+  {%- if params.prefix.text or params.prefix.html -%}
     <div class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
     </div>
@@ -55,11 +55,12 @@
   {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 
-  {%- if params.suffix.text or params.suffix.html %}
+  {%- if params.suffix.text or params.suffix.html -%}
     <div class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
       {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
     </div>
   {% endif -%}
 
 {%- if params.prefix or params.suffix %}</div>{% endif %}
+
 </div>

package/govuk/components/radios/_index.scss

@@ -167,14 +167,6 @@
         clear: none;
       }
     }
-
-    // Prevent inline modifier being used with conditional reveals
-    &.govuk-radios--conditional {
-      .govuk-radios__item {
-        margin-right: 0;
-        float: none;
-      }
-    }
   }
 
   // =========================================================

package/govuk/components/radios/fixtures.json

@@ -359,44 +359,6 @@
             "html": "<div class=\"govuk-form-group\">\n\n  <fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    How do you want to be contacted?\n  \n  </legend>\n  \n\n  <div class=\"govuk-radios\"\n    data-module=\"govuk-radios\">\n    \n      \n          \n        \n        \n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]\">\n        Email\n      </label>\n          \n        </div>\n        \n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n            <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n          </div>\n        \n        \n      \n    \n      \n        \n        \n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-2\">\n        Phone\n      </label>\n          \n        </div>\n        \n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n            <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n          </div>\n        \n        \n      \n    \n      \n        \n        \n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-3\">\n        Text message\n      </label>\n          \n        </div>\n        \n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n            <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n          </div>\n        \n        \n      \n    \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
             "hidden": false
         },
-        {
-            "name": "inline with conditional items",
-            "options": {
-                "classes": "govuk-radios--inline",
-                "idPrefix": "how-contacted",
-                "name": "how-contacted",
-                "fieldset": {
-                    "legend": {
-                        "text": "How do you want to be contacted?"
-                    }
-                },
-                "items": [
-                    {
-                        "value": "email",
-                        "text": "Email",
-                        "conditional": {
-                            "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
-                        }
-                    },
-                    {
-                        "value": "phone",
-                        "text": "Phone",
-                        "conditional": {
-                            "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
-                        }
-                    },
-                    {
-                        "value": "text",
-                        "text": "Text message",
-                        "conditional": {
-                            "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
-                        }
-                    }
-                ]
-            },
-            "html": "<div class=\"govuk-form-group\">\n\n  <fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    How do you want to be contacted?\n  \n  </legend>\n  \n\n  <div class=\"govuk-radios govuk-radios--inline\"\n    data-module=\"govuk-radios\">\n    \n      \n          \n        \n        \n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n        Email\n      </label>\n          \n        </div>\n        \n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n            <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n          </div>\n        \n        \n      \n    \n      \n        \n        \n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n        Phone\n      </label>\n          \n        </div>\n        \n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n            <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n          </div>\n        \n        \n      \n    \n      \n        \n        \n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n        Text message\n      </label>\n          \n        </div>\n        \n          <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n            <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n          </div>\n        \n        \n      \n    \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
-            "hidden": false
-        },
         {
             "name": "with conditional item checked",
             "options": {

package/govuk/components/radios/template.njk

@@ -36,7 +36,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}{%- if isConditional %} govuk-radios--conditional{% endif -%}"
+  <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     data-module="govuk-radios">
     {% for item in params.items %}

package/govuk/components/select/_index.scss

@@ -15,6 +15,11 @@
     padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (#2435)
+    color: $govuk-text-colour;
+    background-color: govuk-colour("white");
+
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element

package/govuk/components/summary-list/_index.scss

@@ -25,9 +25,14 @@
 
   // Provide an empty 'cell' for rows that don't have actions – otherwise the
   // bottom border is not drawn for that part of the row in some browsers.
-  .govuk-summary-list__row--no-actions:after {
-    content: "";
-    display: table-cell;
+  .govuk-summary-list__row--no-actions {
+    @include govuk-media-query($from: tablet) {
+      &:after {
+        content: "";
+        display: table-cell;
+        width: 20%;
+      }
+    }
   }
 
   .govuk-summary-list__key,