Merge pull request #2337 from alphagov/release-3.13.1

Version 3.13.1

dist/VERSION.txt

@@ -1 +1 @@
-3.13.0
+3.13.1

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

@@ -3,13 +3,13 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
+        "description": "Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
     },
     {
         "name": "headingLevel",
         "type": "integer",
         "required": false,
-        "description": "Heading level, from 1 to 6. Default is `2`."
+        "description": "Heading level, from `1` to `6`. Default is `2`."
     },
     {
         "name": "classes",

package/govuk/components/back-link/macro-options.json

@@ -3,19 +3,19 @@
         "name": "text",
         "type": "string",
         "required": false,
-        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
     },
     {
         "name": "html",
         "type": "string",
         "required": false,
-        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
     },
     {
         "name": "href",
         "type": "string",
         "required": true,
-        "description": "The value of the link href attribute."
+        "description": "The value of the link's `href` attribute."
     },
     {
         "name": "classes",

package/govuk/components/button/_index.scss

@@ -158,10 +158,6 @@
       cursor: default;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -270,6 +266,9 @@
     -webkit-align-self: center;
         -ms-flex-item-align: center;
             align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   @if $govuk-use-legacy-font {

package/govuk/components/button/fixtures.json

@@ -37,6 +37,15 @@
             "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n  Disabled link button\n</a>",
             "hidden": false
         },
+        {
+            "name": "start",
+            "options": {
+                "text": "Start now button",
+                "isStartButton": true
+            },
+            "html": "<button class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  Start now button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg></button>",
+            "hidden": false
+        },
         {
             "name": "start link",
             "options": {

package/govuk/components/character-count/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "The id of the textarea."
+        "description": "The ID of the textarea."
     },
     {
         "name": "name",
@@ -66,13 +66,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },
@@ -92,19 +92,19 @@
         "name": "spellcheck",
         "type": "boolean",
         "required": false,
-        "description": "Optional field to enable or disable the spellcheck attribute on the character count."
+        "description": "Optional field to enable or disable the `spellcheck` attribute on the character count."
     },
     {
         "name": "countMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the count message",
+        "description": "Options for the count message.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the count message"
+                "description": "Classes to add to the count message."
             }
         ]
     }

package/govuk/components/checkboxes/_index.scss

@@ -127,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 

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

@@ -30,13 +30,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },
@@ -74,7 +74,7 @@
                 "name": "id",
                 "type": "string",
                 "required": false,
-                "description": "Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
+                "description": "Specific ID attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
             },
             {
                 "name": "name",
@@ -106,19 +106,19 @@
                 "name": "divider",
                 "type": "string",
                 "required": false,
-                "description": "Divider text to separate checkbox items, for example the text \"or\"."
+                "description": "Divider text to separate checkbox items, for example the text 'or'."
             },
             {
                 "name": "checked",
                 "type": "boolean",
                 "required": false,
-                "description": "If true, checkbox will be checked."
+                "description": "If `true`, checkbox will be checked."
             },
             {
                 "name": "conditional",
                 "type": "boolean",
                 "required": false,
-                "description": "If true, content provided will be revealed when the item is checked."
+                "description": "If `true`, content provided will be revealed when the item is checked."
             },
             {
                 "name": "conditional.html",
@@ -130,13 +130,13 @@
                 "name": "behaviour",
                 "type": "string",
                 "required": false,
-                "description": "If set to `exclusive`, implements a \"None of these\" type behaviour via javascript when checkboxes are clicked"
+                "description": "If set to `exclusive`, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked."
             },
             {
                 "name": "disabled",
                 "type": "boolean",
                 "required": false,
-                "description": "If true, checkbox will be disabled."
+                "description": "If `true`, checkbox will be disabled."
             },
             {
                 "name": "attributes",

package/govuk/components/cookie-banner/macro-options.json

@@ -3,7 +3,7 @@
         "name": "ariaLabel",
         "type": "string",
         "required": false,
-        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to \"Cookie banner\"."
+        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'."
     },
     {
         "name": "hidden",

package/govuk/components/date-input/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "This is used for the main component and to compose id attribute for each item."
+        "description": "This is used for the main component and to compose the ID attribute for each item."
     },
     {
         "name": "namePrefix",
@@ -21,7 +21,7 @@
                 "name": "id",
                 "type": "string",
                 "required": false,
-                "description": "Item-specific id. If provided, it will be used instead of the generated id."
+                "description": "Item-specific ID. If provided, it will be used instead of the generated ID."
             },
             {
                 "name": "name",
@@ -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 \"bday-day\". 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",
@@ -85,13 +85,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },

package/govuk/components/details/_index.scss

@@ -71,7 +71,8 @@
   }
 
   .govuk-details__text {
-    padding: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
     padding-left: govuk-spacing(4);
     border-left: $govuk-border-width solid $govuk-border-colour;
   }

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

@@ -27,13 +27,13 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "Id to add to the details element."
+        "description": "ID to add to the details element."
     },
     {
         "name": "open",
         "type": "boolean",
         "required": false,
-        "description": "If true, details element will be expanded."
+        "description": "If `true`, details element will be expanded."
     },
     {
         "name": "classes",

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

@@ -15,7 +15,7 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "Id attribute to add to the error message span tag."
+        "description": "ID attribute to add to the error message span tag."
     },
     {
         "name": "classes",
@@ -27,12 +27,12 @@
         "name": "attributes",
         "type": "object",
         "required": false,
-        "description": "HTML attributes (for example data attributes) to add to the error message span tag"
+        "description": "HTML attributes (for example data attributes) to add to the error message span tag."
     },
     {
         "name": "visuallyHiddenText",
         "type": "string",
         "required": false,
-        "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
+        "description": "A visually hidden prefix used before the error message. Defaults to 'Error'."
     }
 ]

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

@@ -65,6 +65,6 @@
         "name": "caller",
         "type": "nunjucks-block",
         "required": false,
-        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block."
+        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fieldset component in a `call` block."
     }
 ]

package/govuk/components/file-upload/_index.scss

@@ -8,6 +8,7 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    max-width: 100%;
     margin-left: -$component-padding;
     padding: $component-padding;
 

package/govuk/components/file-upload/macro-options.json

@@ -9,13 +9,13 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "The id of the input"
+        "description": "The ID of the input."
     },
     {
         "name": "value",
         "type": "string",
         "required": false,
-        "description": "Optional initial value of the input"
+        "description": "Optional initial value of the input."
     },
     {
         "name": "describedBy",
@@ -48,13 +48,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },

package/govuk/components/footer/_index.scss

@@ -111,6 +111,9 @@
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   .govuk-footer__licence-description {

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

@@ -9,7 +9,7 @@
                 "name": "visuallyHiddenTitle",
                 "type": "string",
                 "required": false,
-                "description": "Title for a meta item section, which defaults to Support links"
+                "description": "Title for a meta item section. Defaults to 'Support links'."
             },
             {
                 "name": "html",
@@ -61,7 +61,7 @@
                 "name": "title",
                 "type": "string",
                 "required": true,
-                "description": "Title for a section"
+                "description": "Title for a section."
             },
             {
                 "name": "columns",