Add "Skip to toolbar" accessibility shortcut

[azaozz]

The toolbar HTML is outputted in different places for different screens. It's at the bottom on the front-end and on some admin screens, or after the admin menu on other.

To improve accessibility it would need a "skip to" link similar to the "Skip to content" link. Some ​more info.

In [21423]:

Add "Skip to toolbar" accessibility shortcut, see #21471

In [21435]:

Accessibility: fix the Skip to content link, show it on :focus, improve the styling of the skip links when shown, see #21310, see #21471

In [21465]:

Fix .screen-reader-text in RTL, see #21471

Worked great in FF. When I test the "Skip to toolbar" link in Chrome, I get:

Actual:

1) Tab to "Skip to toolbar"
2) Click enter on keyboard
3) Tabbing order resets, and next tab shows "Skip to main content"

Expected:

1) Tab to "Skip to toolbar"
2) Click enter on keyboard
3) Tabbing jumps to toolbar, and next tab focuses on WordPress logo.

In the UI chat, @azaozz mentioned this is a bug in Chrome... :-)

Yes @azaozz is correct - this is a bug in Chrome (and all webkit browsers I believe) and should have been fixed a long time ago. To ensure it works in Chrome it is necessary to force focus to move using javascript.

Looks like there are two things left here:

• Fix bug in Chrome.

• Review the design here.

Design looks good to me. Fixed Chrome/Safari bug (for 'Skip to toolbar' and 'Skip to main content') in 21471.2.diff.

Note: Looks like webkit browsers need tabindex='0' added to div's in order to focus on them. In addition, I found it necessary to add a slight delay before setting the focus.

Took a crack at adding some style to the skip button in 21471.3.diff:

In [22249]:

Accessibility shortcuts: new looks and fix for the WebKit focus bug, props lessbloat, fixes #21471