WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#33808 closed defect (bug) (fixed)

Use the circular focus style in more places

Reported by: helen Owned by: 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 4 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
4 years ago

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

#2 @wonderboymusic
4 years ago

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

@grvrulz
4 years ago

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

#3 follow-up: @grvrulz
4 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
4 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
4 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 4 years ago by helen (previous) (diff)

#6 @helen
4 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
4 years ago

In 35201:

Box shadows still need -webkit-, turns out.

see #33808, [35200].

#8 follow-up: @grvrulz
4 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
4 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
4 years ago

In 35207:

Circular focus styling for widgets and menus in the customizer.

see #33808.

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

In 35721:

Postbox handle buttons don't need a focus outline.

see #33808, #34242.

Note: See TracTickets for help on using tickets.