List table: posts navigation links pointing to same page

[rianrietveld]

In for example wp-admin/edit.php the links inside tablenav-pages can point to the displayed page itself.
This is the case when you are on the first page and on the last page of the items list.
The items show in a different colour but are links to the page itself.

Suggestion: remove that links and replace them with text only.

Code in
class WP_List_Table
function pagination

related: #32028

Tracking label: #a11y-color

[joedolson]

Remove links if point to current patch.

[joedolson]

First pass at patch.

[joedolson]

To test: verify that the prev/first links are not linked when viewing first page of results or default view, verify that next/last links are not linked when viewing last page of results; verify that all other views show both sets of links.

[afercia]

The refreshed patch tries to improve a bit, handling also the previous and next links. There's a bit of repetition in the code but maybe better for clarity and readability. Any improvements welcome. About the visual part, will ask the UI team to choose what to display when the links are not printed out: just an empty square, nothing (with visibility; hidden to avoid "jumps"), or ... ?
Some screenshots:

[afercia]

Was thinking that instead of an empty square, yes we could still display the arrows (without link) and completely hide them from assistive technologies with aria-hidden=true. The visual difference between a "disabled" arrow and an enabled one should be very, very, clear though. Will try to refresh the patch.

[afercia]

One special case to consider is the Comments screen where, currently, a CSS class 'disabled' is toggled via JavaScript on the pagination links. JavaScript does other things too, like updating the "displaying items" and "total pages" numbers in addition to a bunch of hidden fields values being updated. Please notice there are several quirks there, and it doesn't work correctly in many cases. See also #32362.
This patch doesn't touch anything in edit-comments.js but maybe we should remove the CSS class toggling and/or create a new ticket for the Comments JavaScript part? Any thoughts more than welcome.

[afercia]

In the refreshed patch, no more empty squares. When there's no link, arrows are displayed just as a "visual clue" but there's no semantic markup at all (that's intentional) and they're completely hidden from assistive technologies.
While I think this UI part would need some major re-thinking, any relevant CSS change is out of the scope of this ticket. I would recommend just a couple of changes, related to the links usability and readability:

• make clear the difference between a link and a disabled "square with arrow"
• for better readability, make all the text (i.e. "58 items 1 of nn") aligned on the same baseline
• reduce font variants

Note: this patch should be coordinated with the one in #32028

Screenshot with the last patch applied:

[afercia]

Refreshed patch after r32693 also adds a "Current Page" screen-reader-text in the bottom pagination using the already existing string.

[rianrietveld]

Patch 32253.4 tested on june 18, still applies, works and looks well.

[wonderboymusic]

In 32948:

List tables: when post navigation links point to the current page, use <span>s and text instead of <a>s.

Props afercia.
Fixes #32253.

[netweblogic]

Replying to slackbot:

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

This patch seems to break the display when using paginate_links in the admin area. For example:

$return = '<div class="tablenav"><div class="tablenav-pages">';
$base = !empty($base) ? $base:esc_url_raw(add_query_arg( 'pno', '%#%' ));
$nav = paginate_links( array(
	'base' => $base,
	'total' => ceil($total / $limit),
	'current' => $page,
	'add_args' => $vars
));
$return .= sprintf( '<span class="displaying-num">Displaying %s&#8211;%s of %s </span>%s',
	number_format_i18n( ( $page - 1 ) * $limit + 1 ),
	number_format_i18n( min( $page * $limit, $total ) ),
	number_format_i18n( $total ),
	$nav
);
$return .= '</div></div>';

ends up with this now:

might not be a core issue, but maybe something worth considering, anyone else using this similarly may experience breakages in their UI.

For my situation the fix is quite straightforward, the newly added width is the main problem causer, overriding that with an auto value for my paginations solves the issue:

.tablenav .tablenav-pages a,
.tablenav-pages-navspan {
	display: inline-block;
	width: 7px;
	...

[azaozz]

Seems r32948 doesn't take this use into account. It's not just the width: display, padding, font-size are all wrong then there is text in there.

@netweblogic can you add an example that is easy to reproduce/test. Can even be in a form of a (small) plugin.

[afercia]

Replying to azaozz:

when there is text in there.

Not arguing :) but should core take this into account? Core uses arrows there. If a plugin is going to change content (and markup) I would expect the plugin to adjust the CSS accordingly and update it when there are UI changes.

[azaozz]

Replying to afercia:

Yep, that's why I asked for usage example :)

[netweblogic]

POC for styling issues when using em_paginate

[netweblogic]

Done, uploaded paginate-test.php

Enable the plugin, there's a Pagination Test menu item in the settings menu.

[ocean90]

Can we change width into min-width?

[afercia]

Replying to ocean90:

Can we change width into min-width?

Yes :) It's a bit difficult here having the arrows perfectly centered and at the same time making the "squares" have the same size. Different font rendering in different platforms would also matter here and probably we can't have a "pixel perfect" alignment. We should try to make the squares have the same size though.
In the proposed patch min-width is now bigger than 1em and padding adjusted accordingly. In the screenshot below: the Pagination Test plugin in 4.2 and in trunk. As you can see even "before" the plugin should provide some styling...

[obenland]

I think 32253.pagination-test.diff​ is a reasonable fix. @azaozz, what is your opinion?

[ocean90]

32253.pagination-test.diff​ looks good to me.

[azaozz]

Yep, 32253.pagination-test.diff fixes the worst breakage when text or numbers are used for the buttons. Seems good enough for 4.3, +1 for commit.

[obenland]

In 33608:

After [32948]: Account for the use of paginate_links() with table navigation markup.

Props afercia.
Fixes #32253.