Visual improvements for the comment "pending status"

[afercia]

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

[EmpireOfLight]

possible pending icon

[idabelida]

Possible pending icon

[idabelida]

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.

[beining]

Pending is like waiting, so it could be a clock icon as seen here using dashicons-clock https://developer.wordpress.org/resource/dashicons/#clock

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

[afercia]

Replying to idabelida:

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

Good question :)

[afercia]

Replying to idabelida:

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

Good question :)

[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.

[idabelida]

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".

[karmatosed]

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.

[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.

[melchoyce]

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.

[xavortm]

Uses :first-child:before so that it doesn't create a cell (even if absolute positioned).

Tested on Safari: ​http://i.imgur.com/TO5Ppuq.png

Chrome: ​http://i.imgur.com/CWhVzBg.png

And firefox: ​http://i.imgur.com/ICmrb4T.png

Mobile: ​http://i.imgur.com/jHes28Q.png

(couldn't test on IE sorry)

The markup between the two is different. The dashboard one uses <li> items while the "after editor" one uses table. I think this is understandable as the type of content is different, but I have the feeling that it's better to have them in the same markup, just add whatever information is needed in additional columns. Still wondering for list vs table. Probably table is best.

Additional: I didn't add the label/icon in this patch.

[afercia]

The 5.1 release beta 1 is today. Punting to Future Release.

[afercia]

To recap, this is not just about the icon. There's the need of a textual indication of the "pending" status, ideally at the beginning of a comment row. Worth reminding in the Comments screen and in the Classic Editor comments meta box, there's no icon. These are data tables and ideally there should be a "Status" column.