Make WordPress Core

#38758 closed defect (bug) (fixed)

Customize: beautify hover, focus, and active states for the partial edit shortcut button

Reported by: michaelarestad Owned by: michaelarestad
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch commit
Focuses: ui Cc:


Currently, the focus style changes the border to almost black. It was done that way for accessibility, but I suspect that value would be lost on any theme with a dark background. I added a box shadow for the focus style that is basically a second border. The focus style was toned down to a simple background color change that is the same as the primary button hover.

Attachments (2)

38758.diff (1008 bytes) - added by michaelarestad 19 months ago.
edit-shortcuts-firefox.png (25.6 KB) - added by westonruter 19 months ago.

Download all attachments as: .zip

Change History (11)

#1 @michaelarestad
19 months ago

  • Keywords has-patch added
  • Owner set to michaelarestad
  • Status changed from new to accepted

#2 @michaelarestad
19 months ago

Looks like this:


#3 @westonruter
19 months ago

  • Milestone changed from Awaiting Review to 4.7
  • Type changed from enhancement to defect (bug)

@sirbrillig thoughts?

#4 @transl8or
19 months ago

I like that approach and tested his suspicion with a color change in Twenty Seventeen to the dark color theme and changing the theme to Twenty Fourteen. The button gets smaller on hover on the dark background.

(The Hide Controls Arrow would also need some design refinements. Its not centered in Firefox.)

#5 @sirbrillig
19 months ago

I am not a great person to ask about subtle styles, but I agree with the premise in this ticket and I think those icons look good to me, so 👍

#6 @westonruter
19 months ago

@sirbrillig What about the centering in Firefox that @transl8or raised?

@melchoyce Do you 👍 on the design changes?

#7 @melchoyce
19 months ago

Yup 👍

#8 @westonruter
19 months ago

  • Keywords commit added

@transl8or I'm not seeing a Firefox issue with the Hide Controls button. Anyway, that would be a separate issue.

@michaelarestad Good to commit. Let me know if you'd like me to commit as well.

#9 @westonruter
19 months ago

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

In 39228:

Customize: Improve styles for hover, focus, and active states on edit shortcuts.

Props michaelarestad.
Fixes #38758.

Note: See TracTickets for help on using tickets.