[wp-trac] [WordPress Trac] #32170: List table: sortable column headers accessibility

[WordPress Trac]

#32170: List table: sortable column headers accessibility
----------------------------+--------------------------------
 Reporter:  afercia         |       Owner:  afercia
     Type:  defect (bug)    |      Status:  assigned
 Priority:  normal          |   Milestone:  4.3
Component:  Administration  |     Version:  4.2
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  ui, accessibility
----------------------------+--------------------------------

Comment (by afercia):

 Updated patch, first pass. I guess there are things to discuss and better
 practices to follow, but it's a start. Happy for any feedback and
 improvements.

 To keep things simple, I've decided to don't create a new method to get
 additional information about sortable columns. `get_sortable_columns()`
 appeared to me the most logical place to add them to. This way, the new
 information will be available also in `get_column_info()` where there's
 already a filter that custom post types and custom taxonomies can use to
 add their own things. See screenshot:

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

 Added a new method `print_table_description()` (similar to
 `print_column_headers()`, there's a bit of repetition in the code here) to
 print out the table information. For now, the new info are visible for
 testing purposes right before the tables, we'll hide them with `screen-
 reader-text`.

 About header links, couldn't find any clean way to add orderby and
 asc/desc feedback and at the same time to avoid that being read out when
 navigating through the table cells. Open to any suggestions. I'm tempted
 to just keep the plain links and add some hint in the table description,
 something like: "Activate the table header links to change order."
 Accessibility team, any thoughts?

 Finally, `aria-sort` will make compliant screen readers announce the
 asc/desc order for the currently sorted column. Added bonus, the arrow is
 now correctly displayed also in the initial view.

 @todo:
 - add some info in the Help tabs
 - consider to visually increase the difference between sortable and non-
 sortable columns

 Tested with NVDA, when entering the table it will read out, for example:
 {{{
 table with 22 rows and 7 columns
 Table ordered by Date. Descending order. <-- `aria-describedby`
 row 1  column 1
 Select All check box  not checked
 column 2
 link Title
 column 3
 Author
 column 4
 Categories
 column 5
 Tags
 column 6
 link Comments
 column 7 sorted descending <-- `aria-sort`
 link Date
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32170#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform