Overview

During manual accessibility testing for the Exit this Page component, we uncovered two potential bugs related to the 'skip link'.

The plan is to investigate these issues at the 'skip link' level, and adopt any changes made into the Exit this Page secondary link.

Issue 2 is covered by this GitHub issue, and issue 1 is covered in the following issue:

• Skip link doesn't become visible when receiving focus from VoiceOver on iOS or iPadOS  #4098

Description of the issue

When navigating via keyboard tabbing while using Windows High Contrast Mode, the skip link's focus outline gets clipped outside of the viewport on the top, left and right sides. Only the bottom outline is visible.

Steps to reproduce the issue

1. Use a Windows computer to navigate to the GOV.UK Design System homepage in Chrome
2. Turn on Windows High Contrast mode, using any of the default colour options
3. From the homepage, tab to the skip link
4. Note whether the top and side focus outlines are clipped outside of the viewport and therefore not visible

Actual vs expected behaviour

We would expect a complete focus outline around the full skip link area.
Instead, the focus outline is only visible on one side: the bottom of the skip link area.

Here's a screenshot of:

• Windows with High Contrast Mode on one of the default colour themes
• A Chrome tab opened to the GOV.UK Design System homepage
• Keyboard focus on the skip link element, which is now visible
  

Environment (where applicable)

• Operating system: Windows
• Browser: Chrome (but any browser would work)
• Browser version: Anything less than a year old
• GOV.UK Frontend Version: 4.7.0