WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 2 weeks ago

#35497 assigned defect (bug)

List tables: Post format links improvements

Reported by: afercia Owned by: afercia
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-ui-feedback has-patch
Focuses: ui, accessibility Cc:

Description

In the Posts list table, when posts have a post format, an icon link is displayed next to the Post title (see screenshot below).

https://cldup.com/odYs24tIMz.png

Ideally, since this is a tabular data, the post format should be in a dedicated table column. By the way, list tables have already several columns and plugins can add their own ones so this change should be carefully considered and would probably require some discussion.

Meanwhile, there are a couple of simple improvements that could be easily implemented:

Clarify the link purpose
Currently the link says, for example, "Video" while clicking on it brings users to a list of all posts with that format. It should probably say "View all posts with video format" and at the same time make clear that post has a video format. Bit tricky but I'm confident a proper wording would solve this issue.

Color contrast
Should be improved. The icon's color is #ddd on a background color #ffffff or #f9f9f9 with a contrast of, respectively, 1.4:1 and 1.3:1. Should be at least 4.5:1.

Attachments (2)

35497.patch (556 bytes) - added by afercia 14 months ago.
35497.diff (6.7 KB) - added by afercia 5 weeks ago.

Download all attachments as: .zip

Change History (25)

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


16 months ago

#2 @afercia
15 months ago

  • Milestone changed from Awaiting Review to 4.5
  • Owner set to afercia
  • Status changed from new to assigned

Checking the new colors on http://codepen.io/hugobaeta/full/RNOzoV/ #32373c will have a sufficient contrast but it's a bit too dark. Alternatively, the same grey used for the "post-state" text (see "Pending" in the screenshot on the left) which is #555 will be OK on a #f9f9f9 background.

The current grey should be changed also in other places, see the formats Meta Box (where additionally the "active" one uses #82878c). and the Press This #9ea7af.

Probably needs a new grey shade, cc @hugobaeta @melchoyce @michaelarestad :)

https://cldup.com/vwBuEH56Fa.png

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


15 months ago

#4 @afercia
15 months ago

Thinking at two possible options: use the new "dark medium gray" #555d66 or, since they're links, just make them use the default links color. Any thoughts more than welcome.

https://cldup.com/vSaDsCiO9I.png

https://cldup.com/gwyfKbhac2.png

#5 @afercia
15 months ago

  • Keywords ui-feedback added; good-first-bug removed

#6 @melchoyce
15 months ago

Since the icon is supplementary information, does it need to pass text color contrast? Or, could it stay lighter and get darker when you hover over it?

#7 @afercia
15 months ago

Hmm I'd agree if the icon was just an icon. But it's also a link.

#8 @afercia
15 months ago

P.S. @melchoyce I agree it looks ugly :) just exploring ideas. What I'd really like to see would be having the post titles all aligned on the left and the post format links (with or without icons) in a dedicated column.

@afercia
14 months ago

#9 @afercia
14 months ago

  • Keywords has-patch added; needs-patch removed

I'd propose to use the default link colors. These icons are links, they should look like links, see screenshot below. Needs UI feedback and a design decision, please :)

https://cldup.com/gwyfKbhac2.png

#10 @ocean90
14 months ago

I wouldn't use the same color as the post link because the target is different. But to be fair, I didn't know that the icons are actually links…

#11 follow-up: @GaryJ
14 months ago

A relevant question might be to ask if the icons need to stay as links? Why is this functionality not part of the filters above the table, where the rest of the filters live?

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

Replying to GaryJ:

A relevant question might be to ask if the icons need to stay as links? Why is this functionality not part of the filters above the table, where the rest of the filters live?

This is a good point — clicking on the format in front of a particular post to filter all posts by that format isn't intuitive. I also had no idea they were links before this ticket. Adding a dropdown filter would make it more discoverable.

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


14 months ago

#14 @chriscct7
14 months ago

  • Milestone changed from 4.5 to Future Release

Punting per discussion in trac.

#15 @karmatosed
7 months ago

  • Keywords has-ui-feedback added; ui-feedback removed

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


2 months ago

#17 @afercia
2 months ago

  • Milestone changed from Future Release to 4.8

Discussed in today's accessibility meeting. Moving to 4.8 as at least fixing contrast & link text should definitely happen. We're all for discussion about further UI improvements.
Also, worth considering @joedolson comment:

The fact that so many people didn't even *know* these were links tells you a lot about how confusing this is as a UI. I'd suggest making them into decorative icons with no link & adding a post format filter available when post formats are enabled.

Last edited 2 months ago by afercia (previous) (diff)

@afercia
5 weeks ago

#18 @afercia
5 weeks ago

35497.diff is a first pass to test the usability and accessibility of the new post format filter select.

  • format links are completely removed
  • the new post formats select shows only the post formats that are actually used
  • it's not shown in the Trash

Todo: should the new select have an option for the Standard post format too? Unfortunately, there's no easy way to query for the standard post format. On the other hand, the current format links aren't used on standard posts so there's feature parity.

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


4 weeks ago

#20 @afercia
4 weeks ago

Screenshot of the new post format select, showing only the post formats actually used:

https://cldup.com/thb6ylNL7u.png

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


3 weeks ago

#22 @chiaralovelaces
3 weeks ago

From Contributor Day WordCamp Torino: we tested the patch and discussed about the issue, with some core committers too, and here's our opinion.
Patch is great, because users can filter posts by post format. If there aren't post format at all, filter doesn't appear but users don't need to use it.
Screen reader use is clearer because now doesn't appear post format link.
About post format icons we are in doubt: no more icons at all or, maybe, adding a post format column, visible only when there's almost one non-standard format post. In this second option users could choose about its visibility by screen options menu.

@afercia, @danuccia, @vallisca, @giux2, @viroproject

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


2 weeks ago

Note: See TracTickets for help on using tickets.