Clarify Skip link URL error with href= attribute value

Some pages can have multiple Skip link components and our error messages don’t explain which one has the problem The error message now includes the exact `getAttribute('href')` HTML attribute value to help identify the invalid link
alphagov · Dec 7, 2023 · e2163d3 · e2163d3
1 parent 158d9f5
commit e2163d3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs
@@ -37,12 +37,15 @@ export class SkipLink extends GOVUKFrontendComponent {
 
     this.$module = $module
 
-    const linkedElementId = getFragmentFromUrl(this.$module.hash)
+    const hash = this.$module.hash
+    const href = this.$module.getAttribute('href') ?? ''
+
+    const linkedElementId = getFragmentFromUrl(hash)
 
     // Check for link hash fragment
     if (!linkedElementId) {
       throw new ElementError(
-        'Skip link: Root element (`$module`) attribute (`href`) has no URL fragment'
+        `Skip link: Target link (\`href="${href}"\`) has no hash fragment`
       )
     }
 

diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.puppeteer.test.js
@@ -144,7 +144,7 @@ describe('Skip Link', () => {
         cause: {
           name: 'ElementError',
           message:
-            'Skip link: Root element (`$module`) attribute (`href`) has no URL fragment'
+            'Skip link: Target link (`href="this-element-does-not-exist"`) has no hash fragment'
         }
       })
     })