-
Notifications
You must be signed in to change notification settings - Fork 17
/
footer.yaml
388 lines (375 loc) · 12 KB
/
footer.yaml
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
params:
- name: meta
type: object
required: false
description: Object containing options for the meta navigation.
params:
- name: visuallyHiddenTitle
type: string
required: false
description: Title for a meta item section, which defaults to Support links
- name: html
type: string
required: false
description: HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
- name: text
type: string
required: false
description: Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
- name: items
type: array
required: false
description: Array of items for use in the meta section of the footer.
params:
- name: text
type: string
required: true
description: List item text in the meta section of the footer.
- name: href
type: string
required: true
description: List item href attribute in the meta section of the footer.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
- name: navigation
type: array
required: false
description: Array of items for use in the navigation section of the footer.
params:
- name: title
type: string
required: true
description: Title for a section
- name: columns
type: integer
required: false
description: Amount of columns to display items in navigation section of the footer.
- name: width
type: string
required: false
description: Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
- name: items
type: array
required: false
description: Array of items to display in the list in navigation section of the footer.
params:
- name: text
type: string
required: true
description: List item text in the navigation section of the footer.
- name: href
type: string
required: true
description: List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
- name: containerClasses
type: string
required: false
description: Classes that can be added to the inner container, useful if you want to make the footer full width.
- name: classes
type: string
required: false
description: Classes to add to the footer component container.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the footer component container.
previewLayout: full-width
accessibilityCriteria: |
Text and links in the Footer must:
- have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
Links in the Footer must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- have visible text
Images in the Footer must:
- be presentational when linked to from accompanying text (Open Government Licence (OGL) icon).
- have a meaningful accessible name if also a linked element (crest icon).
Landmarks and Roles in the Footer should:
- avoid navigation landmarks or roles
"The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary." - (https://www.w3.org/TR/html52/sections.html#the-nav-element)
Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
Should be challenged if user research indicates this is an issue.
examples:
- name: default
data:
{}
- name: with meta
description: Secondary navigation with meta information relating to the site
data:
meta:
visuallyHiddenTitle: Items
items:
- href: '#1'
text: Item 1
- href: '#2'
text: Item 2
- href: '#3'
text: Item 3
- name: with custom meta
description: Custom meta section
data:
meta:
text: GOV.UK Prototype Kit v7.0.1
- name: with meta links and meta content
description: Secondary navigation links and custom meta text
data:
meta:
items:
- href: '#1'
text: Bibendum Ornare
- href: '#2'
text: Nullam
- href: '#3'
text: Tortor Fringilla
- href: '#4'
text: Tellus
- href: '#5'
text: Egestas Nullam
- href: '#6'
text: Euismod Etiam
- href: '#7'
text: Fusce Sollicitudin
- href: '#8'
text: Ligula Nullam Ultricies
html: Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</a>
- name: with custom meta
description: Custom meta section
data:
meta:
text: GOV.UK Prototype Kit v7.0.1
- name: with navigation
data:
navigation:
- title: Two column list
columns: 2
width: two-thirds
items:
- href: '#1'
text: Navigation item 1
- href: '#2'
text: Navigation item 2
- href: '#3'
text: Navigation item 3
- href: '#4'
text: Navigation item 4
- href: '#5'
text: Navigation item 5
- href: '#6'
text: Navigation item 6
- title: Single column list
width: one-third
items:
- href: '#1'
text: Navigation item 1
- href: '#2'
text: Navigation item 2
- href: '#3'
text: Navigation item 3
- name: GOV.UK
description: A full example based on GOV.UK's current footer
data:
navigation:
- title: Services and information
columns: 2
width: two-thirds
items:
- href: '/browse/benefits'
text: Benefits
- href: '/browse/births-deaths-marriages'
text: Births, deaths, marriages and care
- href: '/browse/business'
text: Business and self-employed
- href: '/browse/childcare-parenting'
text: Childcare and parenting
- href: '/browse/citizenship'
text: Citizenship and living in the UK
- href: '/browse/justice'
text: Crime, justice and the law
- href: '/browse/disabilities'
text: Disabled people
- href: '/browse/driving'
text: Driving and transport
- href: '/browse/education'
text: Education and learning
- href: '/browse/employing-people'
text: Employing people
- href: '/browse/environment-countryside'
text: Environment and countryside
- href: '/browse/housing-local-services'
text: Housing and local services
- href: '/browse/tax'
text: Money and tax
- href: '/browse/abroad'
text: Passports, travel and living abroad
- href: '/browse/visas-immigration'
text: Visas and immigration
- href: '/browse/working'
text: Working, jobs and pensions
- title: Departments and policy
width: one-third
items:
- href: '/government/how-government-works'
text: How government works
- href: '/government/organisations'
text: Departments
- href: '/world'
text: Worldwide
- href: '/government/policies'
text: Policies
- href: '/government/publications'
text: Publications
- href: '/government/announcements'
text: Announcements
meta:
items:
- href: '/help'
text: Help
- href: '/help/cookies'
text: Cookies
- href: '/contact'
text: Contact
- href: '/help/terms-conditions'
text: Terms and conditions
- href: '/cymraeg'
text: Rhestr o Wasanaethau Cymraeg
html: Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>
- name: Three equal columns
description: A full example to demonstrate three equal width columns
data:
navigation:
- title: Single column list 1
columns: 1
width: one-third
items:
- href: '#1'
text: Navigation item 1
- href: '#2'
text: Navigation item 2
- href: '#3'
text: Navigation item 3
- href: '#4'
text: Navigation item 4
- href: '#5'
text: Navigation item 5
- href: '#6'
text: Navigation item 6
- title: Single column list 2
columns: 1
width: one-third
items:
- href: '#1'
text: Navigation item 1
- href: '#2'
text: Navigation item 2
- href: '#3'
text: Navigation item 3
- href: '#4'
text: Navigation item 4
- href: '#5'
text: Navigation item 5
- href: '#6'
text: Navigation item 6
- title: Single column list 3
columns: 1
width: one-third
items:
- href: '#1'
text: Navigation item 1
- href: '#2'
text: Navigation item 2
- href: '#3'
text: Navigation item 3
- href: '#4'
text: Navigation item 4
- href: '#5'
text: Navigation item 5
- href: '#6'
text: Navigation item 6
# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
- name: attributes
data:
attributes:
data-test-attribute: value
data-test-attribute-2: value-2
- name: classes
data:
classes: app-footer--custom-modifier
- name: with container classes
data:
containerClasses: app-width-container
- name: with empty meta
data:
meta: {}
- name: with empty meta in Welsh
data:
language: cy
meta: {}
- name: with empty meta items
data:
meta:
items: []
- name: meta html as text
data:
meta:
text: GOV.UK Prototype Kit <strong>v7.0.1</strong>
- name: with meta html
data:
meta:
html: GOV.UK Prototype Kit <strong>v7.0.1</strong>
- name: with meta item attributes
data:
meta:
items:
- href: '#1'
text: meta item 1
attributes:
data-attribute: my-attribute
data-attribute-2: my-attribute-2
- name: with empty navigation
data:
navigation: []
- name: with navigation item attributes
data:
navigation:
-
items:
- href: '#1'
text: Navigation item 1
attributes:
data-attribute: my-attribute
data-attribute-2: my-attribute-2
- name: welsh language
data:
language: cy
- name: with params common to govuk footer
data:
classes: app-footer--custom-modifier
containerClasses: app-width-container
attributes:
data-test-attribute: value
data-test-attribute-2: value-2
meta:
html: GOV.UK Prototype Kit <strong>v7.0.1</strong>
items:
- href: '#1'
text: meta item 1
attributes:
data-attribute: my-attribute
data-attribute-2: my-attribute-2
navigation:
- items:
- href: '#1'
text: Navigation item 1
attributes:
data-attribute: my-attribute
data-attribute-2: my-attribute-2