govuk_publishing_components 27.10.5 → 27.11.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
  3. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +136 -55
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss +30 -0
  5. data/app/models/govuk_publishing_components/shared_accessibility_criteria.rb +17 -0
  6. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +29 -41
  7. data/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +23 -0
  8. data/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml +32 -0
  9. data/app/views/govuk_publishing_components/components/search/_search_icon.html.erb +5 -5
  10. data/config/locales/en.yml +7 -3
  11. data/lib/govuk_publishing_components/version.rb +1 -1
  12. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +2 -2
  13. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +3 -3
  14. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +3 -4
  15. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +9 -0
  16. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +6 -6
  17. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +14 -0
  18. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +8 -8
  19. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +1 -1
  20. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +5 -5
  21. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +2 -1
  22. data/node_modules/govuk-frontend/govuk/components/details/macro-options.json +2 -2
  23. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +3 -3
  24. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +1 -1
  25. data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +1 -0
  26. data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json +4 -4
  27. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +3 -0
  28. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +2 -2
  29. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +6 -6
  30. data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json +1 -1
  31. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +7 -7
  32. data/node_modules/govuk-frontend/govuk/components/inset-text/macro-options.json +1 -1
  33. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  34. data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +13 -1
  35. data/node_modules/govuk-frontend/govuk/components/panel/macro-options.json +1 -1
  36. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +14 -0
  37. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +8 -8
  38. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +3 -3
  39. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +2 -2
  40. data/node_modules/govuk-frontend/govuk/components/summary-list/macro-options.json +7 -7
  41. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +4 -4
  42. data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +5 -5
  43. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
  44. data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +22 -4
  45. data/node_modules/govuk-frontend/govuk/overrides/_all.scss +1 -0
  46. data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +20 -0
  47. data/node_modules/govuk-frontend/package.json +1 -1
  48. metadata +6 -16
@@ -37,6 +37,15 @@
37
37
  "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled link button\n</a>",
38
38
  "hidden": false
39
39
  },
40
+ {
41
+ "name": "start",
42
+ "options": {
43
+ "text": "Start now button",
44
+ "isStartButton": true
45
+ },
46
+ "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>",
47
+ "hidden": false
48
+ },
40
49
  {
41
50
  "name": "start link",
42
51
  "options": {
@@ -3,7 +3,7 @@
3
3
  "name": "id",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": "The id of the textarea."
6
+ "description": "The ID of the textarea."
7
7
  },
8
8
  {
9
9
  "name": "name",
@@ -66,13 +66,13 @@
66
66
  "name": "formGroup",
67
67
  "type": "object",
68
68
  "required": false,
69
- "description": "Options for the form-group wrapper",
69
+ "description": "Options for the form-group wrapper.",
70
70
  "params": [
71
71
  {
72
72
  "name": "classes",
73
73
  "type": "string",
74
74
  "required": false,
75
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
75
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
76
76
  }
77
77
  ]
78
78
  },
@@ -92,19 +92,19 @@
92
92
  "name": "spellcheck",
93
93
  "type": "boolean",
94
94
  "required": false,
95
- "description": "Optional field to enable or disable the spellcheck attribute on the character count."
95
+ "description": "Optional field to enable or disable the `spellcheck` attribute on the character count."
96
96
  },
97
97
  {
98
98
  "name": "countMessage",
99
99
  "type": "object",
100
100
  "required": false,
101
- "description": "Options for the count message",
101
+ "description": "Options for the count message.",
102
102
  "params": [
103
103
  {
104
104
  "name": "classes",
105
105
  "type": "string",
106
106
  "required": false,
107
- "description": "Classes to add to the count message"
107
+ "description": "Classes to add to the count message."
108
108
  }
109
109
  ]
110
110
  }
@@ -127,6 +127,20 @@
127
127
  // Focused state
128
128
  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
129
129
  border-width: 4px;
130
+
131
+ // When colours are overridden, the yellow box-shadow becomes invisible
132
+ // which means the focus state is less obvious. By adding a transparent
133
+ // outline, which becomes solid (text-coloured) in that context, we ensure
134
+ // the focus remains clearly visible.
135
+ outline: $govuk-focus-width solid transparent;
136
+ outline-offset: 1px;
137
+
138
+ // When in an explicit forced-color mode, we can use the Highlight system
139
+ // color for the outline to better match focus states of native controls
140
+ @media screen and (forced-colors: active), (-ms-high-contrast: active) {
141
+ outline-color: Highlight;
142
+ }
143
+
130
144
  box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
