Make WordPress Core

Opened 5 years ago

Last modified 5 years ago

#47101 new defect (bug)

Improve contrast when deleting terms in list table via AJAX

Reported by: jeremyfelt's profile jeremyfelt Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 2.5
Component: Taxonomy Keywords: needs-patch needs-design
Focuses: accessibility Cc:

Description

When deleting a term via the inline "Delete" link in the taxonomy list table, the background will turn red (#FF3333) while the request is passed via AJAX and remain so until the term is deleted.

For terms with few associations, this won't take more than a second, so it disappears very quickly. For terms with many associations, this can hang on the screen for a while and the contrast of the text in that row becomes very poor.

Background: #FF3333 (I believe set in lists.js
Slug text: #555555 (2.04:1 ratio)
Anchor text: #0073AA (1.43:1 ratio)
Hover text: #00A0D2 (1.2:1 ratio)
Delete text: #AA0000 (2.13:1 ratio)
Delete hover text: #DC3232 (1.27:1 ratio)

It seems like there may be a better color than red that can be used to convey that the row's removal is in progress.

Attachments (2)

Screen Shot 2019-05-02 at 1.42.22 PM.png (86.2 KB) - added by jeremyfelt 5 years ago.
47101 comments.png (111.3 KB) - added by afercia 5 years ago.
Color effect when trashing a comment

Download all attachments as: .zip

Change History (7)

#1 @jeremyfelt
5 years ago

  • Version set to 2.5

I *think* this goes back to 2.5 when wp-lists.js was introduced in #4805. The colors likely have a similar issue elsewhere, but I haven't tested.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#3 @afercia
5 years ago

  • Milestone changed from Awaiting Review to Future Release

Discussed during today's accessibility bug scrub. Agreed this would be a nice improvement.

Worth also considering an audible message with speak(). Although there's already a JavaScript confirm dialog, an accessible feedback for screen reader users could help.

#4 @wido
5 years ago

May be just make the content of the table row semi transparent and use the spinner?
This way you don't need to use the red background you just block the UI and wait until the row disappear, the spinner will make his job on giving a feedback to the user.

#5 @afercia
5 years ago

Worth noting a similar color effect is used also for comments, for example when trashing a comment (see attached screenshot). Of course, the color is slightly different. Wondering if these color effects should be kept in the first place. They're pretty "old" and maybe this would be a good opportunity to explore something better.

Seems to me @wido made a good point: the most common pattern to communicate an "on going..." operation in WordPress is the spinner. I'd tend to think consistency is important and using the spinner would be more consistent. However, I'm not sure there's a good spot within the table rows where the spinner could be placed.

@afercia
5 years ago

Color effect when trashing a comment

Note: See TracTickets for help on using tickets.