Tabindex on admin bar quicklinks has an outline on focus in webkit browsers

[dllh]

Steps:

1. Install Jetpack or some plugin that adds to the admin bar a menu item whose click doesn't navigate away from the page (Jetpack's notifications do this).
2. Click the menu item.

Actual: On Chrome/Safari on the Mac, a blue outline appears around some of the elements in the admin bar. On the PC, the outline is orange, but the issue's still htere.

Expected: No outline.

This is the result of the tabindex of 0 on #wp-toolbar, which causes the whole admin bar to be focusable. The tabindex is needed for accessibility reasons.

@azaozz suggested the following CSS, which does seem to clear the issue up:

div:focus, a:focus { outline: 0; } 

[dllh]

CSS fix

[dllh]

The issue rears its ugly head

[dllh]

I've added an image depicting the issue and a patch that works but probably lands the CSS in the wrong place.

[lessbloat]

Just updated patch from /

[azaozz]

Patch looks good. We should be disabling any outlines in the toolbar like we do in admin menu. Perhaps can add all elements that get outlines by default in WebKit, i.e. all form elements.

[azaozz]

22643-2.patch​ adds all form elements as plugins may be adding some of them and makes the selectors toolbar specific.

[koopersmith]

Great.

[ryan]

In 22941:

Remove focus outline from admin bar elements.

Props azaozz, lessbloat, dllh
fixes #22643