131
145
  }
132
146
 
@@ -30,13 +30,13 @@
30
30
  "name": "formGroup",
31
31
  "type": "object",
32
32
  "required": false,
33
- "description": "Options for the form-group wrapper",
33
+ "description": "Options for the form-group wrapper.",
34
34
  "params": [
35
35
  {
36
36
  "name": "classes",
37
37
  "type": "string",
38
38
  "required": false,
39
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
39
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
40
40
  }
41
41
  ]
42
42
  },
@@ -74,7 +74,7 @@
74
74
  "name": "id",
75
75
  "type": "string",
76
76
  "required": false,
77
- "description": "Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
77
+ "description": "Specific ID attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
78
78
  },
79
79
  {
80
80
  "name": "name",
@@ -106,19 +106,19 @@
106
106
  "name": "divider",
107
107
  "type": "string",
108
108
  "required": false,
109
- "description": "Divider text to separate checkbox items, for example the text \"or\"."
109
+ "description": "Divider text to separate checkbox items, for example the text 'or'."
110
110
  },
111
111
  {
112
112
  "name": "checked",
113
113
  "type": "boolean",
114
114
  "required": false,
115
- "description": "If true, checkbox will be checked."
115
+ "description": "If `true`, checkbox will be checked."
116
116
  },
117
117
  {
118
118
  "name": "conditional",
119
119
  "type": "boolean",
120
120
  "required": false,
121
- "description": "If true, content provided will be revealed when the item is checked."
121
+ "description": "If `true`, content provided will be revealed when the item is checked."
122
122
  },
123
123
  {
124
124
  "name": "conditional.html",
@@ -130,13 +130,13 @@
130
130
  "name": "behaviour",
131
131
  "type": "string",
132
132
  "required": false,
133
- "description": "If set to `exclusive`, implements a \"None of these\" type behaviour via javascript when checkboxes are clicked"
133
+ "description": "If set to `exclusive`, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked."
134
134
  },
135
135
  {
136
136
  "name": "disabled",
137
137
  "type": "boolean",
138
138
  "required": false,
139
- "description": "If true, checkbox will be disabled."
139
+ "description": "If `true`, checkbox will be disabled."
140
140
  },
141
141
  {
142
142
  "name": "attributes",
@@ -3,7 +3,7 @@
3
3
  "name": "ariaLabel",
4
4
  "type": "string",
5
5
  "required": false,
6
- "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\"."
6
+ "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'."
7
7
  },
8
8
  {
9
9
  "name": "hidden",
@@ -3,7 +3,7 @@
3
3
  "name": "id",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": "This is used for the main component and to compose id attribute for each item."
6
+ "description": "This is used for the main component and to compose the ID attribute for each item."
7
7
  },
8
8
  {
9
9
  "name": "namePrefix",
@@ -21,7 +21,7 @@
21
21
  "name": "id",
22
22
  "type": "string",
23
23
  "required": false,
24
- "description": "Item-specific id. If provided, it will be used instead of the generated id."
24
+ "description": "Item-specific ID. If provided, it will be used instead of the generated ID."
25
25
  },
26
26
  {
27
27
  "name": "name",
@@ -45,7 +45,7 @@
45
45
  "name": "autocomplete",
46
46
  "type": "string",
47
47
  "required": false,
48
- "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."
48
+ "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."
49
49
  },
50
50
  {
51
51
  "name": "pattern",
@@ -85,13 +85,13 @@
85
85
  "name": "formGroup",
86
86
  "type": "object",
87
87
  "required": false,
88
- "description": "Options for the form-group wrapper",
88
+ "description": "Options for the form-group wrapper.",
89
89
  "params": [
90
90
  {
91
91
  "name": "classes",
92
92
  "type": "string",
93
93
  "required": false,
94
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
94
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
95
95
  }
96
96
  ]
97
97
  },
@@ -71,7 +71,8 @@
71
71
  }
72
72
 
73
73
  .govuk-details__text {
74
- padding: govuk-spacing(3);
74
+ padding-top: govuk-spacing(3);
75
+ padding-bottom: govuk-spacing(3);
75
76
  padding-left: govuk-spacing(4);
76
77
  border-left: $govuk-border-width solid $govuk-border-colour;
77
78
  }
@@ -27,13 +27,13 @@
27
27
  "name": "id",
28
28
  "type": "string",
29
29
  "required": false,
