diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs index 0eacc6ac60..f7555a5337 100644 --- 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: '' + identifier: 'input[type="checkbox"]' }) } @@ -51,7 +51,6 @@ 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) { @@ -59,10 +58,10 @@ export class Checkboxes extends GOVUKFrontendComponent { } // 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 index 069e5737be..21e0b9377c 100644 --- 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: 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 index f8dd163384..38e8c1d516 100644 --- 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: '' + identifier: 'input[type="radio"]' }) } @@ -51,7 +51,6 @@ 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) { @@ -59,10 +58,10 @@ export class Radios extends GOVUKFrontendComponent { } // 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 index b14912ec85..c4a8848b16 100644 --- 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: 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' }) }) })