WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#35041 closed enhancement (fixed)

Add visual feedback to reorder link

Reported by: karmatosed Owned by: voldemortensen
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: Customize Keywords: ux-feedback ui-feedback has-patch
Focuses: ui, accessibility Cc:

Description

The reorder link has no visual feedback when you hover. I actually missed I was interacting with this because of that. I'm not sure what we'd want as an option here, but having some kind of feedback I think is important as the button next to it does have visual feedback.

https://cldup.com/cP5m1eNlvT.png

Attachments (1)

35041.diff (106.0 KB) - added by coreymcollins 5 years ago.
Update Reorder button default and hover styles

Download all attachments as: .zip

Change History (12)

#1 @karmatosed
5 years ago

  • Keywords ux-feedback ui-feedback added

#2 @melchoyce
5 years ago

I think it's because it's a span, not actually a link, so it didn't inherit the correct styles automatically. If we want to just update the colors for clarity, let's use #0073aa, and #00a0d2 on hover. However — should this be a <button>? Any thoughts @afercia?

#3 @afercia
5 years ago

  • Focuses accessibility added

Actually there are two spans (they're used to change the text depending on the "reordering mode" status) inside a button. As per the hover style, I'm all for improvements. Should be coordinated with the similar button in the Menu Customizer and probably be paired with the focus style?

@coreymcollins
5 years ago

Update Reorder button default and hover styles

#4 @coreymcollins
5 years ago

Just added an update for this. The styling affects the .reorder-toggle class which means it will hit both the widget and menu reordering buttons as @afercia mentioned above using the color scheme @melchoyce suggested.

This is already a button with spans inside of it, so no need to update the structure at this time.

Menu:
https://dl.dropboxusercontent.com/content_link/f2RMWxMUK6jAL2p4n7k4REXXtFE9zKCzMLmN97vAY2LTwe6XG0K6JpofDjZumPni/file
https://www.dropbox.com/s/6hk2eyo853yabi7/wp-menu-hover.gif?dl=0

Widgets:
https://dl.dropboxusercontent.com/content_link/YjT4UOlkYp1YGAnlkdjD9FYVBH22YgSDSstxot5Uy0UkKO7vuXvYE3oY7D970EgM/file
https://www.dropbox.com/s/l0jqnj19fnowzy4/wp-widget-hover.gif?dl=0

#5 @johnbillion
5 years ago

  • Version trunk deleted

#6 follow-up: @voldemortensen
5 years ago

  • Keywords has-patch added

@coreymcollins thanks for the patch! Just for future reference, there is no need to update the minified css files. Those are generated with grunt before release. Pretty sure I did the same thing one of my first css patches :)

#7 @voldemortensen
5 years ago

  • Milestone changed from Awaiting Review to 4.5

#8 in reply to: ↑ 6 @coreymcollins
5 years ago

@voldemortensen Thanks for the heads up! I'll keep that in mind for the future.

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


5 years ago

#10 @chriscct7
5 years ago

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

@voldemortensen what needs to happen on this?

#11 @ocean90
5 years ago

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

In 36641:

Customizer: Add visual feedback to reorder buttons.

Props coreymcollins, melchoyce.
Fixes #35041.

Note: See TracTickets for help on using tickets.