Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#22643 closed defect (bug) (fixed)

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

Reported by: dllh's profile dllh Owned by: ryan's profile 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 11 years ago.
CSS fix
adminbar.png (36.4 KB) - added by dllh 11 years ago.
The issue rears its ugly head
22643.diff (327 bytes) - added by lessbloat 11 years ago.
Just updated patch from /
22643-2.patch (638 bytes) - added by azaozz 11 years ago.

Download all attachments as: .zip

Change History (10)

@dllh
11 years ago

CSS fix

@dllh
11 years ago

The issue rears its ugly head

#1 @dllh
11 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
11 years ago

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

@lessbloat
11 years ago

Just updated patch from /

#3 @azaozz
11 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
11 years ago

#4 @azaozz
11 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
11 years ago

  • Keywords commit added

Great.

#6 @ryan
11 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.