Use the circular focus style in more places

[helen]

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:

Not circular:

[joedolson]

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

[grvrulz]

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

[grvrulz]

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.

[helen]

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/

[helen]

@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.

[helen]

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.

[helen]

In 35201:

Box shadows still need -webkit-, turns out.

see #33808, [35200].

[grvrulz]

@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?

[helen]

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.

[helen]

In 35207:

Circular focus styling for widgets and menus in the customizer.

see #33808.

[helen]

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.

[helen]

In 35215:

Account for icon alignment using text-indent in RTL.

fixes #33808.

[helen]

In 35721:

Postbox handle buttons don't need a focus outline.

see #33808, #34242.