Opened 12 years ago
Closed 12 years ago
#22643 closed defect (bug) (fixed)
Tabindex on admin bar quicklinks has an outline on focus in webkit browsers
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 3.5 | Priority: | normal |
Severity: | normal | Version: | 3.5 |
Component: | General | Keywords: | has-patch commit |
Focuses: | Cc: |
Description
Steps:
- 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).
- 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)
Change History (10)
#1
@
12 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
@
12 years ago
- Keywords has-patch added
- Milestone changed from Awaiting Review to 3.5
- Version set to trunk
#3
@
12 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.
CSS fix