WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#22643 closed defect (bug) (fixed)

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

Reported by: dllh Owned by: ryan
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: General Keywords: has-patch commit
Focuses: Cc:

Description

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; } 

Attachments (4)

admin-bar.css.patch (279 bytes) - added by dllh 8 years ago.
CSS fix
adminbar.png (36.4 KB) - added by dllh 8 years ago.
The issue rears its ugly head
22643.diff (327 bytes) - added by lessbloat 8 years ago.
Just updated patch from /
22643-2.patch (638 bytes) - added by azaozz 8 years ago.

Download all attachments as: .zip

Change History (10)

@dllh
8 years ago

CSS fix

@dllh
8 years ago

The issue rears its ugly head

#1 @dllh
8 years ago

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

#2 @azaozz
8 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.5
  • Version set to trunk

@lessbloat
8 years ago

Just updated patch from /

#3 @azaozz
8 years ago

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
8 years ago

#4 @azaozz
8 years ago

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

#5 @koopersmith
8 years ago

  • Keywords commit added

Great.

#6 @ryan
8 years ago

  • Owner set to ryan
  • Resolution set to fixed
  • Status changed from new to closed

In 22941:

Remove focus outline from admin bar elements.

Props azaozz, lessbloat, dllh
fixes #22643

Note: See TracTickets for help on using tickets.