WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 27 hours ago

#41858 reopened defect (bug)

Improve the list table pagination links color contrast

Reported by: afercia Owned by: afercia
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch has-dev-note fixed-major dev-reviewed commit
Focuses: ui, accessibility Cc:

Description

The list table pagination links (the active ones) have a color contrast ratio with the background under the required 4.5:1 to meet the WCAG at level AA. #0073aa on #e5e5e5 results in a ratio of 4.13:1, see https://jdlsn.com/color/?type=hex&color=0073aa&color2=e5e5e5

https://cldup.com/Er8cXOb4sH.png

https://cldup.com/Er8cXOb4sH.png

Also on hover/focus the colors could be improved a bit, since UI controls that change their background to blue on hover/focus are a bit out of the design patterns used in WordPress:

https://cldup.com/lVpHE7ODTv.png

The current official WordPress colors are listed on https://make.wordpress.org/design/handbook/design-guide/foundations/colors/, see alto the codepen linked there for more color variants.

These controls are links that looks like buttons, they could use the same CSS classes (with some adjustments) used for the buttons. The buttons CSS classes already provide colors for enabled and disabled states and using them would also increase consistency. Worth noting disabled controls don't need to meet the color contrast requirement.

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

Alternatively, a new design could be experimented.

Attachments (7)

41858-links.diff (958 bytes) - added by benoitchantre 17 months ago.
Same background color as buttons
41858-buttons.diff (2.7 KB) - added by benoitchantre 17 months ago.
More like buttons
41858.diff (5.8 KB) - added by afercia 15 months ago.
41858-3.diff (5.9 KB) - added by benoitchantre 14 months ago.
41858.2.diff (5.9 KB) - added by afercia 13 months ago.
41858.3.diff (7.3 KB) - added by afercia 10 months ago.
41858.4.diff (666 bytes) - added by afercia 4 days ago.
Restore old upload modal pagination links styling

Download all attachments as: .zip

Change History (40)

#1 @subrataemfluence
17 months ago

  • Keywords reporter-feedback added

The following color contrast meets WCGA level AA (4.5:1) https://www.joedolson.com/tools/color-contrast.php?type=hex&color=%230066c5&color2=%23e5e5e5&alpha=1#hex

However the color #0066c5 does not fall inside the list WordPress official colors.

"Also on hover/focus the colors could be improved a bit, since UI controls that change their background to blue on hover/focus are a bit out of the design patterns used in WordPress:"

Would you mind explaining "out of the design pattern used in WordPress"?

#2 follow-up: @afercia
17 months ago

  • Keywords reporter-feedback removed

@subrataemfluence I think there are no other UI controls in WordPress that change their background to blue on hover/focus, so these links design seems inconsistent to me and I don't see why they should be an exception.

#3 in reply to: ↑ 2 @benoitchantre
17 months ago

Replying to afercia:

@subrataemfluence I think there are no other UI controls in WordPress that change their background to blue on hover/focus, so these links design seems inconsistent to me and I don't see why they should be an exception.

The Add New button.

https://cldup.com/4Tqrw1-qpT.png

#4 @benoitchantre
17 months ago

The darker background color could be remove to increase the contrast and to meet the WCAG at level AA with a 4.86:1 contrast ratio.
A significant difference on one property should be enough to differentiate the states.
No change on hover state.

https://cldup.com/ceuNP2um6l.png

I think it's right to keep the links in blue.
These are really links (like the filter links) and their look should reflect that.

Let me know if you agree. I can try to submit a patch in a few days.

#5 @afercia
17 months ago

The Add New button.

Right, but the Add New button is a pretty unique case. For these pagination links, I'd try the same colors used for normal buttons, maybe except the blue for links as you mentioned @benoitchantre

@benoitchantre
17 months ago

Same background color as buttons

@benoitchantre
17 months ago

More like buttons

#6 @benoitchantre
17 months ago

  • Keywords has-patch added; needs-patch removed

