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'
})
})
})