govuk_publishing_components 21.60.0 → 21.62.0

data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json

@@ -45,7 +45,7 @@
                 "name": "autocomplete",
                 "type": "string",
                 "required": false,
-                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"postal-code\" or \"username\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
+                "description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"bday-day\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
             },
             {
                 "name": "pattern",

data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss

@@ -47,31 +47,4 @@
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
   }
-
-  .govuk-file-upload--error {
-    // As `upload--error` has border, it needs to have the same padding as
-    // the standard focused element.
-    margin-right: -$component-padding;
-    margin-left: -$component-padding;
-    padding-right: $component-padding;
-    padding-left: $component-padding;
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
-
-    &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
-      // already has the thicker border.
-      box-shadow: none;
-    }
-
-    // Repeat `:focus` styles to prevent error styles from being applied when
-    // input button is pressed as this moves the focus to "within".
-    // This can't be set together with `:focus` as all versions of IE fail
-    // to recognise `focus-within` and don't set any styles from the block
-    // when it's a selector.
-    &:focus-within {
-      border-color: $govuk-input-border-colour;
-      box-shadow: none;
-    }
-  }
 }

data/node_modules/govuk-frontend/govuk/components/footer/_index.scss

@@ -210,20 +210,17 @@
     padding: 0;
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
-       -moz-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
   }
 
   @include govuk-media-query ($from: desktop) {
     .govuk-footer__list--columns-2 {
       -webkit-column-count: 2;
-         -moz-column-count: 2;
               column-count: 2; // Support: Columns
     }
 
     .govuk-footer__list--columns-3 {
       -webkit-column-count: 3;
-         -moz-column-count: 3;
               column-count: 3; // Support: Columns
     }
   }

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

@@ -58,7 +58,7 @@
           focusable="false"
           class="govuk-footer__licence-logo"
           xmlns="http://www.w3.org/2000/svg"
-          viewbox="0 0 483.2 195.7"
+          viewBox="0 0 483.2 195.7"
           height="17"
           width="41"
         >

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

@@ -21,7 +21,7 @@
             focusable="false"
             class="govuk-header__logotype-crown"
             xmlns="http://www.w3.org/2000/svg"
-            viewbox="0 0 132 97"
+            viewBox="0 0 132 97"
             height="30"
             width="36"
           >

data/node_modules/govuk-frontend/govuk/components/hint/_index.scss

@@ -16,7 +16,7 @@
   // is unlikely that the default or govuk-label--s class would be used in this
   // case.
 
-  // This adjustment will not work in browsers that do not support :not(). 
+  // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
@@ -30,7 +30,7 @@
   // it is unlikely that the default or govuk-fieldset__legend--s class would be
   // used in this case.
 
-  // This adjustment will not work in browsers that do not support :not(). 
+  // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
   .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {

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

@@ -1,4 +1,4 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
-</span>
+</div>

data/node_modules/govuk-frontend/govuk/components/input/_index.scss

@@ -58,9 +58,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `input--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
   }
 

data/node_modules/govuk-frontend/govuk/components/input/macro-options.json

@@ -88,6 +88,12 @@
         "required": false,
         "description": "Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value."
     },
+    {
+        "name": "spellcheck",
+        "type": "boolean",
+        "required": false,
+        "description": "Optional field to enable or disable the spellcheck attribute on the input."
+    },
     {
         "name": "attributes",
         "type": "object",

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

@@ -38,6 +38,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}

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

@@ -1030,67 +1030,115 @@ function nodeListForEach (nodes, callback) {
 
 function Radios ($module) {
   this.$module = $module;
+  this.$inputs = $module.querySelectorAll('input[type="radio"]');
 }
 
+/**
+ * Initialise Radios
+ *
+ * Radios can be associated with a 'conditionally revealed' content block – for
+ * example, a radio for 'Phone' could reveal an additional form field for the
+ * user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the radio state.
+ */
 Radios.prototype.init = function () {
   var $module = this.$module;
-  var $inputs = $module.querySelectorAll('input[type="radio"]');
+  var $inputs = this.$inputs;
 
-  /**
-  * Loop over all items with [data-controls]
-  * Check if they have a matching conditional reveal
-  * If they do, assign attributes.
-  **/
   nodeListForEach($inputs, function ($input) {
-    var controls = $input.getAttribute('data-aria-controls');
+    var target = $input.getAttribute('data-aria-controls');
 
-    // Check if input controls anything
-    // Check if content exists, before setting attributes.
-    if (!controls || !$module.querySelector('#' + controls)) {
+    // Skip radios without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !$module.querySelector('#' + target)) {
       return
     }
 
-    // If we have content that is controlled, set attributes.
-    $input.setAttribute('aria-controls', controls);
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target);
     $input.removeAttribute('data-aria-controls');
-    this.setAttributes($input);
-  }.bind(this));
+  });
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals();
 
   // Handle events
   $module.addEventListener('click', this.handleClick.bind(this));
 };
 
-Radios.prototype.setAttributes = function ($input) {
-  var $content = document.querySelector('#' + $input.getAttribute('aria-controls'));
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Radios.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
+};
 
-  if ($content && $content.classList.contains('govuk-radios__conditional')) {
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Radio input
+ */
+Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
+
+  if ($target && $target.classList.contains('govuk-radios__conditional')) {
     var inputIsChecked = $input.checked;
 
     $input.setAttribute('aria-expanded', inputIsChecked);
-
-    $content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
+    $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
   }
 };
 
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a radio, sync
+ * the state of the conditional reveal for all radio buttons in the same form
+ * with the same name (because checking one radio could have un-checked a radio
+ * in another $module)
+ *
+ * @param {MouseEvent} event Click event
+ */
 Radios.prototype.handleClick = function (event) {
   var $clickedInput = event.target;
-  // We only want to handle clicks for radio inputs
+
+  // Ignore clicks on things that aren't radio buttons
   if ($clickedInput.type !== 'radio') {
     return
   }
-  // Because checking one radio can uncheck a radio in another $module,
-  // we need to call set attributes on all radios in the same form, or document if they're not in a form.
-  //
-  // We also only want radios which have aria-controls, as they support conditional reveals.
+
+  // We only need to consider radios with conditional reveals, which will have
+  // aria-controls attributes.
   var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
+
   nodeListForEach($allInputs, function ($input) {
-    // Only inputs with the same form owner should change.
     var hasSameFormOwner = ($input.form === $clickedInput.form);
-
-    // In radios, only radios with the same name will affect each other.
     var hasSameName = ($input.name === $clickedInput.name);
+
     if (hasSameName && hasSameFormOwner) {
-      this.setAttributes($input);
+      this.syncConditionalRevealWithInputState($input);
     }
   }.bind(this));
 };

data/node_modules/govuk-frontend/govuk/components/select/_index.scss

@@ -44,9 +44,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `select--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
   }
 