@afercia here are two directions with their patches.

Preview of 41858-links
Same background color as buttons.

https://cldup.com/OwmMTR8U3h.png
https://cldup.com/IYZPqcihZk.png

Preview of 41858-buttons.diff
Same styles as buttons: background color, color, rounded corners and shadow.

https://cldup.com/V_2VUQ9oS4.png
https://cldup.com/d4zb_LhuWq.png

After having tested the second version (styled like buttons), I think it is better than the first version.

Maybe @melchoyce could give her feedback on that?

#7 @afercia
17 months ago

@benoitchantre nice! Personally I'd prefer the second version but I'll leave this to @melchoyce @karmatosed and all the ui/design team.

#8 @melchoyce
17 months ago

I like the button version!

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


16 months ago

#10 @melchoyce
16 months ago

  • Milestone changed from Awaiting Review to 4.9.1

@afercia
15 months ago

#11 follow-ups: @afercia
15 months ago

  • Owner set to afercia
  • Status changed from new to assigned

Looking a bit at this, it would make sense to reuse the existing button CSS classes. They can be used for button elements and link elements. 41858.diff is a first try following this approach: it uses the buttons CSS classes and overrides only the properties necessary for the specific design of the pagination links.
I think it could be further refined, so any improvement is very welcome. @benoitchantre mind having a look? :) Worth reminding patches should be generated from the root of a cloned development repo and should not touch .rtl or minified files.

#12 @johnbillion
15 months ago

  • Milestone changed from 4.9.1 to 5.0

#13 in reply to: ↑ 11 @benoitchantre
15 months ago

Replying to afercia:

I think it could be further refined, so any improvement is very welcome. @benoitchantre mind having a look? :) Worth reminding patches should be generated from the root of a cloned development repo and should not touch .rtl or minified files.

Yes, I'll look at that in the next days hopefully.
Thanks for the reminder about the patches. I now work with Vagrant and Grunt :-)

#14 in reply to: ↑ 11 @benoitchantre
14 months ago

Replying to afercia:

I think it could be further refined, so any improvement is very welcome. @benoitchantre mind having a look? :) Worth reminding patches should be generated from the root of a cloned development repo and should not touch .rtl or minified files.

I have refreshed your patch and revised some properties to be more specific on the changes. I hadn't the time to review all the CSS changes at the moment. This is a first iteration; my plan is to continue the work on it.