30
- "description": "Id to add to the details element."
30
+ "description": "ID to add to the details element."
31
31
  },
32
32
  {
33
33
  "name": "open",
34
34
  "type": "boolean",
35
35
  "required": false,
36
- "description": "If true, details element will be expanded."
36
+ "description": "If `true`, details element will be expanded."
37
37
  },
38
38
  {
39
39
  "name": "classes",
@@ -15,7 +15,7 @@
15
15
  "name": "id",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "Id attribute to add to the error message span tag."
18
+ "description": "ID attribute to add to the error message span tag."
19
19
  },
20
20
  {
21
21
  "name": "classes",
@@ -27,12 +27,12 @@
27
27
  "name": "attributes",
28
28
  "type": "object",
29
29
  "required": false,
30
- "description": "HTML attributes (for example data attributes) to add to the error message span tag"
30
+ "description": "HTML attributes (for example data attributes) to add to the error message span tag."
31
31
  },
32
32
  {
33
33
  "name": "visuallyHiddenText",
34
34
  "type": "string",
35
35
  "required": false,
36
- "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
36
+ "description": "A visually hidden prefix used before the error message. Defaults to 'Error'."
37
37
  }
38
38
  ]
@@ -65,6 +65,6 @@
65
65
  "name": "caller",
66
66
  "type": "nunjucks-block",
67
67
  "required": false,
68
- "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."
68
+ "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."
69
69
  }
70
70
  ]
@@ -8,6 +8,7 @@
8
8
  .govuk-file-upload {
9
9
  @include govuk-font($size: 19);
10
10
  @include govuk-text-colour;
11
+ max-width: 100%;
11
12
  margin-left: -$component-padding;
12
13
  padding: $component-padding;
13
14
 
@@ -9,13 +9,13 @@
9
9
  "name": "id",
10
10
  "type": "string",
11
11
  "required": true,
12
- "description": "The id of the input"
12
+ "description": "The ID of the input."
13
13
  },
14
14
  {
15
15
  "name": "value",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "Optional initial value of the input"
18
+ "description": "Optional initial value of the input."
19
19
  },
20
20
  {
21
21
  "name": "describedBy",
@@ -48,13 +48,13 @@
48
48
  "name": "formGroup",
49
49
  "type": "object",
50
50
  "required": false,
51
- "description": "Options for the form-group wrapper",
51
+ "description": "Options for the form-group wrapper.",
52
52
  "params": [
53
53
  {
54
54
  "name": "classes",
55
55
  "type": "string",
56
56
  "required": false,
57
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
57
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
58
58
  }
59
59
  ]
60
60
  },
@@ -111,6 +111,9 @@
111
111
  margin-bottom: govuk-spacing(3);
112
112
  }
113
113
  vertical-align: top;
114
+ // Work around SVGs not inheriting color from parent in forced color mode
115
+ // (https://github.com/w3c/csswg-drafts/issues/6310)
116
+ forced-color-adjust: auto;
114
117
  }
115
118
 
116
119
  .govuk-footer__licence-description {
@@ -9,7 +9,7 @@
9
9
  "name": "visuallyHiddenTitle",
10
10
  "type": "string",
11
11
  "required": false,
12
- "description": "Title for a meta item section, which defaults to Support links"
12
+ "description": "Title for a meta item section. Defaults to 'Support links'."
13
13
  },
14
14
  {
15
15
  "name": "html",
@@ -61,7 +61,7 @@
61
61
  "name": "title",
62
62
  "type": "string",
63
63
  "required": true,
64
- "description": "Title for a section"
64
+ "description": "Title for a section."
65
65
  },
66
66
  {
67
67
  "name": "columns",
@@ -3,7 +3,7 @@
3
3
  "name": "homepageUrl",
4
4
  "type": "string",
5
5
  "required": false,
6
- "description": "The url of the homepage. Defaults to /"
6
+ "description": "The URL of the homepage. Defaults to `/`"
7
7
  },
8
8
  {
9
9
  "name": "assetsPath",
@@ -15,7 +15,7 @@
15
15
  "name": "productName",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName."
18
+ "description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`."
19
19
  },
20
20
  {
21
21
  "name": "serviceName",
@@ -27,7 +27,7 @@
27
27
  "name": "serviceUrl",
28
28
  "type": "string",
29
29
  "required": false,
30
- "description": "Url for the service name anchor."
30
+ "description": "URL for the service name anchor."
31
31
  },
