WordPress.org

Make WordPress Core

Opened 20 months ago

Last modified 2 weeks ago

#35937 new defect (bug)

Visual improvements for the comment "pending status"

Reported by: afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Comments Keywords: has-screenshots needs-patch
Focuses: ui, accessibility Cc:

Description

Splitting this out from #35392.

While working on #35392, noticed and agreed there's room for some visual (and further accessibility) improvements. Specifically, the comment "pending status" relies on a small "flag" icon, followed by a [Pending] text.

From a design perspective, this could use some love. Whether it would be some additional, descriptive, text or a new icon etc. it would be possible to expand the new text or icon with some screen-reader-text in order to provide a reasonably understandable feedback for assistive technologies users.

Worth noting this applies to the Dashboard "Recent Comments" widget and the list of comments in the Comments screen and Edit post screen as well, where the pending status information is conveyed using just color.

cc @melchoyce

https://cldup.com/IWyv7rKuEE.png

Attachments (2)

pending.png (47.3 KB) - added by EmpireOfLight 20 months ago.
possible pending icon
pending-warning.jpg (141.5 KB) - added by idabelida 16 months ago.
Possible pending icon

Download all attachments as: .zip

Change History (17)

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


20 months ago

@EmpireOfLight
20 months ago

possible pending icon

#2 @rachelbaker
16 months ago

  • Keywords ui-feedback added
  • Milestone changed from Awaiting Review to Future Release

This ticket was mentioned in Slack in #design by idabelida. View the logs.


16 months ago

@idabelida
16 months ago

Possible pending icon

#4 follow-ups: @idabelida
16 months ago

My concern with the triangle icon is that it might be perceived as something is wrong or as spam (since it´s associated with danger). I suggest that we use warning icon from the notification icons: https://developer.wordpress.org/resource/dashicons/#warning.

On the other hand, do we really need this icon? This icon is not part of the list of comments in the Comments screen.

Possible pending icon

#5 @beining
16 months ago

Pending is like waiting, so it could be a clock icon as seen here https://d13yacurqjgara.cloudfront.net/users/113773/screenshots/600920/status_icons.png using dashicons-clock https://developer.wordpress.org/resource/dashicons/#clock

or a hourglass http://fontawesome.io/icon/hourglass-half/

#6 in reply to: ↑ 4 @afercia
16 months ago

Replying to idabelida:

On the other hand, do we really need this icon?

Good question :)

#7 in reply to: ↑ 4 ; follow-up: @afercia
16 months ago

Replying to idabelida:

On the other hand, do we really need this icon?

Good question :)

#8 in reply to: ↑ 7 ; follow-ups: @melchoyce
16 months ago

Replying to afercia:

Replying to idabelida:

On the other hand, do we really need this icon?

Good question :)

Do all pending comments have the orange background/border? If yes, let's just cut the icon. I'm not sure there's an appropriate one that isn't already being used for another feature in core.

#9 in reply to: ↑ 8 @idabelida
16 months ago

Replying to melchoyce:

Replying to afercia:

Replying to idabelida:

On the other hand, do we really need this icon?

Good question :)

Do all pending comments have the orange background/border? If yes, let's just cut the icon. I'm not sure there's an appropriate one that isn't already being used for another feature in core.

I checked this out, and yes all pending comments have the orange background and border both at the dashboard and "Comments".

Last edited 16 months ago by idabelida (previous) (diff)

#10 @karmatosed
14 months ago

If all do have the background I'd +1 to removing the icon. My only thought is that other apps / experiences do use a !. I noticed a few that had to sync to Cloud do, for example when that's not possible. My concern is the ! in this case would get read as a failure over a pending. So in that case removing makes a lot of sense.

#11 in reply to: ↑ 8 ; follow-up: @afercia
14 months ago

Replying to melchoyce:

Do all pending comments have the orange background/border?

The ones below the post editor don't have the border, it would be great to consider to add it for consistency and accessibility.

https://cldup.com/0c807KER4x.png

#12 in reply to: ↑ 11 @melchoyce
14 months ago

Replying to afercia:

Replying to melchoyce:

Do all pending comments have the orange background/border?

The ones below the post editor don't have the border, it would be great to consider to add it for consistency and accessibility.

+1, that looks weird. Feels like a styling error.

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


7 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 weeks ago

#15 @melchoyce
2 weeks ago

  • Keywords ui-feedback removed
Note: See TracTickets for help on using tickets.