govuk_publishing_components 13.4.0 → 13.5.0
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/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()
|