Add example for checkboxes with error message and hints on items

The fieldset has the `aria-describedby` so we don’t need it on the input

src/components/checkboxes/checkboxes.yaml

@@ -268,6 +268,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

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: {