Fix skip link outline being clipped in forced colours mode #6445
+5 −0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6445 
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css index 741b02be4..8ef16de92 100644 --- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css +++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css @@ -5242,6 +5242,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 0dcfb5b |
Other changes to npm packagediff --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 0dcfb5b |
📋 StatsFile sizes
No changes to module sizes. Action run for 0dcfb5b |
querkmachine force-pushed the fix-skiplink-high-contrast-outline branch from 420dfe1 to 777ecef Compare govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6445 querkmachine force-pushed the fix-skiplink-high-contrast-outline branch from 777ecef to d5f50df Compare govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6445 querkmachine force-pushed the fix-skiplink-high-contrast-outline branch from d5f50df to d6ab69f Compare govuk-design-system-ci temporarily deployed to govuk-frontend-pr-6445 
As skiplinks are usually present right at the top of the viewport and at full width, the outline style we apply to links in forced-colors mode is clipped on three of the four sides. This commit changes the outline-offset in forced-colors so that it is visible within the bounds of the skip link.
querkmachine force-pushed the fix-skiplink-high-contrast-outline branch from d6ab69f to 0dcfb5b Compare Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
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
outline-offsetwhen forced-colors mode is active, so that the outline is visibly rendered within the bounds of the skip link.Screenshots