Merge pull request #1054 from alphagov/single-field-error-describeby

Single field with error should have 'aria-describeby' attribute

CHANGELOG.md

@@ -28,6 +28,15 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Single field with error should have 'aria-describeby' attribute
+
+  Although we discourage using checkboxes without fieldsets, this fix
+  ensures that if there are no fieldset then the aria-describeby will
+  still be usable by screenreaders by adding the element ids to the checkbox
+  input elements 'aria-describeby' attribute.
+
+  ([PR #1054](https://github.com/alphagov/govuk-frontend/pull/1054))
+
 ## 2.3.0 (Feature release)
 
 🆕 New features:

src/components/checkboxes/checkboxes.yaml

@@ -220,6 +220,16 @@ examples:
       - value: blue
         text: Blue
 
+- name: with single option set 'aria-describeby' on input
+  readme: false
+  data:
+    name: t-and-c
+    errorMessage:
+      text: Please accept the terms and conditions
+    items:
+      - value: yes
+        text: I agree to the terms and conditions
+
 - name: with all fieldset attributes
   data:
     idPrefix: example

src/components/checkboxes/template.njk

@@ -18,6 +18,9 @@
   {% endif %}
 {% endfor %}
 
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else false %}
+
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
 {% if params.hint %}
@@ -54,6 +57,8 @@
       <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 -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>

src/components/checkboxes/template.test.js

@@ -643,4 +643,12 @@ describe('Checkboxes', () => {
       expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot()
     })
   })
+
+  describe('single checkbox without a fieldset', () => {
+    it('adds aria-describe to input if there is an error', () => {
+      const $ = render('checkboxes', examples["with single option set 'aria-describeby' on input"])
+      const $input = $('input')
+      expect($input.attr('aria-describedby')).toMatch('t-and-c-error')
+    })
+  })
 })