Throw ElementError when conditional content target not found

We handle these IDs internally, but in the case where somebody is coding using HTML instead of the Nunjucks macros, they still might get caught out.

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs

@@ -51,13 +51,21 @@ export class Checkboxes extends GOVUKFrontendComponent {
 
     this.$inputs.forEach(($input) => {
       const targetId = $input.getAttribute('data-aria-controls')
+      const targetElement = document.getElementById(targetId)
 
-      // Skip checkboxes without data-aria-controls attributes, or where the
-      // target element does not exist.
-      if (!targetId || !document.getElementById(targetId)) {
+      // Skip radios without data-aria-controls attributes
+      if (!targetId) {
         return
       }
 
+      // Throw if target conditional element does not exist.
+      if (!targetElement) {
+        throw new ElementError(targetElement, {
+          componentName: 'Checkboxes',
+          identifier: `.govuk-checkboxes__conditional #${targetId}`
+        })
+      }
+
       // Promote the data-aria-controls attribute to a aria-controls attribute
       // so that the relationship is exposed in the AOM
       $input.setAttribute('aria-controls', targetId)

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js

@@ -386,6 +386,21 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
           message: 'Checkboxes: <input type="checkbox"> not found'
         })
       })
+
+      it('throws when a conditional target element is not found', async () => {
+        await expect(
+          renderAndInitialise(page, 'checkboxes', {
+            params: examples['with conditional items'],
+            beforeInitialisation($module) {
+              $module.querySelector('.govuk-checkboxes__conditional').remove()
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message:
+            'Checkboxes: .govuk-checkboxes__conditional #conditional-how-contacted not found'
+        })
+      })
     })
   })
 })

packages/govuk-frontend/src/govuk/components/radios/radios.mjs

@@ -51,13 +51,21 @@ export class Radios extends GOVUKFrontendComponent {
 
     this.$inputs.forEach(($input) => {
       const targetId = $input.getAttribute('data-aria-controls')
+      const targetElement = document.getElementById(targetId)
 
-      // Skip radios without data-aria-controls attributes, or where the
-      // target element does not exist.
-      if (!targetId || !document.getElementById(targetId)) {
+      // Skip radios without data-aria-controls attributes
+      if (!targetId) {
         return
       }
 
+      // Throw if target conditional element does not exist.
+      if (!targetElement) {
+        throw new ElementError(targetElement, {
+          componentName: 'Radios',
+          identifier: `.govuk-radios__conditional #${targetId}`
+        })
+      }
+
       // Promote the data-aria-controls attribute to a aria-controls attribute
       // so that the relationship is exposed in the AOM
       $input.setAttribute('aria-controls', targetId)

packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js

@@ -335,5 +335,20 @@ describe('Radios', () => {
         message: 'Radios: <input type="radio"> not found'
       })
     })
+
+    it('throws when a conditional target element is not found', async () => {
+      await expect(
+        renderAndInitialise(page, 'radios', {
+          params: examples['with conditional items'],
+          beforeInitialisation($module) {
+            $module.querySelector('.govuk-radios__conditional').remove()
+          }
+        })
+      ).rejects.toEqual({
+        name: 'ElementError',
+        message:
+          'Radios: .govuk-radios__conditional #conditional-how-contacted not found'
+      })
+    })
   })
 })