List tables: Post format links improvements

[afercia]

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

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.

[afercia]

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 :)

[afercia]

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.

[melchoyce]

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?

[afercia]

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

[afercia]

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]

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 :)

[ocean90]

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…

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

[melchoyce]

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.

[chriscct7]

Punting per discussion in trac.

[afercia]

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.

[afercia]

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.

[afercia]

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

[chiaralovelaces]

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

[afercia]

We're running out of time for the 4.8 release, so: punting.

[afercia]

Worth noting the new editor Gutenberg is likely going to remove the Post Formats UI (shown just if automatically inferred) from the Edit Post screen, see ​https://github.com/WordPress/gutenberg/issues/577 and ​https://github.com/WordPress/gutenberg/issues/857
That doesn't mean they will be retired and removed from the Posts list too. It would be great to clarify future plans though.

[afercia]

Punting as per today's bug scrub.

[SergeyBiryukov]

Replying to afercia:

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

• format links are completely removed

Would it be possible to restore them as simple icons without links, as a supplementary visual indicator?

The patch looks good to me otherwise.

[karmatosed]

I just tried the patch and got caught as all my posts were standard and this didn't show. On changing to image I saw this. I think it's ok but I wonder about the use case we're trying to fix here. Is there evidence this is wanted?

[melchoyce]

Patch looks good to me as well.

I'm neutral on whether or not to continue showing post format icons (just as visual indications, not links).

[afercia]

There is a patch (probably needs refresh) and it was tested. Still needs a decision about the icon: I'd be in favor of restoring the icons as visual indicators without links. The 5.1 release beta 1 is today. Punting to 5.2.

[boemedia]

I'm indifferent of removing the link on the post format icons. But if it stays, I agree a more meaningful link of where the icon actually takes you makes sense.

[melchoyce]

Talked about this in ​#design today. Let's go ahead and move forward with the filter dropdown, and keep the icons removed for now. We can open up a new ticket to just reconsider the icons.

Someone will need to check the patch to see if it needs a refresh.

[afercia]

35497.2.diff​ refreshes the patch. No icons. Phpcs is happy. Introduces a new filter disable_formats_dropdown. Needs final review for commit.

[SergeyBiryukov]

Adding a Formats dropdown filter is a great enhancement. However, I think keeping the icons in the post list as a simple visual indicator also has some benefit, otherwise there's no way to quickly distinguish posts with a format from standard posts. It also seems more consistent with the Formats meta box still available in the Classic Editor.

Since the main purpose of the ticket is removing the links from these icons (rather than removing the icons themselves), I'm inclined to do just that, while keeping the same visual appearance for now. From reading the comments and the Slack discussion in #design linked above, it looks like there are no objections to that.

If the icons should be removed as a part of a redesign at some point, a new ticket can be opened for that.

[SergeyBiryukov]

In 44961:

Accessibility: Remove post format filter links from format icons in the Posts list table.

Introduce a dedicated 'Formats' drop-down filter as a replacement.

Keep the icons as a simple visual indicator of the post format for now.

Props afercia, melchoyce, GaryJ, chiaralovelaces, SergeyBiryukov.
Fixes #35497.

[SergeyBiryukov]

Follow-up: #46591

[SergeyBiryukov]

In 44963:

Post Formats: Remove CSS transition effect on post format icons in the Posts list table.

Props afercia, melchoyce.
See #46591, #35497.

[desrosj]

Dev note: ​https://make.wordpress.org/core/2019/04/24/notable-accessibility-changes-in-5-2/