WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 months ago

Last modified 6 weeks ago

#35497 closed defect (bug) (fixed)

List tables: Post format links improvements

Reported by: afercia Owned by: SergeyBiryukov
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-ui-feedback has-patch has-dev-note
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 (4)

35497.patch (556 bytes) - added by afercia 3 years ago.
35497.diff (6.7 KB) - added by afercia 2 years ago.
35497.2.diff (6.9 KB) - added by afercia 3 months ago.
35497.3.diff (7.7 KB) - added by SergeyBiryukov 3 months ago.

Download all attachments as: .zip

Change History (62)

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


3 years ago

#2 @afercia
3 years 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.


3 years ago

#4 @afercia
3 years 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
3 years ago

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

#6 @melchoyce
3 years 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
3 years ago

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

#8 @afercia
3 years 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
3 years ago

#9 @afercia
3 years 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
3 years 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
3 years 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
3 years 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.


3 years ago

#14 @chriscct7
3 years ago

  • Milestone changed from 4.5 to Future Release

Punting per discussion in trac.

#15 @karmatosed
3 years ago

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

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


2 years ago

#17 @afercia
2 years 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 years ago by afercia (previous) (diff)

@afercia
2 years ago

#18 follow-up: @afercia
2 years 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.


2 years ago

#20 @afercia
2 years 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.


2 years ago

#22 @chiaralovelaces
2 years 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 years ago

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


2 years ago

#25 @afercia
2 years ago

  • Milestone changed from 4.8 to 4.8.1

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

#26 @afercia
2 years ago

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.

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

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


2 years ago

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


2 years ago

#29 @afercia
2 years ago

  • Milestone changed from 4.8.1 to 4.9

Punting as per today's bug scrub.

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


2 years ago

#31 @afercia
2 years ago

  • Owner changed from afercia to SergeyBiryukov

#32 in reply to: ↑ 18 @SergeyBiryukov
2 years ago

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.

#33 @karmatosed
21 months ago

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?

#34 @melchoyce
21 months ago

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

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


21 months ago

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


21 months ago

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


21 months ago

#38 @melchoyce
21 months ago

  • Milestone changed from 4.9 to 4.9.1

#39 @johnbillion
19 months ago

  • Milestone changed from 4.9.1 to 5.0

#40 @johnbillion
8 months ago

  • Milestone changed from 5.0 to 5.1

#41 @afercia
5 months ago

  • Milestone changed from 5.1 to 5.2

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.

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


5 months ago

#43 @chetan200891
5 months ago

  • Keywords needs-refresh added

#44 @boemedia
3 months ago

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.

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


3 months ago

#46 @melchoyce
3 months ago

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
3 months ago

#47 @afercia
3 months ago

  • Keywords needs-dev-note added; needs-refresh removed

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

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


3 months ago

#49 @afercia
3 months ago

  • Keywords commit added

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


3 months ago

This ticket was mentioned in Slack in #core-editor by youknowriad. View the logs.


3 months ago

#52 @SergeyBiryukov
3 months ago

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.

Last edited 3 months ago by SergeyBiryukov (previous) (diff)

#53 @SergeyBiryukov
3 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

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


3 months ago

#56 @SergeyBiryukov
3 months ago

In 44963:

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

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

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


2 months ago

#58 @desrosj
6 weeks ago

  • Keywords has-dev-note added; needs-dev-note commit removed
Note: See TracTickets for help on using tickets.