Fix skip link outline being clipped in forced colours mode

[querkmachine]

As skiplinks are typically displayed at the top of the viewport and at full width, the outline style we apply to links in forced-colors mode is clipped on all sides except for the bottom, making it more difficult to see that the link is currently focused.

Fixes #4100.

Changes

• Adds a negative outline-offset when forced-colors mode is active, so that the outline is visibly rendered within the bounds of the skip link.

Screenshots

Before	After

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 2f6332e72..c48c58083 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -5243,6 +5243,12 @@ screen and (forced-colors:active) {
     background-color: var(--_govuk-focus-colour, #fd0)
 }
 
+@media (forced-colors:active) {
+    .govuk-skip-link:focus {
+        outline-offset: -3px
+    }
+}
+
 .govuk-skip-link-focused-element:focus {
     outline: none
 }

---

Action run for 2916d94

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss b/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
index 29de7864f..bfefeee4f 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
@@ -24,6 +24,10 @@
       outline-offset: 0;
       background-color: govuk-functional-colour(focus);
 
+      @media (forced-colors: active) {
+        outline-offset: (0 - $govuk-focus-width);
+      }
+
       // Undo unwanted changes when global styles are enabled
       @if $govuk-global-styles {
         @include govuk-link-decoration;

---

Action run for 2916d94

[github-actions]

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	125.43 KiB	0.1%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	125.41 KiB	0.1%

No changes to module sizes.

---

Action run for 2916d94

[domoscargin]

Looks like we've picked up a stray changelog entry here?

[querkmachine]

It's GONE

[domoscargin]

It is! But I think we've now got some extra service nav stuff

[romaricpascal]

Neat little fix 🙌🏻

[domoscargin]

Just popping this in here so we don't merge before we shift the service nav hidden stuff out of this PR