Formatting and content tweaks

alphagov · Sep 20, 2023 · 48903c5 · 48903c5
1 parent 343ffe7
commit 48903c5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -33,7 +33,7 @@ export class Checkboxes extends GOVUKFrontendComponent {
     if (!($module instanceof HTMLElement)) {
       throw new ElementError($module, {
         componentName: 'Checkboxes',
-        identifier: '$module'
+        identifier: `[data-module="${Checkboxes.moduleName}"]`
       })
     }
 
@@ -42,7 +42,7 @@ export class Checkboxes extends GOVUKFrontendComponent {
     if (!$inputs.length) {
       throw new ElementError(null, {
         componentName: 'Checkboxes',
-        identifier: '<input type="checkbox">'
+        identifier: 'input[type="checkbox"]'
       })
     }
 
@@ -51,18 +51,17 @@ export class Checkboxes 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
       if (!targetId) {
         return
       }
 
       // Throw if target conditional element does not exist.
-      if (!targetElement) {
-        throw new ElementError(targetElement, {
+      if (!document.getElementById(targetId)) {
+        throw new ElementError(null, {
           componentName: 'Checkboxes',
-          identifier: `.govuk-checkboxes__conditional #${targetId}`
+          identifier: `#${targetId}`
         })
       }
 

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.puppeteer.test.js
@@ -350,7 +350,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
           })
         ).rejects.toEqual({
           name: 'ElementError',
-          message: 'Checkboxes: $module not found'
+          message: 'Checkboxes: [data-module="govuk-checkboxes"] not found'
         })
       })
 
@@ -365,7 +365,8 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
           })
         ).rejects.toEqual({
           name: 'ElementError',
-          message: 'Checkboxes: $module is not an instance of "HTMLElement"'
+          message:
+            'Checkboxes: [data-module="govuk-checkboxes"] is not an instance of "HTMLElement"'
         })
       })
 
@@ -383,7 +384,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
           })
         ).rejects.toEqual({
           name: 'ElementError',
-          message: 'Checkboxes: <input type="checkbox"> not found'
+          message: 'Checkboxes: input[type="checkbox"] not found'
         })
       })
 
@@ -397,8 +398,7 @@ describe('Checkboxes with multiple groups and a "None" checkbox and conditional
           })
         ).rejects.toEqual({
           name: 'ElementError',
-          message:
-            'Checkboxes: .govuk-checkboxes__conditional #conditional-how-contacted not found'
+          message: 'Checkboxes: #conditional-how-contacted not found'
         })
       })
     })

diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -33,7 +33,7 @@ export class Radios extends GOVUKFrontendComponent {
     if (!($module instanceof HTMLElement)) {
       throw new ElementError($module, {
         componentName: 'Radios',
-        identifier: '$module'
+        identifier: `[data-module="${Radios.moduleName}"]`
       })
     }
 
@@ -42,7 +42,7 @@ export class Radios extends GOVUKFrontendComponent {
     if (!$inputs.length) {
       throw new ElementError(null, {
         componentName: 'Radios',
-        identifier: '<input type="radio">'
+        identifier: 'input[type="radio"]'
       })
     }
 
@@ -51,18 +51,17 @@ 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
       if (!targetId) {
         return
       }
 
       // Throw if target conditional element does not exist.
-      if (!targetElement) {
-        throw new ElementError(targetElement, {
+      if (!document.getElementById(targetId)) {
+        throw new ElementError(null, {
           componentName: 'Radios',
-          identifier: `.govuk-radios__conditional #${targetId}`
+          identifier: `#${targetId}`
         })
       }
 

diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/radios/radios.puppeteer.test.js
@@ -301,7 +301,7 @@ describe('Radios', () => {
         })
       ).rejects.toEqual({
         name: 'ElementError',
-        message: 'Radios: $module not found'
+        message: 'Radios: [data-module="govuk-radios"] not found'
       })
     })
 
@@ -316,7 +316,8 @@ describe('Radios', () => {
         })
       ).rejects.toEqual({
         name: 'ElementError',
-        message: 'Radios: $module is not an instance of "HTMLElement"'
+        message:
+          'Radios: [data-module="govuk-radios"] is not an instance of "HTMLElement"'
       })
     })
 
@@ -332,7 +333,7 @@ describe('Radios', () => {
         })
       ).rejects.toEqual({
         name: 'ElementError',
-        message: 'Radios: <input type="radio"> not found'
+        message: 'Radios: input[type="radio"] not found'
       })
     })
 
@@ -346,8 +347,7 @@ describe('Radios', () => {
         })
       ).rejects.toEqual({
         name: 'ElementError',
-        message:
-          'Radios: .govuk-radios__conditional #conditional-how-contacted not found'
+        message: 'Radios: #conditional-how-contacted not found'
       })
     })
   })