Prevent duplicate checkbox aria-describedby

Fixes alphagov#1248

CHANGELOG.md

@@ -28,6 +28,12 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Prevent duplicate checkbox aria-describedby
+
+  Addresses an edge case where a checkbox with a hint (but without a fieldset) is output with duplicate `aria-describeby` attributes. Fixes issue ([PR #1248](https://github.com/alphagov/govuk-frontend/pull/1248))
+
+  ([PR #1265](https://github.com/alphagov/govuk-frontend/pull/1265))
+
 ## 2.9.0 (Feature release)
 
 🆕 New features:

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

@@ -55,14 +55,14 @@
     {% set conditionalId = "conditional-" + id %}
     {% set hasHint = true if item.hint.text or item.hint.html %}
     {% set itemHintId = id + '-item-hint' %}
+    {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+    {% set itemDescribedBy = (describedBy + " " + itemHintId) | trim if hasHint else itemDescribedBy %}
     <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 item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-      {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+      {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
       {{ govukLabel({
         html: item.html,

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