govuk_publishing_components 21.57.1 → 21.60.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +31 -6
- data/app/assets/javascripts/component_guide/accessibility-test.js +21 -21
- data/app/assets/javascripts/component_guide/filter-components.js +19 -19
- data/app/assets/javascripts/component_guide/visual-regression.js +38 -37
- data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +2 -2
- data/app/assets/javascripts/govuk_publishing_components/components/details.js +6 -4
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +4 -4
- data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +31 -0
- data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +24 -24
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js +17 -17
- data/app/assets/stylesheets/component_guide/application.scss +15 -15
- data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +0 -8
- data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss +4 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +1 -8
- data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss +4 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_heading.scss +3 -8
- data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss +5 -8
- data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_radio.scss +4 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +7 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss +0 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss +1 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +8 -12
- data/app/assets/stylesheets/govuk_publishing_components/components/_table.scss +21 -24
- data/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss +4 -8
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +1 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +6 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss +0 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -10
- data/app/controllers/govuk_publishing_components/audit_controller.rb +52 -0
- data/app/controllers/govuk_publishing_components/component_guide_controller.rb +2 -1
- data/app/models/govuk_publishing_components/audit_applications.rb +117 -0
- data/app/models/govuk_publishing_components/audit_comparer.rb +198 -0
- data/app/models/govuk_publishing_components/audit_components.rb +158 -0
- data/app/views/govuk_publishing_components/audit/show.html.erb +258 -0
- data/app/views/govuk_publishing_components/component_guide/index.html.erb +9 -4
- data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_image_card.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_list.html.erb +26 -0
- data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_radio.html.erb +13 -5
- data/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/docs/checkboxes.yml +4 -0
- data/app/views/govuk_publishing_components/components/docs/govspeak.yml +45 -0
- data/app/views/govuk_publishing_components/components/docs/heading.yml +6 -3
- data/app/views/govuk_publishing_components/components/docs/image_card.yml +13 -1
- data/app/views/govuk_publishing_components/components/docs/list.yml +64 -0
- data/app/views/govuk_publishing_components/components/docs/radio.yml +4 -0
- data/config/routes.rb +1 -0
- data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb +15 -7
- data/lib/govuk_publishing_components/presenters/heading_helper.rb +21 -1
- data/lib/govuk_publishing_components/presenters/image_card_helper.rb +2 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/axe-core/package.json +145 -220
- data/node_modules/govuk-frontend/govuk/all.js +160 -57
- data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +16 -8
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +6 -0
- data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +1 -0
- data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +6 -5
- data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +68 -21
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +0 -27
- data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +0 -3
- data/node_modules/govuk-frontend/govuk/components/footer/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/header/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +2 -2
- data/node_modules/govuk-frontend/govuk/components/hint/template.njk +2 -2
- data/node_modules/govuk-frontend/govuk/components/input/_index.scss +0 -3
- data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +6 -0
- data/node_modules/govuk-frontend/govuk/components/input/template.njk +1 -0
- data/node_modules/govuk-frontend/govuk/components/radios/radios.js +76 -28
- data/node_modules/govuk-frontend/govuk/components/select/_index.scss +0 -3
- data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +0 -3
- data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +6 -0
- data/node_modules/govuk-frontend/govuk/components/textarea/template.njk +1 -0
- data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +4 -2
- data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +1 -1
- data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +2 -2
- data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +1 -1
- data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +4 -1
- data/node_modules/govuk-frontend/package.json +14 -81
- data/node_modules/jquery/package.json +44 -116
- metadata +46 -66
- data/Rakefile +0 -32
@@ -1,222 +1,147 @@
|
|
1
1
|
{
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
"keywords": [
|
148
|
-
"Accessibility",
|
149
|
-
"a11y",
|
150
|
-
"testing",
|
151
|
-
"unit",
|
152
|
-
"tdd",
|
153
|
-
"bdd",
|
154
|
-
"axe"
|
155
|
-
],
|
156
|
-
"license": "MPL-2.0",
|
157
|
-
"lint-staged": {
|
158
|
-
"*.{md,json,ts,html}": [
|
159
|
-
"prettier --write",
|
160
|
-
"git add"
|
161
|
-
],
|
162
|
-
"*.js": [
|
163
|
-
"eslint --fix",
|
164
|
-
"prettier --write",
|
165
|
-
"git add"
|
166
|
-
]
|
167
|
-
},
|
168
|
-
"main": "axe.js",
|
169
|
-
"maintainers": [
|
170
|
-
{
|
171
|
-
"name": "dequelabs",
|
172
|
-
"email": "labs@deque.com"
|
173
|
-
},
|
174
|
-
{
|
175
|
-
"name": "dylanb",
|
176
|
-
"email": "dylan@barrell.com"
|
177
|
-
},
|
178
|
-
{
|
179
|
-
"name": "marcysutton",
|
180
|
-
"email": "marcy.sutton@deque.com"
|
181
|
-
},
|
182
|
-
{
|
183
|
-
"name": "wilcofiers",
|
184
|
-
"email": "wilcofiers@gmail.com"
|
185
|
-
}
|
186
|
-
],
|
187
|
-
"name": "axe-core",
|
188
|
-
"optionalDependencies": {},
|
189
|
-
"readme": "ERROR: No README data found!",
|
190
|
-
"repository": {
|
191
|
-
"type": "git",
|
192
|
-
"url": "git+https://github.com/dequelabs/axe-core.git"
|
193
|
-
},
|
194
|
-
"scripts": {
|
195
|
-
"api-docs": "jsdoc --configure .jsdoc.json",
|
196
|
-
"build": "grunt",
|
197
|
-
"develop": "grunt dev --force",
|
198
|
-
"eslint": "eslint --color --format stylish '{lib,test,build,doc}/**/*.js' 'Gruntfile.js'",
|
199
|
-
"fmt": "prettier --write *.{json,md,js} **/*.ts './{.github,build,doc,lib,test}/**/*.{json,md,js,ts,html}'",
|
200
|
-
"imports-gen": "node ./build/imports-generator",
|
201
|
-
"next-release": "standard-version --scripts.prebump=./build/next-version.js --skip.commit=true --skip.tag=true",
|
202
|
-
"prepublishOnly": "grunt build && grunt file-exists",
|
203
|
-
"release": "standard-version -a",
|
204
|
-
"rule-gen": "node build/rule-generator",
|
205
|
-
"sri-update": "grunt build && node build/sri-update && git add sri-history.json",
|
206
|
-
"sri-validate": "node build/sri-update --validate",
|
207
|
-
"start": "npm run develop",
|
208
|
-
"test": "tsc && grunt test",
|
209
|
-
"test:examples": "node ./doc/examples/test-examples",
|
210
|
-
"test:headless": "node ./build/test/headless",
|
211
|
-
"test:locales": "mocha test/test-locales.js",
|
212
|
-
"test:rule-help-version": "mocha test/test-rule-help-version.js",
|
213
|
-
"version": "echo \"use 'npm run release' to bump axe-core version\" && exit 1"
|
214
|
-
},
|
215
|
-
"standard-version": {
|
216
|
-
"scripts": {
|
217
|
-
"postbump": "npm ci && npm run sri-update"
|
218
|
-
}
|
219
|
-
},
|
220
|
-
"typings": "axe.d.ts",
|
221
|
-
"version": "3.5.5"
|
2
|
+
"name": "axe-core",
|
3
|
+
"description": "Accessibility engine for automated Web UI testing",
|
4
|
+
"version": "3.5.5",
|
5
|
+
"license": "MPL-2.0",
|
6
|
+
"engines": {
|
7
|
+
"node": ">=4"
|
8
|
+
},
|
9
|
+
"contributors": [
|
10
|
+
{
|
11
|
+
"name": "David Sturley",
|
12
|
+
"organization": "Deque Systems, Inc.",
|
13
|
+
"url": "http://deque.com/"
|
14
|
+
},
|
15
|
+
{
|
16
|
+
"name": "Dylan Barrell",
|
17
|
+
"email": "dylan@barrell.com",
|
18
|
+
"organization": "Deque Systems, Inc.",
|
19
|
+
"url": "http://deque.com/"
|
20
|
+
},
|
21
|
+
{
|
22
|
+
"name": "Wilco Fiers",
|
23
|
+
"organization": "Deque Systems, Inc.",
|
24
|
+
"url": "http://deque.com/"
|
25
|
+
},
|
26
|
+
{
|
27
|
+
"name": "Dian Fay",
|
28
|
+
"organization": "Deque Systems, Inc.",
|
29
|
+
"url": "http://deque.com/"
|
30
|
+
},
|
31
|
+
{
|
32
|
+
"name": "Marcy Sutton",
|
33
|
+
"organization": "Deque Systems, Inc.",
|
34
|
+
"url": "http://deque.com/"
|
35
|
+
}
|
36
|
+
],
|
37
|
+
"homepage": "https://www.deque.com/axe/",
|
38
|
+
"repository": {
|
39
|
+
"type": "git",
|
40
|
+
"url": "https://github.com/dequelabs/axe-core.git"
|
41
|
+
},
|
42
|
+
"keywords": [
|
43
|
+
"Accessibility",
|
44
|
+
"a11y",
|
45
|
+
"testing",
|
46
|
+
"unit",
|
47
|
+
"tdd",
|
48
|
+
"bdd",
|
49
|
+
"axe"
|
50
|
+
],
|
51
|
+
"main": "axe.js",
|
52
|
+
"typings": "axe.d.ts",
|
53
|
+
"standard-version": {
|
54
|
+
"scripts": {
|
55
|
+
"postbump": "npm ci && npm run sri-update"
|
56
|
+
}
|
57
|
+
},
|
58
|
+
"scripts": {
|
59
|
+
"start": "npm run develop",
|
60
|
+
"develop": "grunt dev --force",
|
61
|
+
"api-docs": "jsdoc --configure .jsdoc.json",
|
62
|
+
"imports-gen": "node ./build/imports-generator",
|
63
|
+
"build": "grunt",
|
64
|
+
"eslint": "eslint --color --format stylish '{lib,test,build,doc}/**/*.js' 'Gruntfile.js'",
|
65
|
+
"test:headless": "node ./build/test/headless",
|
66
|
+
"test": "tsc && grunt test",
|
67
|
+
"test:examples": "node ./doc/examples/test-examples",
|
68
|
+
"test:locales": "mocha test/test-locales.js",
|
69
|
+
"test:rule-help-version": "mocha test/test-rule-help-version.js",
|
70
|
+
"version": "echo \"use 'npm run release' to bump axe-core version\" && exit 1",
|
71
|
+
"prepublishOnly": "grunt build && grunt file-exists",
|
72
|
+
"release": "standard-version -a",
|
73
|
+
"rule-gen": "node build/rule-generator",
|
74
|
+
"next-release": "standard-version --scripts.prebump=./build/next-version.js --skip.commit=true --skip.tag=true",
|
75
|
+
"sri-update": "grunt build && node build/sri-update && git add sri-history.json",
|
76
|
+
"sri-validate": "node build/sri-update --validate",
|
77
|
+
"fmt": "prettier --write *.{json,md,js} **/*.ts './{.github,build,doc,lib,test}/**/*.{json,md,js,ts,html}'"
|
78
|
+
},
|
79
|
+
"devDependencies": {
|
80
|
+
"@babel/core": "^7.5.4",
|
81
|
+
"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
|
82
|
+
"@babel/polyfill": "^7.4.4",
|
83
|
+
"@babel/preset-env": "^7.5.4",
|
84
|
+
"@deque/dot": "^1.1.5",
|
85
|
+
"aria-query": "^3.0.0",
|
86
|
+
"axios": "^0.19.0",
|
87
|
+
"babelify": "^10.0.0",
|
88
|
+
"blanket": "~1.2.3",
|
89
|
+
"browserify": "^16.2.3",
|
90
|
+
"chai": "~4.2.0",
|
91
|
+
"clone": "~2.1.1",
|
92
|
+
"core-js": "^3.2.1",
|
93
|
+
"css-selector-parser": "^1.3.0",
|
94
|
+
"derequire": "^2.0.6",
|
95
|
+
"emoji-regex": "8.0.0",
|
96
|
+
"es6-promise": "^4.2.6",
|
97
|
+
"eslint": "^6.1.0",
|
98
|
+
"eslint-config-prettier": "^6.2.0",
|
99
|
+
"execa": "^2.0.2",
|
100
|
+
"fs-extra": "^8.0.1",
|
101
|
+
"globby": "^10.0.0",
|
102
|
+
"grunt": "^1.0.3",
|
103
|
+
"grunt-babel": "^8.0.0",
|
104
|
+
"grunt-contrib-clean": "^2.0.0",
|
105
|
+
"grunt-contrib-concat": "^1.0.1",
|
106
|
+
"grunt-contrib-connect": "^2.0.0",
|
107
|
+
"grunt-contrib-copy": "^1.0.0",
|
108
|
+
"grunt-contrib-uglify": "^4.0.0",
|
109
|
+
"grunt-contrib-watch": "^1.1.0",
|
110
|
+
"grunt-parallel": "^0.5.1",
|
111
|
+
"grunt-run": "^0.8.1",
|
112
|
+
"html-entities": "^1.2.0",
|
113
|
+
"husky": "^3.0.0",
|
114
|
+
"jquery": "^3.0.0",
|
115
|
+
"jsdoc": "^3.5.5",
|
116
|
+
"lint-staged": "^9.2.1",
|
117
|
+
"make-dir": "^3.0.0",
|
118
|
+
"markdown-table": "^1.1.2",
|
119
|
+
"memoizee": "^0.4.14",
|
120
|
+
"minami": "^1.2.3",
|
121
|
+
"mkdirp": "^0.5.1",
|
122
|
+
"mocha": "^6.1.2",
|
123
|
+
"mocha-headless-chrome": "^2.0.3",
|
124
|
+
"prettier": "^1.17.1",
|
125
|
+
"puppeteer": "^2.0.0",
|
126
|
+
"revalidator": "~0.3.1",
|
127
|
+
"selenium-webdriver": "~3.6.0",
|
128
|
+
"sinon": "^7.5.0",
|
129
|
+
"sri-toolbox": "^0.2.0",
|
130
|
+
"standard-version": "^7.0.0",
|
131
|
+
"typescript": "^3.5.3",
|
132
|
+
"uglify-js": "^3.4.4",
|
133
|
+
"weakmap-polyfill": "^2.0.0"
|
134
|
+
},
|
135
|
+
"dependencies": {},
|
136
|
+
"lint-staged": {
|
137
|
+
"*.{md,json,ts,html}": [
|
138
|
+
"prettier --write",
|
139
|
+
"git add"
|
140
|
+
],
|
141
|
+
"*.js": [
|
142
|
+
"eslint --fix",
|
143
|
+
"prettier --write",
|
144
|
+
"git add"
|
145
|
+
]
|
146
|
+
}
|
222
147
|
}
|
@@ -1542,13 +1542,22 @@ CharacterCount.prototype.init = function () {
|
|
1542
1542
|
// Remove hard limit if set
|
1543
1543
|
$module.removeAttribute('maxlength');
|
1544
1544
|
|
1545
|
-
//
|
1546
|
-
|
1547
|
-
|
1545
|
+
// When the page is restored after navigating 'back' in some browsers the
|
1546
|
+
// state of the character count is not restored until *after* the DOMContentLoaded
|
1547
|
+
// event is fired, so we need to sync after the pageshow event in browsers
|
1548
|
+
// that support it.
|
1549
|
+
if ('onpageshow' in window) {
|
1550
|
+
window.addEventListener('pageshow', this.sync.bind(this));
|
1551
|
+
} else {
|
1552
|
+
window.addEventListener('DOMContentLoaded', this.sync.bind(this));
|
1553
|
+
}
|
1554
|
+
|
1555
|
+
this.sync();
|
1556
|
+
};
|
1548
1557
|
|
1549
|
-
|
1550
|
-
|
1551
|
-
|
1558
|
+
CharacterCount.prototype.sync = function () {
|
1559
|
+
this.bindChangeEvents();
|
1560
|
+
this.updateCountMessage();
|
1552
1561
|
};
|
1553
1562
|
|
1554
1563
|
// Read data attributes
|
@@ -1596,8 +1605,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
|
|
1596
1605
|
if (!this.$textarea.oldValue) this.$textarea.oldValue = '';
|
1597
1606
|
if (this.$textarea.value !== this.$textarea.oldValue) {
|
1598
1607
|
this.$textarea.oldValue = this.$textarea.value;
|
1599
|
-
|
1600
|
-
boundUpdateCountMessage();
|
1608
|
+
this.updateCountMessage();
|
1601
1609
|
}
|
1602
1610
|
};
|
1603
1611
|
|
@@ -1666,44 +1674,91 @@ function Checkboxes ($module) {
|
|
1666
1674
|
this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
|
1667
1675
|
}
|
1668
1676
|
|
1677
|
+
/**
|
1678
|
+
* Initialise Checkboxes
|
1679
|
+
*
|
1680
|
+
* Checkboxes can be associated with a 'conditionally revealed' content block –
|
1681
|
+
* for example, a checkbox for 'Phone' could reveal an additional form field for
|
1682
|
+
* the user to enter their phone number.
|
1683
|
+
*
|
1684
|
+
* These associations are made using a `data-aria-controls` attribute, which is
|
1685
|
+
* promoted to an aria-controls attribute during initialisation.
|
1686
|
+
*
|
1687
|
+
* We also need to restore the state of any conditional reveals on the page (for
|
1688
|
+
* example if the user has navigated back), and set up event handlers to keep
|
1689
|
+
* the reveal in sync with the checkbox state.
|
1690
|
+
*/
|
1669
1691
|
Checkboxes.prototype.init = function () {
|
1670
1692
|
var $module = this.$module;
|
1671
1693
|
var $inputs = this.$inputs;
|
1672
1694
|
|
1673
|
-
/**
|
1674
|
-
* Loop over all items with [data-controls]
|
1675
|
-
* Check if they have a matching conditional reveal
|
1676
|
-
* If they do, assign attributes.
|
1677
|
-
**/
|
1678
1695
|
nodeListForEach($inputs, function ($input) {
|
1679
|
-
var
|
1696
|
+
var target = $input.getAttribute('data-aria-controls');
|
1680
1697
|
|
1681
|
-
//
|
1682
|
-
//
|
1683
|
-
if (!
|
1698
|
+
// Skip checkboxes without data-aria-controls attributes, or where the
|
1699
|
+
// target element does not exist.
|
1700
|
+
if (!target || !$module.querySelector('#' + target)) {
|
1684
1701
|
return
|
1685
1702
|
}
|
1686
1703
|
|
1687
|
-
//
|
1688
|
-
|
1704
|
+
// Promote the data-aria-controls attribute to a aria-controls attribute
|
1705
|
+
// so that the relationship is exposed in the AOM
|
1706
|
+
$input.setAttribute('aria-controls', target);
|
1689
1707
|
$input.removeAttribute('data-aria-controls');
|
1690
|
-
|
1691
|
-
|
1708
|
+
});
|
1709
|
+
|
1710
|
+
// When the page is restored after navigating 'back' in some browsers the
|
1711
|
+
// state of form controls is not restored until *after* the DOMContentLoaded
|
1712
|
+
// event is fired, so we need to sync after the pageshow event in browsers
|
1713
|
+
// that support it.
|
1714
|
+
if ('onpageshow' in window) {
|
1715
|
+
window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
|
1716
|
+
} else {
|
1717
|
+
window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
|
1718
|
+
}
|
1719
|
+
|
1720
|
+
// Although we've set up handlers to sync state on the pageshow or
|
1721
|
+
// DOMContentLoaded event, init could be called after those events have fired,
|
1722
|
+
// for example if they are added to the page dynamically, so sync now too.
|
1723
|
+
this.syncAllConditionalReveals();
|
1692
1724
|
|
1693
|
-
// Handle events
|
1694
1725
|
$module.addEventListener('click', this.handleClick.bind(this));
|
1695
1726
|
};
|
1696
1727
|
|
1697
|
-
|
1698
|
-
|
1699
|
-
|
1728
|
+
/**
|
1729
|
+
* Sync the conditional reveal states for all inputs in this $module.
|
1730
|
+
*/
|
1731
|
+
Checkboxes.prototype.syncAllConditionalReveals = function () {
|
1732
|
+
nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
|
1733
|
+
};
|
1734
|
+
|
1735
|
+
/**
|
1736
|
+
* Sync conditional reveal with the input state
|
1737
|
+
*
|
1738
|
+
* Synchronise the visibility of the conditional reveal, and its accessible
|
1739
|
+
* state, with the input's checked state.
|
1740
|
+
*
|
1741
|
+
* @param {HTMLInputElement} $input Checkbox input
|
1742
|
+
*/
|
1743
|
+
Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
|
1744
|
+
var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
|
1700
1745
|
|
1701
|
-
|
1702
|
-
|
1703
|
-
|
1746
|
+
if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
|
1747
|
+
var inputIsChecked = $input.checked;
|
1748
|
+
|
1749
|
+
$input.setAttribute('aria-expanded', inputIsChecked);
|
1750
|
+
$target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
|
1704
1751
|
}
|
1705
1752
|
};
|
1706
1753
|
|
1754
|
+
/**
|
1755
|
+
* Click event handler
|
1756
|
+
*
|
1757
|
+
* Handle a click within the $module – if the click occurred on a checkbox, sync
|
1758
|
+
* the state of any associated conditional reveal with the checkbox state.
|
1759
|
+
*
|
1760
|
+
* @param {MouseEvent} event Click event
|
1761
|
+
*/
|
1707
1762
|
Checkboxes.prototype.handleClick = function (event) {
|
1708
1763
|
var $target = event.target;
|
1709
1764
|
|
@@ -1711,7 +1766,7 @@ Checkboxes.prototype.handleClick = function (event) {
|
|
1711
1766
|
var isCheckbox = $target.getAttribute('type') === 'checkbox';
|
1712
1767
|
var hasAriaControls = $target.getAttribute('aria-controls');
|
1713
1768
|
if (isCheckbox && hasAriaControls) {
|
1714
|
-
this.
|
1769
|
+
this.syncConditionalRevealWithInputState($target);
|
1715
1770
|
}
|
1716
1771
|
};
|
1717
1772
|
|
@@ -1959,67 +2014,115 @@ Header.prototype.handleClick = function (event) {
|
|
1959
2014
|
|
1960
2015
|
function Radios ($module) {
|
1961
2016
|
this.$module = $module;
|
2017
|
+
this.$inputs = $module.querySelectorAll('input[type="radio"]');
|
1962
2018
|
}
|
1963
2019
|
|
2020
|
+
/**
|
2021
|
+
* Initialise Radios
|
2022
|
+
*
|
2023
|
+
* Radios can be associated with a 'conditionally revealed' content block – for
|
2024
|
+
* example, a radio for 'Phone' could reveal an additional form field for the
|
2025
|
+
* user to enter their phone number.
|
2026
|
+
*
|
2027
|
+
* These associations are made using a `data-aria-controls` attribute, which is
|
2028
|
+
* promoted to an aria-controls attribute during initialisation.
|
2029
|
+
*
|
2030
|
+
* We also need to restore the state of any conditional reveals on the page (for
|
2031
|
+
* example if the user has navigated back), and set up event handlers to keep
|
2032
|
+
* the reveal in sync with the radio state.
|
2033
|
+
*/
|
1964
2034
|
Radios.prototype.init = function () {
|
1965
2035
|
var $module = this.$module;
|
1966
|
-
var $inputs =
|
2036
|
+
var $inputs = this.$inputs;
|
1967
2037
|
|
1968
|
-
/**
|
1969
|
-
* Loop over all items with [data-controls]
|
1970
|
-
* Check if they have a matching conditional reveal
|
1971
|
-
* If they do, assign attributes.
|
1972
|
-
**/
|
1973
2038
|
nodeListForEach($inputs, function ($input) {
|
1974
|
-
var
|
2039
|
+
var target = $input.getAttribute('data-aria-controls');
|
1975
2040
|
|
1976
|
-
//
|
1977
|
-
//
|
1978
|
-
if (!
|
2041
|
+
// Skip radios without data-aria-controls attributes, or where the
|
2042
|
+
// target element does not exist.
|
2043
|
+
if (!target || !$module.querySelector('#' + target)) {
|
1979
2044
|
return
|
1980
2045
|
}
|
1981
2046
|
|
1982
|
-
//
|
1983
|
-
|
2047
|
+
// Promote the data-aria-controls attribute to a aria-controls attribute
|
2048
|
+
// so that the relationship is exposed in the AOM
|
2049
|
+
$input.setAttribute('aria-controls', target);
|
1984
2050
|
$input.removeAttribute('data-aria-controls');
|
1985
|
-
|
1986
|
-
|
2051
|
+
});
|
2052
|
+
|
2053
|
+
// When the page is restored after navigating 'back' in some browsers the
|
2054
|
+
// state of form controls is not restored until *after* the DOMContentLoaded
|
2055
|
+
// event is fired, so we need to sync after the pageshow event in browsers
|
2056
|
+
// that support it.
|
2057
|
+
if ('onpageshow' in window) {
|
2058
|
+
window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
|
2059
|
+
} else {
|
2060
|
+
window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
|
2061
|
+
}
|
2062
|
+
|
2063
|
+
// Although we've set up handlers to sync state on the pageshow or
|
2064
|
+
// DOMContentLoaded event, init could be called after those events have fired,
|
2065
|
+
// for example if they are added to the page dynamically, so sync now too.
|
2066
|
+
this.syncAllConditionalReveals();
|
1987
2067
|
|
1988
2068
|
// Handle events
|
1989
2069
|
$module.addEventListener('click', this.handleClick.bind(this));
|
1990
2070
|
};
|
1991
2071
|
|
1992
|
-
|
1993
|
-
|
2072
|
+
/**
|
2073
|
+
* Sync the conditional reveal states for all inputs in this $module.
|
2074
|
+
*/
|
2075
|
+
Radios.prototype.syncAllConditionalReveals = function () {
|
2076
|
+
nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this));
|
2077
|
+
};
|
1994
2078
|
|
1995
|
-
|
2079
|
+
/**
|
2080
|
+
* Sync conditional reveal with the input state
|
2081
|
+
*
|
2082
|
+
* Synchronise the visibility of the conditional reveal, and its accessible
|
2083
|
+
* state, with the input's checked state.
|
2084
|
+
*
|
2085
|
+
* @param {HTMLInputElement} $input Radio input
|
2086
|
+
*/
|
2087
|
+
Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
|
2088
|
+
var $target = document.querySelector('#' + $input.getAttribute('aria-controls'));
|
2089
|
+
|
2090
|
+
if ($target && $target.classList.contains('govuk-radios__conditional')) {
|
1996
2091
|
var inputIsChecked = $input.checked;
|
1997
2092
|
|
1998
2093
|
$input.setAttribute('aria-expanded', inputIsChecked);
|
1999
|
-
|
2000
|
-
$content.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
|
2094
|
+
$target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
|
2001
2095
|
}
|
2002
2096
|
};
|
2003
2097
|
|
2098
|
+
/**
|
2099
|
+
* Click event handler
|
2100
|
+
*
|
2101
|
+
* Handle a click within the $module – if the click occurred on a radio, sync
|
2102
|
+
* the state of the conditional reveal for all radio buttons in the same form
|
2103
|
+
* with the same name (because checking one radio could have un-checked a radio
|
2104
|
+
* in another $module)
|
2105
|
+
*
|
2106
|
+
* @param {MouseEvent} event Click event
|
2107
|
+
*/
|
2004
2108
|
Radios.prototype.handleClick = function (event) {
|
2005
2109
|
var $clickedInput = event.target;
|
2006
|
-
|
2110
|
+
|
2111
|
+
// Ignore clicks on things that aren't radio buttons
|
2007
2112
|
if ($clickedInput.type !== 'radio') {
|
2008
2113
|
return
|
2009
2114
|
}
|
2010
|
-
|
2011
|
-
//
|
2012
|
-
//
|
2013
|
-
// We also only want radios which have aria-controls, as they support conditional reveals.
|
2115
|
+
|
2116
|
+
// We only need to consider radios with conditional reveals, which will have
|
2117
|
+
// aria-controls attributes.
|
2014
2118
|
var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]');
|
2119
|
+
|
2015
2120
|
nodeListForEach($allInputs, function ($input) {
|
2016
|
-
// Only inputs with the same form owner should change.
|
2017
2121
|
var hasSameFormOwner = ($input.form === $clickedInput.form);
|
2018
|
-
|
2019
|
-
// In radios, only radios with the same name will affect each other.
|
2020
2122
|
var hasSameName = ($input.name === $clickedInput.name);
|
2123
|
+
|
2021
2124
|
if (hasSameName && hasSameFormOwner) {
|
2022
|
-
this.
|
2125
|
+
this.syncConditionalRevealWithInputState($input);
|
2023
2126
|
}
|
2024
2127
|
}.bind(this));
|
2025
2128
|
};
|