32
32
  {
33
33
  "name": "navigation",
@@ -51,7 +51,7 @@
51
51
  "name": "href",
52
52
  "type": "string",
53
53
  "required": false,
54
- "description": "Url of the navigation item anchor."
54
+ "description": "URL of the navigation item anchor."
55
55
  },
56
56
  {
57
57
  "name": "active",
@@ -77,13 +77,13 @@
77
77
  "name": "navigationLabel",
78
78
  "type": "string",
79
79
  "required": false,
80
- "description": "Text for the `aria-label` attribute of the navigation. Defaults to \"Navigation menu\"."
80
+ "description": "Text for the `aria-label` attribute of the navigation. Defaults to 'Navigation menu'."
81
81
  },
82
82
  {
83
83
  "name": "menuButtonLabel",
84
84
  "type": "string",
85
85
  "required": false,
86
- "description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to \"Show or hide navigation menu\"."
86
+ "description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to 'Show or hide navigation menu'."
87
87
  },
88
88
  {
89
89
  "name": "containerClasses",
@@ -15,7 +15,7 @@
15
15
  "name": "id",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "Optional id attribute to add to the hint span tag."
18
+ "description": "Optional ID attribute to add to the hint span tag."
19
19
  },
20
20
  {
21
21
  "name": "classes",
@@ -3,7 +3,7 @@
3
3
  "name": "id",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": "The id of the input."
6
+ "description": "The ID of the input."
7
7
  },
8
8
  {
9
9
  "name": "name",
@@ -15,7 +15,7 @@
15
15
  "name": "type",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "Type of input control to render. Defaults to \"text\"."
18
+ "description": "Type of input control to render. Defaults to `text`."
19
19
  },
20
20
  {
21
21
  "name": "inputmode",
@@ -98,13 +98,13 @@
98
98
  "name": "text",
99
99
  "type": "string",
100
100
  "required": true,
101
- "description": "Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
101
+ "description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
102
102
  },
103
103
  {
104
104
  "name": "html",
105
105
  "type": "string",
106
106
  "required": true,
107
- "description": "Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
107
+ "description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
108
108
  },
109
109
  {
110
110
  "name": "classes",
@@ -124,13 +124,13 @@
124
124
  "name": "formGroup",
125
125
  "type": "object",
126
126
  "required": false,
127
- "description": "Options for the form-group wrapper",
127
+ "description": "Options for the form-group wrapper.",
128
128
  "params": [
129
129
  {
130
130
  "name": "classes",
131
131
  "type": "string",
132
132
  "required": false,
133
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
133
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
134
134
  }
135
135
  ]
136
136
  },
@@ -156,7 +156,7 @@
156
156
  "name": "spellcheck",
157
157
  "type": "boolean",
158
158
  "required": false,
159
- "description": "Optional field to enable or disable the spellcheck attribute on the input."
159
+ "description": "Optional field to enable or disable the `spellcheck` attribute on the input."
160
160
  },
161
161
  {
162
162
  "name": "attributes",
@@ -15,7 +15,7 @@
15
15
  "name": "id",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "Id attribute to add to the inset text container."
18
+ "description": "ID attribute to add to the inset text container."
19
19
  },
20
20
  {
21
21
  "name": "classes",
@@ -15,7 +15,7 @@
15
15
  "name": "for",
16
16
  "type": "string",
17
17
  "required": false,
18
- "description": "The value of the for attribute, the id of the input the label is associated with."
18
+ "description": "The value of the `for` attribute, the ID of the input the label is associated with."
19
19
  },
20
20
  {
21
21
  "name": "isPageHeading",
@@ -12,7 +12,19 @@
12
12
  text-align: center;
13
13
 
14
14
  @include govuk-media-query($until: tablet) {
15
- padding: govuk-spacing(6) - $govuk-border-width;
15
+ padding: govuk-spacing(3) - $govuk-border-width;
16
+
17
+ // This is an if-all-else-fails attempt to stop long words from overflowing the container
18
+ // on very narrow viewports by forcing them to break and wrap instead. This
19
+ // overflowing is more likely to happen when user increases text size on a mobile eg. using
20
+ // iOS Safari text resize controls.
21
+ //
22
+ // The overflowing is a particular problem with the panel component since it uses white
23
+ // text: when the text overflows the container, it is invisible on the white (page)
24
+ // background. When the text in our other components overflow, the user might have to scroll
25
+ // horizontally to view it but the the text remains legible.
26
+ overflow-wrap: break-word;
27
+ word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
16
28
  }
17
29
  }
