Problem/Motivation
For accessibility, some tables call for having both column headers and row headers. The WAI table concepts tutorial describes a number of table models, with corresponding example use cases.
The tables currently generated by views are all tables with one header. These are quite acceptable for many cases, including many of the administrative views in Drupal core.
This feature request aims to support simple tables with two headers, with accessible markup. Such tables have <th scope="col"> in the <thead>, and a <th scope="row"> as a header inside each <tr> row, as appropriate. This is primarily intended as a feature for site builders, though future administration tables provided by by core or contrib modules may also benefit from it.
Recently #1831162: Tables generated by Views need better semantics. added the scope="col" for column header elements, but did not add any support for row headers.
Proposed resolution
A configuration option that allows the site builder to set any column in a table to be treated as a table header for that row. The site builder will also have the option not to have any row header, producing only column headers. Note that this approach is flexible enough to support tables with an offset column of header cells.
Note: supporting tables with irregular headers or tables with multi-level headers is NOT in scope for this issue. If #893530: Multi level (multirow) header for table FAPI element gets into core, we can create separate feature request issues for these.
Table format settings showing new Row Header column. Title field has been selected:
Content list view output with title field selected as the row header (Seven Theme):
Note: the column header styles apply to the row header field on hover (see comment #21)
Content list view output with title field selected as the row header (Bartik Theme):
Selecting a field as the row header causes that field to be rendered as a <th> tag inside the table row:
Remaining tasks
- DONE. Usability review: do we use a column of radio buttons or a drop-down select? See comment #33, @yoroy has a preference for a column of radio buttons, but it doesn't seem like a strong preference either way.
- DONE. Add a setting to the Views table display plugin config form.
- DONE. Update markup in output.
- DONE. Review design impact for Bartik, styling of row-headers. See comments #22 and #33, @yoroy is happy.
- DONE. Review design impact for Seven, styling of row-headers. See comments #21 and #33, @yoroy's comment could do with clarifying. This change also impacts other themes that ship with core; Bartik, Seven, Classy, Olivero, Claro
- DONE. Write tests. Rough plan outlined in comment #65. @lendude added tests in #65 and subsequent rerolls adopted this test.
- TODO: Update existing views which use the table display plugin, to include the new config option (set to none). See comment #67.
- DONE: A change record with advice for themers:
- If they already have a custom
views.view-table.html.twigtemplate, it will need updated to benefit from this feature. - Turning on the new row-level headers option may have an unexpected effect on how tables look, if their theme doesn't already anticipate row-level table headers.
- If they already have a custom
User interface changes
- An additional configuration in the views style format. Either of these:
- An extra column of radio buttons in the settings table, similar to the default-sort column (screenshot in comment #16)
- A drop-down select, which has a description (screenshot in comment #30)
- (Possibly) a different appearance for table headers on each row (if design review permits it).
We do not propose to change the configuration of any existing admin views tables in core as yet.
API changes
None.
Data model changes
Additional "row header" option in Views table display config, similar to the existing default-sort option.
Original report by @gettysburger
Accessible tables have "scope=col" in the headers and "scope=row" in the first field in a row. The first field in the row should also have a <th> instead of a <td> tag. Tables generated by Views have scope=col" but not scope ="row". A recent issue (https://www.drupal.org/node/1831162) added the "scope=col" but did not add "scope=row".
I proposed that "scope=row" be added to the first field in each table row and that first field in the row should also have a <th> instead of a <td> tag.
