[wp-trac] [WordPress Trac] #30914: WP List Table: improve table footer tab sequence

[WordPress Trac]

#30914: WP List Table: improve table footer tab sequence
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  enhancement        |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:  4.1
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 `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:

 [[Image(https://cldup.com/EWGULSRbfz.png)]]

 - 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
 [https://wordpress.slack.com/archives/accessibility/p1419181443000329
 discussed in Slack #accessibility], see also
 [https://wordpress.slack.com/archives/accessibility/p1419868658000343
 following days]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30914>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform