WP List Table: improve table footer tab sequence

[afercia]

WP_List_Table always uses a table footer tfoot except for the navigation menu locations where it's commented out since r23810.

Since the tfoot element is placed before the tbody, the tab order follows what's in the markup despite the fact the tfoot is rendered by browsers below the tbody. See the resulting tab sequence in the screenshot below:

• keyboard users: when tabbing through focusable elements in the table, they will see the page "jump" to the bottom and then jump back to the top when the tab stop # 9 is focused

• screen reader users: while screen readers provide them with special keystrokes to move inside tables, when tabbing or reading sequentially (down arrow key) they will hear the same table header infos read out twice before they can get the actual table data, for example:

Row 1
Column 1 Select all checkbox not checked
Column 2 Title
Column 6 Comments
Column 7 Date

tab again and the table footer gets focus, screen readers will read the same information again:

Row 22
Column 1 Select all checkbox not checked
Column 2 Title
Column 6 Comments
Column 7 Date

Whether this is to be considered a browsers bug or not, or probably a specification "gray area", in HTML5 it's now possible to place the tfoot after the tbody, see ​http://www.w3.org/TR/html5/tabular-data.html#the-table-element and that will help both keyboard users and screen reader users, matching the visual order with the tab order.

Proposed patch:

• moves the tfoot below the tbody
• fixes the "Comments" header: currently it's an empty link without any text
• proposes to use the standard link styles for the links in the table headers

@todo:

• consider removing the title attribute from the "Comments bubble"
• find a solution for the Calendar widget without assuming HTML5 is used

This was also quickly ​discussed in Slack #accessibility, see also ​following days

[DrewAPicture]

Patch still applies, and I can confirm the tabbing sequence is much more logical now with the tfoot element at the bottom of the table(s).

It would be nice to get the thumbs-up from @helen or @azaozz or somebody pretty familiar with admin CSS before commit.

[azaozz]

30914.patch looks good. We should move tfoot after tbody as it is ​explicitly allowed in HTML 5.0.

The only thing I'm not sure about is removing overflow: hidden; from all th and td. Don't see a good reason to change that here.

[DrewAPicture]

30914.2.patch​ skips removing overflow: hidden;.

[afercia]

Replying to azaozz:

The only thing I'm not sure about is removing overflow: hidden; from all th and td. Don't see a good reason to change that here.

That was related to broken focus style, see:
https://core.trac.wordpress.org/attachment/ticket/29897/Screen%20Shot%202014-09-28%20at%2010.59.54.png

Not sure if overflow: hidden is really needed in table headers and cells, shouldn't they always contain their content by definition?

[rianrietveld]

Accessibility test results at: ​https://make.wordpress.org/accessibility/2015/02/16/tab-order-table-of-posts-in-edit-php-accessibility-user-test-result/

[SergeyBiryukov]

overflow: hidden; was added in [9733]. I think it's no longer relevant. Removing it fixes the focus styles, as noted in comment:5.

30914.patch​ should be good to go.

[azaozz]

Replying to SergeyBiryukov:

Wow, 6 years :) Seems it is needed for old IE only.

[azaozz]

In 31513:

Improve table footer tab sequence by moving <tfoot> after <tbody>. Props afercia, rianrietveld, DrewAPicture. Fixes #30914.