diff --git a/src/components/checkboxes/checkboxes.yaml b/src/components/checkboxes/checkboxes.yaml
index 5e2bccc992..cd18004f7a 100644
--- a/src/components/checkboxes/checkboxes.yaml
+++ b/src/components/checkboxes/checkboxes.yaml
@@ -229,6 +229,17 @@ examples:
- value: yes
text: I agree to the terms and conditions
+- name: with single option (and hint) set 'aria-describedby' on input
+ data:
+ name: t-and-c-with-hint
+ errorMessage:
+ text: Please accept the terms and conditions
+ items:
+ - value: yes
+ text: I agree to the terms and conditions
+ hint:
+ text: Go on, you know you want to!
+
- name: with all fieldset attributes
data:
idPrefix: example
@@ -358,7 +369,7 @@ examples:
html: |
-
+
- name: with optional form-group classes showing group error
data:
idPrefix: how-contacted-checked
diff --git a/src/components/checkboxes/template.njk b/src/components/checkboxes/template.njk
index e61ffe3bc9..70e0886720 100644
--- a/src/components/checkboxes/template.njk
+++ b/src/components/checkboxes/template.njk
@@ -24,9 +24,6 @@
{% endif %}
{% endfor %}
-{#- fieldset is false by default -#}
-{%- set hasFieldset = true if params.fieldset else false -%}
-
{% call govukFormGroup({
id: idPrefix,
fieldset: params.fieldset,
@@ -44,14 +41,14 @@
{% set conditionalId = "conditional-" + id %}
{% set hasHint = true if item.hint.text or item.hint.html %}
{% set itemHintId = id + '-item-hint' %}
+ {% set itemDescribedBy = (describedBy + ' ' + itemHintId if hasHint else describedBy) | trim %}
0) %} aria-describedby="{{ describedBy }}"{% endif -%}
+ {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
- {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ govukLabel({
html: item.html,
@@ -68,7 +65,7 @@
html: item.hint.html,
text: item.hint.text
}) | indent(6) | trim }}
- {%- endif %}
+ {% endif %}
{% if item.conditional %}
diff --git a/src/components/checkboxes/template.test.js b/src/components/checkboxes/template.test.js
index ed04f4fdcd..8b05992ebb 100644
--- a/src/components/checkboxes/template.test.js
+++ b/src/components/checkboxes/template.test.js
@@ -645,10 +645,18 @@ describe('Checkboxes', () => {
})
describe('single checkbox without a fieldset', () => {
- it('adds aria-describe to input if there is an error', () => {
+ it('adds aria-describedby to input if there is an error', () => {
const $ = render('checkboxes', examples["with single option set 'aria-describedby' on input"])
const $input = $('input')
expect($input.attr('aria-describedby')).toMatch('t-and-c-error')
})
})
+
+ describe('single checkbox (with hint) without a fieldset', () => {
+ it('adds aria-describedby to input if there is an error and a hint', () => {
+ const $ = render('checkboxes', examples["with single option (and hint) set 'aria-describedby' on input"])
+ const $input = $('input')
+ expect($input.attr('aria-describedby')).toMatch('t-and-c-with-hint-error t-and-c-with-hint-1-item-hint')
+ })
+ })
})