[A11Y] Skip to content link not visible on keyboard focus

[israelcefrin]

Issue Description

Every "skip to..." link is not visible on the screen when it has keyboard focus. Keyboard users navigate through the operable elements on the page by pressing the Tab key. All sighted keyboard users (and those relying on the keyboard interface, such as voice-command and switch users) need to be able to see the element that has keyboard focus, otherwise, they have no context about where they are or what to do.

How to reproduce / Current behavior

1. Access the homepage of a Journal using Immersion theme
2. Press TAB key a few times until reach the main menu
3. Notice that you have passed the skip to links and they haven't become visible

What application are you using?

OJS version 3.4

Stack

• Device: Laptop
• OS: MacOS Sequoia
• Browser: chrome

Testing method

• Method: Manual, Keyboard

Action

Ensure that the links of skip to component turns visible on screen when it has keyboard focus. It can be done using the :focus pseudo-class to change the visual behaviour of the element.

Additional information