data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss

@@ -21,6 +21,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
       background-color: $govuk-focus-colour;
 
       // Undo unwanted changes when global styles are enabled

data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss

@@ -42,9 +42,6 @@
 
     &:focus {
       border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `textarea--error`
-      // already has the thicker border.
-      box-shadow: none;
     }
 
   }

data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json

@@ -11,6 +11,12 @@
         "required": true,
         "description": "The name of the textarea, which is submitted with the form data."
     },
+    {
+        "name": "spellcheck",
+        "type": "boolean",
+        "required": false,
+        "description": "Optional field to enable or disable the spellcheck attribute on the textarea."
+    },
     {
         "name": "rows",
         "type": "string",

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

@@ -38,6 +38,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>

data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss

@@ -13,13 +13,15 @@
   .govuk-warning-text__icon {
     @include govuk-font($size: false, $weight: bold);
 
+    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;
 
     @include govuk-media-query($from: tablet) {

data/node_modules/govuk-frontend/govuk/helpers/_colour.scss

@@ -52,7 +52,7 @@
 ///   colour will be returned which meets contrast requirements . If you want to
 ///   use the non-websafe version you can set this to `false` but your should
 ///   ensure that you still meets contrast requirements for accessibility - for
-///   example, don't use the non-websafe version for text.
+///   example, do not use the non-websafe version for text.
 ///
 /// @return {Colour} Representation of colour for organisation
 /// @throw if `$organisation` is not a known organisation

data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss

@@ -52,7 +52,7 @@ $govuk-print-text-colour: #000000 !default;
 
 /// Secondary text colour
 ///
-/// Used for 'muted' text, help text, etc.
+/// Used in for example 'muted' text and help text.
 ///
 /// @type Colour
 /// @access public
@@ -90,7 +90,7 @@ $govuk-error-colour: govuk-colour("red") !default;
 
 /// Border colour
 ///
-/// Used for borders, separators, rules, keylines etc.
+/// Used in for example borders, separators, rules and keylines.
 ///
 /// @type Colour
 /// @access public

data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss

@@ -19,6 +19,39 @@ $govuk-use-legacy-palette: if((
     $govuk-compatibility-govukelements
   ), true, false) !default;
 
+/// Modern colour palette
+///
+/// This exists only because you cannot easily set a !default variable
+/// conditionally (thanks to the way scope works in Sass) so we set
+/// `$govuk-colour-palette` using the `if` function.
+///
+/// @access private
+
+$_govuk-colour-palette-modern: (
+  "red": #d4351c,
+  "yellow": #ffdd00,
+  "green": #00703c,
+  "blue": #1d70b8,
+  "dark-blue": #003078,
+  "light-blue": #5694ca,
+  "purple": #4c2c92,
+
+  "black": #0b0c0c,
+  "dark-grey": #505a5f,
+  "mid-grey": #b1b4b6,
+  "light-grey": #f3f2f1,
+  "white": #ffffff,
+
+  "light-purple": #6f72af,
+  "bright-purple": #912b88,
+  "pink": #d53880,
+  "light-pink": #f499be,
+  "orange": #f47738,
+  "brown": #b58840,
+  "light-green": #85994b,
+  "turquoise": #28a197
+);
+
 /// Legacy colour palette
 ///
 /// This exists only because you cannot easily set a !default variable
@@ -52,39 +85,6 @@ $_govuk-colour-palette-legacy: (
   "white": #ffffff
 );
 
-/// Modern colour palette
-///
-/// This exists only because you cannot easily set a !default variable
-/// conditionally (thanks to the way scope works in Sass) so we set
-/// `$govuk-colour-palette` using the `if` function.
-///
-/// @access private
-
-$_govuk-colour-palette-modern: (
-  "red": #d4351c,
-  "yellow": #ffdd00,
-  "green": #00703c,
-  "blue": #1d70b8,
-  "dark-blue": #003078,
-  "light-blue": #5694ca,
-  "purple": #4c2c92,
-
-  "black": #0b0c0c,
-  "dark-grey": #626a6e,
-  "mid-grey": #b1b4b6,
-  "light-grey": #f3f2f1,
-  "white": #ffffff,
-
-  "light-purple": #6f72af,
-  "bright-purple": #912b88,
-  "pink": #d53880,
-  "light-pink": #f499be,
-  "orange": #f47738,
-  "brown": #b58840,
-  "light-green": #85994b,
-  "turquoise": #28a197
-);
-
 /// Colour palette
 ///
 /// @type Map