Back to top link fails 2.4.11 Focus Not Obscured (Minimum)

[selfthinker]

The Back to top link component in government-frontend fails 2.4.11 Focus Not Obscured (Minimum).

Note: 2.4.11 is part of the new draft WCAG 2.2 criteria. The latest standard is WCAG 2.1. WCAG 2.2 isn't published yet, so this is potentially subject to change.

As mentioned by Andy Sellick in his 2018 blog post ‘Sticky elements: functionality and accessibility testing’, content can be obscured by a sticky element. 2.4.11 is specifically about focus that shouldn’t be obscured.

There was an effort with this component to minimise that already as the sticky ‘Contents’ link only appears when scrolling the page but not when only tabbing through the page. Although that fixes some of the issue, that doesn’t mean that the focus never gets obscured. The sticky link still appears when scrolling via the keyboard (for example, with the arrow keys) or when accidentally scrolling with the mouse or touchpad only for a second.

To replicate, open the preview of the 'Contents list with body' component, tab to the last link (‘Commencement of initial period notice’), scroll the page via the up arrow key so that the link is obscured, use tab and shift + tab to go back and forth to see how you can tab to a link that isn’t visible.

Screenshot of the issue (note that the focus is not completely obscured to make the issue more visible but it can be):

[jon-kirwan]

Transferring this to Government Frontend since the 'Back to top link' component belongs there, not in this repository.