Prevent duplicate checkbox aria-describedby

Fixes alphagov#1248

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: |
           <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
           <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
-  
+
 - name: with optional form-group classes showing group error
   data:
     idPrefix: how-contacted-checked

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 %}
     <div class="govuk-checkboxes__item">
       <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {#- fieldset is false by default -#}
-      {%- if (not hasFieldset) and ((describedBy | length) > 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 %}
     </div>
     {% if item.conditional %}
       <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">

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')
+    })
+  })
 })