[a11y] Unable to create redirects / view issues when using keyboard only

[tacoverdo]

When only using the keyboard on the Webmaster Tools (Search Console) page I am unable to reach the links to create a redirect or view a page. When using the mouse these options appear when hovering over a line.

I can only mark items as fixed, because I can reach the bulk actions.

[jdevalk]

How is this solved in core? If at all?

[tacoverdo]

@GaryJones Could you maybe answer @jdevalk's question? Is this solved in core?

[GaryJones]

There's a few tickets regarding this, but I've not been paying close attention. Pinging @rrwd who has.

Just from the browser, it seems that when tabbing into a row, the row-actions become visible. I've not searched for the JS in core, but it looks to be something to the effect of $('.row-title,.row-actions a').on('focus', function() { $(/* Select the corresponding .row-actions */).addClass('visible'); });.

Found something: https://github.com/WordPress/WordPress/blob/0b046085ae2ced9fa991a245fc4f627ee32a9edc/wp-admin/js/common.js#L472-L488

[rianrietveld]

The problem is that nothing within this table gets focus, the visibility: visible is only triggered when something in the td gets focus. In the, for example, edit-post table, the post title is a link so it gets keyboard focus, and then the row-actions get visible.

This is, like Gary says defined in /wp-admin/js/common.js: Show row actions on keyboard focus of its parent container element or any other elements contained within.

[rianrietveld]

FWIW: I've looked a bit closer and you can solve this in 2 ways in class-gsc-table.php

If you want to keep the functionality the same, change in function column_url: return sprintf( '<span class="value" tabindex="0">%1$s</span> %2$s', $item['url'], $this->row_actions( $actions ) ); Or you can choose one of the the row actions and link them in the span to %1$s

For some reason this only works if you also add the class post-title to the <td class="url column-url"> Maybe somewhere in common.js this is hardcoded, I'm not sure.

I found in the generated load-scrips.php (line 268) a list for the focusin/focusout: "td.post-title, td.title, td.comment, .tags td.column-name, .bookmarks td.column-name, td.blogname, .users-network td.column-blogs, td.username, .dashboard-comment-wrap"), If so, this may be a WP core bug, then all row-actions in custom columns don't work. or maybe there is a filter to add or change a class for the <td class="url column-url">

[GaryJones]

One of the recent (4.2? 4.3?) additions was the concept of a primary column - the code I was looking at earlier only appeared to add a has-row-actions class if the current column was the primary column, when looping through cells in a row.

[rianrietveld]

It's in 4.3, committed 3 weeks ago. https://core.trac.wordpress.org/ticket/25408.

[afercia]

Core now doesn't use CSS visibility any more to make the action links appear/disappear. The "row action" links in the tables are now just placed off-screen with a position relative and left: -9999em; so they're always focusable. Then restored to a static position when necessary, so they appear "in place". See https://core.trac.wordpress.org/changeset/35771

Thinking this can be closed now :)