Add Skip link/Bypass block

[dylanhthomas]

This resolves the missing skip link issue. If you navigate to any page, the link will be invisible. If you hit tab one time, you will see the below link. If you tab again, it will disappear. If you click or hit enter on the link, the focus will jump to the next focusable link in the main section.

[dylanhthomas]

should close #5023

[mariannk]

Hi @dylanhthomas,

I'm testing your solution and when I click "Enter" on the added link it doesn't jump to the main content block. Am I missing anything?

[dylanhthomas]

You need to hit 'tab' again to select the next link. the link moves the focus to the div (which isn't focusable) This is the expected behavior.

There is a bit of an issue testing on the homepage, since the nivo slider has it's own focus styles and does not inherit from the main stylesheet (I will be fixing this in the future).

I've attached a video demoing on the homepage and an internal page.

Let me know if I can help more or if this does the trick.

https://youtu.be/6UAPDHVLrxU

[mariannk]

@dylanhthomas I recorded a video from my PC to show you that for some reasons it doesn't work for me https://youtu.be/bdyX0X-quQo

[RomanovM]

Thanks. We've used your suggestion in this commit.