Merge pull request #1265 from colinrotherham/duplicate-single-checkbo…

…x-aria

Prevent duplicate checkbox aria-describedby

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
@@ -268,6 +279,28 @@ examples:
       - value: farm
         text: Farm or agricultural waste
 
+- name: with error message and hints on items
+  data:
+    name: waste
+    errorMessage:
+      text: Please select an option
+    fieldset:
+      legend:
+        text: Which types of waste do you transport regularly?
+    items:
+      - value: animal
+        text: Waste from animal carcasses
+        hint:
+          text: Nullam id dolor id nibh ultricies vehicula ut id elit.
+      - value: mines
+        text: Waste from mines or quarries
+        hint:
+          text: Nullam id dolor id nibh ultricies vehicula ut id elit.
+      - value: farm
+        text: Farm or agricultural waste
+        hint:
+          text: Nullam id dolor id nibh ultricies vehicula ut id elit.
+
 - name: with very long option text
   data:
     name: waste
@@ -358,7 +391,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

@@ -54,15 +54,15 @@
     {% set name = item.name if item.name else params.name %}
     {% set conditionalId = "conditional-" + id %}
     {% set hasHint = true if item.hint.text or item.hint.html %}
-    {% set itemHintId = id + '-item-hint' %}
+    {% set itemHintId = id + "-item-hint" if hasHint else "" %}
+    {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+    {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | 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 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

@@ -531,6 +531,17 @@ describe('Checkboxes', () => {
         .toMatch(errorMessageId)
     })
 
+    it('does not associate each input as "described by" the error message', () => {
+      const $ = render('checkboxes', examples['with error message and hints on items'])
+
+      const $inputs = $('input')
+
+      $inputs.each((i, input) => {
+        expect($(input).attr('aria-describedby'))
+          .toEqual(`waste-${(i + 1)}-item-hint`)
+      })
+    })
+
     it('renders with a form group wrapper that has an error state', () => {
       const $ = render('checkboxes', {
         errorMessage: {
@@ -645,10 +656,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')
+    })
+  })
 })