18
30
 
@@ -15,7 +15,7 @@
15
15
  "name": "headingLevel",
16
16
  "type": "integer",
17
17
  "required": false,
18
- "description": "Heading level, from 1 to 6. Default is 1."
18
+ "description": "Heading level, from `1` to `6`. Default is `1`."
19
19
  },
20
20
  {
21
21
  "name": "text",
@@ -121,6 +121,20 @@
121
121
  // Focused state
122
122
  .govuk-radios__input:focus + .govuk-radios__label:before {
123
123
  border-width: 4px;
124
+
125
+ // When colours are overridden, the yellow box-shadow becomes invisible
126
+ // which means the focus state is less obvious. By adding a transparent
127
+ // outline, which becomes solid (text-coloured) in that context, we ensure
128
+ // the focus remains clearly visible.
129
+ outline: $govuk-focus-width solid transparent;
130
+ outline-offset: 1px;
131
+
132
+ // When in an explicit forced-color mode, we can use the Highlight system
133
+ // color for the outline to better match focus states of native controls
134
+ @media screen and (forced-colors: active), (-ms-high-contrast: active) {
135
+ outline-color: Highlight;
136
+ }
137
+
124
138
  box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
125
139
  }
126
140
 
@@ -24,13 +24,13 @@
24
24
  "name": "formGroup",
25
25
  "type": "object",
26
26
  "required": false,
27
- "description": "Options for the form-group wrapper",
27
+ "description": "Options for the form-group wrapper.",
28
28
  "params": [
29
29
  {
30
30
  "name": "classes",
31
31
  "type": "string",
32
32
  "required": false,
33
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
33
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
34
34
  }
35
35
  ]
36
36
  },
@@ -38,7 +38,7 @@
38
38
  "name": "idPrefix",
39
39
  "type": "string",
40
40
  "required": false,
41
- "description": "String to prefix id for each radio item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead."
41
+ "description": "String to prefix ID for each radio item if no ID is specified on each item. If `idPrefix` is not passed, fallback to using the `name` attribute instead."
42
42
  },
43
43
  {
44
44
  "name": "name",
@@ -68,7 +68,7 @@
68
68
  "name": "id",
69
69
  "type": "string",
70
70
  "required": false,
71
- "description": "Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied."
71
+ "description": "Specific ID attribute for the radio item. If omitted, then `idPrefix` string will be applied."
72
72
  },
73
73
  {
74
74
  "name": "value",
@@ -94,19 +94,19 @@
94
94
  "name": "divider",
95
95
  "type": "string",
96
96
  "required": false,
97
- "description": "Divider text to separate radio items, for example the text \"or\"."
97
+ "description": "Divider text to separate radio items, for example the text 'or'."
98
98
  },
99
99
  {
100
100
  "name": "checked",
101
101
  "type": "boolean",
102
102
  "required": false,
103
- "description": "If true, radio will be checked."
103
+ "description": "If `true`, radio will be checked."
104
104
  },
105
105
  {
106
106
  "name": "conditional",
107
107
  "type": "string",
108
108
  "required": false,
109
- "description": "If true, content provided will be revealed when the item is checked."
109
+ "description": "If `true`, content provided will be revealed when the item is checked."
110
110
  },
111
111
  {
112
112
  "name": "conditional.html",
@@ -118,7 +118,7 @@
118
118
  "name": "disabled",
119
119
  "type": "boolean",
120
120
  "required": false,
121
- "description": "If true, radio will be disabled."
121
+ "description": "If `true`, radio will be disabled."
122
122
  },
123
123
  {
124
124
  "name": "attributes",
@@ -3,7 +3,7 @@
3
3
  "name": "id",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": "Id for each select box."
6
+ "description": "ID for each select box."
7
7
  },
8
8
  {
9
9
  "name": "name",
@@ -80,13 +80,13 @@
80
80
  "name": "formGroup",
81
81
  "type": "object",
82
82
  "required": false,
83
- "description": "Options for the form-group wrapper",
83
+ "description": "Options for the form-group wrapper.",
84
84
  "params": [
85
85
  {
86
86
  "name": "classes",
87
87
  "type": "string",
88
88
  "required": false,
89
- "description": "Classes to add to the form group (for example to show error state for the whole group)"
89
+ "description": "Classes to add to the form group (for example to show error state for the whole group)."
90
90
  }
91
91
  ]
92
92
  },