govuk_publishing_components 13.4.0 → 13.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +4 -6
- data/app/views/govuk_publishing_components/components/docs/checkboxes.yml +32 -28
- data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb +7 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b791e221020913020d636f5b1acbb47bd8667140629053ee57af958be2b04fde
|
|
4
|
+
data.tar.gz: 92900776b5f99cde68d644cb7716bf6135eff3d07129a661838a0d469c0bc14d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 036fe97b1cb679a38f06240a1c32c46757e3b41de2c27c00343f26c8f67b900a7fff1be52d2d6da6627efb0e7fddb59542975a54d88a56603b5e2d711577550e
|
|
7
|
+
data.tar.gz: f16ad240b9048bb600a9b045868edd2921c83f1ab3700e9d420c89b8bac0196d8e538ad8e9052a21cc6e9d7fefb623c5264ff0523749b0527730e12cbec0b351
|
|
@@ -4,10 +4,7 @@
|
|
|
4
4
|
%>
|
|
5
5
|
|
|
6
6
|
<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "checkboxes" } do %>
|
|
7
|
-
<% if cb_helper.
|
|
8
|
-
<%= cb_helper.checkbox_markup(cb_helper.items[0], 0) %>
|
|
9
|
-
|
|
10
|
-
<% else %>
|
|
7
|
+
<% if cb_helper.should_have_fieldset %>
|
|
11
8
|
<% if cb_helper.heading_markup %>
|
|
12
9
|
<%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>
|
|
13
10
|
<%= cb_helper.heading_markup %>
|
|
@@ -41,12 +38,13 @@
|
|
|
41
38
|
<% end %>
|
|
42
39
|
<% end %>
|
|
43
40
|
<% end %>
|
|
44
|
-
|
|
45
41
|
<% end %>
|
|
46
42
|
<% end %>
|
|
47
43
|
<% end %>
|
|
48
|
-
|
|
49
44
|
<% end %>
|
|
50
45
|
<% end %>
|
|
46
|
+
|
|
47
|
+
<% else %>
|
|
48
|
+
<%= cb_helper.checkbox_markup(cb_helper.items[0], 0) %>
|
|
51
49
|
<% end %>
|
|
52
50
|
<% end %>
|
|
@@ -11,11 +11,8 @@ accessibility_criteria: |
|
|
|
11
11
|
- be usable with touch
|
|
12
12
|
- indicate when they have focus
|
|
13
13
|
- have correctly associated labels
|
|
14
|
-
- have a legend (see below)
|
|
15
14
|
|
|
16
15
|
Labels use the [label component](/component-guide/label).
|
|
17
|
-
|
|
18
|
-
Checkboxes in a fieldset require a legend. The text of the legend is passed using the 'heading' option. If no heading is passed, no legend is shown, which causes an accessibility error. You must pass a heading when using this component, or provide other measures to ensure accessibility.
|
|
19
16
|
examples:
|
|
20
17
|
default:
|
|
21
18
|
data:
|
|
@@ -35,6 +32,38 @@ examples:
|
|
|
35
32
|
value: "green"
|
|
36
33
|
- label: "Blue"
|
|
37
34
|
value: "blue"
|
|
35
|
+
with_a_heading_on_one_checkbox:
|
|
36
|
+
description: One checkbox does not require a fieldset and therefore does not require a legend. However, if a heading is supplied, a fieldset will be included in the component and the heading used as the legend, as shown.
|
|
37
|
+
data:
|
|
38
|
+
name: "agree"
|
|
39
|
+
heading: "Please tick the box to agree"
|
|
40
|
+
items:
|
|
41
|
+
- label: "I agree"
|
|
42
|
+
value: "agree"
|
|
43
|
+
with_custom_hint_text:
|
|
44
|
+
description: Hint text defaults to 'Select all that apply' but can be overridden with this option. Note that a hint (and a heading) is only displayed if there is more than one checkbox.
|
|
45
|
+
data:
|
|
46
|
+
name: "favourite_skittle"
|
|
47
|
+
heading: "What is your favourite skittle?"
|
|
48
|
+
hint_text: "Taste the rainbow"
|
|
49
|
+
items:
|
|
50
|
+
- label: "Red"
|
|
51
|
+
value: "red"
|
|
52
|
+
- label: "Green"
|
|
53
|
+
value: "green"
|
|
54
|
+
- label: "Blue"
|
|
55
|
+
value: "blue"
|
|
56
|
+
without_hint_text:
|
|
57
|
+
description: Hint text can be removed entirely with this option. Note that this option can be combined with the visually_hide_heading option.
|
|
58
|
+
data:
|
|
59
|
+
name: "favourite_skittle"
|
|
60
|
+
heading: "What is your favourite skittle?"
|
|
61
|
+
no_hint_text: true
|
|
62
|
+
items:
|
|
63
|
+
- label: "Mauve"
|
|
64
|
+
value: "mauve"
|
|
65
|
+
- label: "Sunset orange"
|
|
66
|
+
value: "sunsetorange"
|
|
38
67
|
with_a_hidden_heading:
|
|
39
68
|
description: If the heading/legend on the checkboxes is not required, it can be visually hidden using this option. It will still be visible to screen readers.
|
|
40
69
|
data:
|
|
@@ -71,31 +100,6 @@ examples:
|
|
|
71
100
|
id: "custom-orange-id"
|
|
72
101
|
- label: "Purple"
|
|
73
102
|
value: "purple"
|
|
74
|
-
with_custom_hint_text:
|
|
75
|
-
description: Hint text defaults to 'Select all that apply' but can be overridden with this option. Note that a hint (and a heading) is only displayed if there is more than one checkbox.
|
|
76
|
-
data:
|
|
77
|
-
name: "favourite_skittle"
|
|
78
|
-
heading: "What is your favourite skittle?"
|
|
79
|
-
hint_text: "Taste the rainbow"
|
|
80
|
-
items:
|
|
81
|
-
- label: "Red"
|
|
82
|
-
value: "red"
|
|
83
|
-
- label: "Green"
|
|
84
|
-
value: "green"
|
|
85
|
-
- label: "Blue"
|
|
86
|
-
value: "blue"
|
|
87
|
-
without_hint_text:
|
|
88
|
-
description: Hint text can be removed entirely with this option. Note that this option can be combined with the visually_hide_heading option, as shown.
|
|
89
|
-
data:
|
|
90
|
-
name: "favourite_skittle"
|
|
91
|
-
heading: "What is your favourite skittle?"
|
|
92
|
-
visually_hide_heading: true
|
|
93
|
-
no_hint_text: true
|
|
94
|
-
items:
|
|
95
|
-
- label: "Mauve"
|
|
96
|
-
value: "mauve"
|
|
97
|
-
- label: "Sunset orange"
|
|
98
|
-
value: "sunsetorange"
|
|
99
103
|
with_legend_as_page_heading:
|
|
100
104
|
description: Since the legend/heading is required, if the checkboxes are alone on a page it makes sense to use this element as the H1 on the page rather than duplicate text.
|
|
101
105
|
data:
|
|
@@ -18,13 +18,19 @@ module GovukPublishingComponents
|
|
|
18
18
|
@has_nested = options[:items].any? { |item| item.is_a?(Hash) && item[:items] }
|
|
19
19
|
|
|
20
20
|
@id = options[:id] || "checkboxes-#{SecureRandom.hex(4)}"
|
|
21
|
-
@heading = options[:heading]
|
|
21
|
+
@heading = options[:heading] || nil
|
|
22
22
|
@is_page_heading = options[:is_page_heading]
|
|
23
23
|
@no_hint_text = options[:no_hint_text]
|
|
24
24
|
@hint_text = options[:hint_text] || "Select all that apply." unless @no_hint_text
|
|
25
25
|
@visually_hide_heading = options[:visually_hide_heading]
|
|
26
26
|
end
|
|
27
27
|
|
|
28
|
+
# should have a fieldset if there's a heading, or if more than one checkbox
|
|
29
|
+
# separate check is in the view for if more than one checkbox and no heading, in which case fail
|
|
30
|
+
def should_have_fieldset
|
|
31
|
+
@items.length > 1 || @heading
|
|
32
|
+
end
|
|
33
|
+
|
|
28
34
|
def fieldset_describedby
|
|
29
35
|
unless @no_hint_text
|
|
30
36
|
text = %w()
|