List Table Rollover Actions Not Working in Google Chrome

[dglingren]

I am testing a site with with Right To Left (RTL) text direction. When accessing the WordPress admin area in Google Chrome Version 45.0.2454.101 m, list table some rollover actions are not presented as active links.

For example, on the Pages/All Pages submenu, only the right-most "View" action is an active link. The "Edit", "Quick Edit" and "Trash" actions are "dead" - the cursor doesn't change when it passes over the text and clicking on the text has no effect.

If you remove the <span></span> tags around the actions they all become active, i.e., modify /wp-admin/class-wp-list-table.php function row_actions():

//	$out .= "<span class='$action'>$link$sep</span>";
	$out .= "$link$sep";

I also noticed that the "view" links above the table are not formatted properly. They appear as:

(Published (1 | (All (1

It looks like Chrome has a rendering problem with some <span> tags in RTL sites. Everything works properly in Firefox, Safari and Internet Explorer.

[swissspidy]

I also noticed that the "view" links above the table are not formatted properly. They appear as: (Published (1 | (All (1

AFAIK that's expected behaviour in browsers with RTL direction and English text. You can ignore that (or use a RTL language to test things).

Does the other bug you mention also exist with a RTL language like Arabic? If not, this is likely not a bug.

[dglingren]

Thanks for your quick response and for the tip on the "view" issue.

The other, more serious, issue was first reported to me by a plugin customer in Israel running a site in Hebrew, so yes, it occurs in a true RTL site.

[afercia]

Also, the right-most link should be "Edit" :) the row-actions links should be in a reversed order compared to LTR, e.g. (in English):

View | Trash | Quick Edit | Edit

setting display: inline-block on the links fixes both issues for me, could you please test and verify? To properly test the attached patch you should run grunt build on a SVN install and then copy over the CSS files in the proper directories under src or for quick-testing just manually add the following rule in your list-tables-rtl.css file:

.rtl .row-actions a {
	display: inline-block;
}

[dglingren]

Thanks for your good work and for your patience in awaiting my response. I manually added your suggested rule to my list-tables-rtl.css file and it does indeed solve the problem. It also seems to re-order the links along the lines you suggested (both in Chrome and in Internet Explorer 11). Thanks!

[wonderboymusic]

In 35566:

List Tables: fix row links CSS for RTL.

Props afercia.
Fixes #34150.