Global styles conflict with skip link component

[MatMoore]

Description of the issue

When $govuk-global-styles is set to true in Sass, the underline is missing from skip links.

$govuk-global-styles applies govuk-focus-text to all links, which removes underline and adds box-shadow.

But the skip link component removes box shadow in this case, without adding back in the underline.

We are using global styles because our service contains some content that is rendered from markdown, and we cannot easily apply the proper classes to the generated HTML.

To get the underline I need to manually add some extra CSS.

Steps to reproduce the issue

• Compile the GOV.UK frontend Sass with $govuk-global-styles set to true
• View a page with a skip link
• Navigate to the skip link by keyboard

Actual vs expected behaviour

Actual - no underline

Expected

Environment (where applicable)

• Operating system: MacOS
• Browser: Chrome
• Browser version: 123.0.6312.59
• GOV.UK Frontend Version: 5.1.0

[github-actions]

Uh oh! @MatMoore, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[querkmachine]

Thanks for bringing this to our attention @MatMoore! 😺