From e2163d39e68deef5190763f54ae7d46ca2ccd108 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 6 Dec 2023 15:15:28 +0000
Subject: [PATCH] Clarify Skip link URL error with `href=` attribute value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../src/govuk/components/skip-link/skip-link.mjs           | 7 +++++--
 .../govuk/components/skip-link/skip-link.puppeteer.test.js | 2 +-
 2 files changed, 6 insertions(+), 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
index 82a22bfcf0..e38d739d86 100644
--- 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
index 55b0ae2ce6..51f54a3f23 100644
--- 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'
         }
       })
     })