Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#33808 closed defect (bug) (fixed)

Use the circular focus style in more places

Reported by: helen's profile helen Owned by: helen's profile helen
Milestone: 4.4 Priority: low
Severity: normal Version: 4.3
Component: General Keywords: needs-patch
Focuses: ui, accessibility, administration Cc:

Description

In the last release or two we've introduced a really slick circular focus style for focusable items that are represented with an icon, but didn't apply it to all existing spots. We should sweep through the admin and implement it where it makes sense.

Circular: http://s.hyhs.me/d4Zr/image.png

Not circular: http://s.hyhs.me/d48g/image.png

Attachments (1)

33808.patch (2.0 KB) - added by grvrulz 10 years ago.
Adds circular focus style to arrows on dashboard widgets, post edit metaboxes, nav-menus, and widgets.

Download all attachments as: .zip

Change History (14)

#1 @joedolson
10 years ago

Can you point out a specific spot where this is used or the class used to call it?

#2 @wonderboymusic
10 years ago

  • Owner set to helen
  • Status changed from new to assigned

@grvrulz
10 years ago

Adds circular focus style to arrows on dashboard widgets, post edit metaboxes, nav-menus, and widgets.

#3 follow-up: @grvrulz
10 years ago

  • Keywords has-patch added; needs-patch removed

Although this patch adds the circular focus style in all the places I could find, the css looks like a mess with stuff all over the place. Maybe we need a common pattern and shared css for these kind of expandable boxes.

#4 in reply to: ↑ 3 @helen
10 years ago

Replying to grvrulz:

Thanks for the patch, will take a look.

the css looks like a mess with stuff all over the place. Maybe we need a common pattern and shared css for these kind of expandable boxes.

Believe me, that's known. https://make.wordpress.org/core/2014/12/19/core-css-roadmap/

#5 @helen
10 years ago

@grvrulz Patch looks good around the admin, though the focus style should be applied to the same element as the icon instead of making buttons/links smaller than they were. Seems like the customizer needs work too, which I've already started to dig into so I'll finish that up as well.

Last edited 10 years ago by helen (previous) (diff)

#6 @helen
10 years ago

In 35200:

Circular focus styling for expand/collapse arrows.

Affects postboxes, widgets, and nav menus, all in the admin.

props grvrulz for the initial patch.
see #33808.

#7 @helen
10 years ago

In 35201:

Box shadows still need -webkit-, turns out.

see #33808, [35200].

#8 follow-up: @grvrulz
10 years ago

@helen Thanks for linking to the roadmap, it's an interesting read.

Also, Re: -webkit, I haven't delved into this deeply, but don't we have an autoprefixer in the build script?

#9 in reply to: ↑ 8 @helen
10 years ago

Replying to grvrulz:

Also, Re: -webkit, I haven't delved into this deeply, but don't we have an autoprefixer in the build script?

It's not in build, we run it precommit and I neglected to do so this time.

#10 @helen
10 years ago

In 35207:

Circular focus styling for widgets and menus in the customizer.

see #33808.

#11 @helen
10 years ago

  • Keywords needs-patch added; has-patch removed

Leaving this open because the text-indent: -1px thing doesn't work in RTL. Not sure if that's something that RTLCSS really should handle, since people use it for hiding text and such, so probably just need to add some specific rules ourselves.

#12 @helen
10 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 35215:

Account for icon alignment using text-indent in RTL.

fixes #33808.

#13 @helen
9 years ago

In 35721:

Postbox handle buttons don't need a focus outline.

see #33808, #34242.

Note: See TracTickets for help on using tickets.