41858.2.diff is empty and can be removed if you want. It is the result of a grunt upload_patch command with a git repository (doesn't work).

#15 @afercia
13 months ago

Just came into my mind why these links are using min-width, see https://core.trac.wordpress.org/ticket/32253#comment:23
Seems some plugin authors are implementing their own navigation but trying to still use the default CSS classes. In this case, when the links don't contain arrows but actually use numbers or text, we should make sure the links width can expand.

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

@afercia
13 months ago

#16 @afercia
13 months ago

41858.2.diff is a new iteration:

  • on desktop, makes the links height 28 pixels so they have the same height of the buttons on the left for better alignment
  • makes the links width 28 pixels so they're squared; note: for accessibility this should be changed in the future since the target size is too small, the WCAG 2.1 will require a minimum of 44 by 22 pixels
  • add some white space below the links, for balance with the space above
  • cleans up the alternate color scheme scss file that used different color and background to the links on hover and focus

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


12 months ago

#18 @afercia
10 months ago

Re:

WCAG 2.1 will require a minimum of 44 by 22 pixels

This has changed in the final WCAG 2.1 recommendation. It now requires a size of 44 by 44 pixels but it has been moved to the AAA level. See https://www.w3.org/TR/WCAG21/#target-size

@afercia
10 months ago

#19 @afercia
10 months ago

  • Keywords needs-dev-note added; good-first-bug removed

41858.3.diff cleans up a bit the CSS, also removing old, no more used, rules. Final screenshots large screens / responsive view:

https://cldup.com/MP2ezE90bv.png

https://cldup.com/_Dy43RWfbg.png

I think this change will need a quick dev note post on the Make blog, see the edge case on https://core.trac.wordpress.org/ticket/32253#comment:23 and the screenshots on https://core.trac.wordpress.org/ticket/32253#comment:30. See also the test plugin uploaded there: https://core.trac.wordpress.org/attachment/ticket/32253/paginate-test.php

Basically, if plugin authors use paginate_links() wrapped in some containers with the same CSS classes used for the tables navigation links, e.g.:

<div class="tablenav">
	<div class="tablenav-pages">
	<?php
		paginate_links( ... )
	?>
	</div>
</div>

The links generated by paginate_links() used to inherit the tables pagination links styles. I'd tend to think this is an backwards compatibility edge case WordPress shouldn't support. The CSS for the tables pagination links are specific to the tables and not supposed to be reused this way. On the other hand, paginate_links() outputs unstyled links: styling it's not its responsibility. Plugin authors can provide their own style with a few lines of CSS.

#20 @afercia
10 months ago

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

In 43019:

Accessibility: Better color contrast for the tables pagination links.

By making the pagination links use the default style for buttons, color contrast
is improved and the CSS is simplified. Improves consistency with other UI controls.
Also, slightly increases the white space below the pagination links.

Props benoitchantre, afercia.
Fixes #41858.

#21 @pento
4 months ago

  • Milestone changed from 5.0 to 5.1

#22 @desrosj
4 weeks ago

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

#23 @swissspidy
5 days ago

#46250 was marked as a duplicate.

#24 @afercia
4 days ago

For the records, I've realized there's one, very minor, unintended change due to the changes here.

For anyone who remembers the "Old Upload Method" modal, it used to have pagination links in its "Media Library" tab. Those links are now untyled.

Before:

http://cldup.com/pzAjnP1NIZ.png

After:

http://cldup.com/TDxjquFFWA.png

This old modal is still available in core and can be restored with a plugin that came to life in a support forum discussion.

Given this old modal is not available by default since WordPress 3.5 and even when re-enabled can be accessed only from the classic editor, I'd tend to think its pagination links can stay unstyled. The links are still functional, even if the clickable area is smaller.

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


4 days ago

#26 @pento
4 days ago

Nice catch, @afercia!

Do you know what kind of effort would be involved in re-adding slightly better styling for the old modal? We certainly don't need to go all out, but it'd be good to avoid making the clickable area so small.

#27 @afercia
4 days ago

@pento I think a few CSS lines in deprecated-media.css targeting only the old modal wouldn't be a huge effort. On it.

@afercia
4 days ago

Restore old upload modal pagination links styling

#28 @afercia
4 days ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

41858.4.diff restores a simplified styling for the pagination links in the old upload modal:

http://cldup.com/NG6SOyEINj.png

http://cldup.com/2wTTo6y-_N.png

The hover and focus styles are the ones for standard links. The relevant CSS is in deprecated-media.css, together with all the other styling for this old modal.

Patched from the 5.1 branch. Should then be backported to 5.0.

To test it, you can install this plugin https://gist.github.com/brasofilo/4570587 then go in the Classic Editor and click "Upload/Insert".

#29 @pento
3 days ago

@afercia: Why does it need backporting to 5.0? [43019] was only ever in trunk, it wasn't backported to the 5.0 branch.

#30 @afercia
3 days ago

@pento right. Branches confuse me.

#32 @pento
27 hours ago

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

In 44747:

Accessibility: Fix a regression in the old media modal pagination links.

[43019] improved the table pagination link styling, but introduced a regression in the old media dialog.

Props afercia, joneiseman.
Fixes #41858.

#33 @pento
27 hours ago

  • Keywords fixed-major dev-reviewed commit added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for backport to the 5.1 branch.

Note: See TracTickets for help on using tickets.