Accessibility issue: invisible skip link

[scoutb-cogapp]

UV version: [email protected]

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

"skip to downloads" link at top of page

Issue description

There is a link on top of the page enabling users to skip to the downloads and alternative formats section at the bottom of the image viewer. When this link is accessed by keyboard it remains invisible. A keyboard user won't know where focus has moved.

Steps to reproduce

1. open this manifest
2. tab to the first item in the tab order (first item button), then tab backwards
3. observe that no link has become visible and no focus highlight is applied to any element

Expected behaviour

The link becomes visible and receives focus when it is accessed by keyboard

WCAG criterion

2.4.7 Focus Visible (Level AA)

Related code

<a class="sr-only" href="#download-btn">Skip to downloads and alternative formats</a>

[damodeburca]

@demiankatz Looks good to me 👍and the link brings the user to the download button with focus. Perhaps as a separate discussion we could agree the order of focus as the user tabs with the keyboard - currently it goes to the first item 'box' - I guess thats correct.

[demiankatz]

Thanks, @damodeburca. Regarding focus order, there are quite a few other open issues addressing various aspects of the order; it's probably simplest to resolve this first and then discuss further as we work through those other items.