Page MenuHomePhabricator

Sortable tables with row scope headers or multi-row table head have incorrect sorting icons
Closed, ResolvedPublic

Description

Following W3C advice, it is recommended that tables have row headers. This is mandated in the English Wikipedia at Wikipedia:Manual of Style/Accessibility/Data tables tutorial.

<th scope="row">...</th>

Following rMW9e363d0e8a12f4fc205de08958622d6e8e250c81, table headers with row scope now have incorrect formatting. The sortable icon (the arrows pointing up and down) appears in each row header, although it is disabled and doesn't actually do anything. You can see this behaviour, for example, in List of teams and cyclists in the 2015 Vuelta a España on the English Wikipedia.


From T126110:

Unsortable headers in sortable tables now have a disabled arrow symbol next to them. This applies to header cell in the footer of a table as well as multiline table headers. You can see examples on https://de.wikipedia.org/wiki/Hilfe:Tabellen_f%C3%BCr_Fortgeschrittene#Zellen_von_der_Sortierung_ausschlie.C3.9Fen The disabled arrows in all those tables should not be shown.

Note that this makes some tables much wider than they should be, e.g. https://de.wikipedia.org/wiki/Fu%C3%9Fball-Bundesliga_2015/16#Tabellenverlauf (below are some more tables with disabled arrows where there shouldn't be any).

Event Timeline

Relentlessly raised the priority of this task from to Needs Triage.
Relentlessly updated the task description. (Show Details)
Relentlessly added a subscriber: Relentlessly.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptFeb 5 2016, 5:34 PM
matmarex renamed this task from Sortable tables with row scope headers have incorrect sorting icons to Sortable tables with row scope headers or multi-row table head have incorrect sorting icons.Feb 6 2016, 4:12 PM
matmarex updated the task description. (Show Details)Feb 6 2016, 4:16 PM

I guess @Esanders and I forgot how complicated the tablesorter logic for choosing the headings to sort by is.

Ed, any thoughts? Or should we just revert? There doesn't seem to be any CSS way that would prevent unintended icons from appearing in all of the three examples given here.

Can't we add :not(.jQuery-sortable) to our rules so they don't apply after JS has run.

Also to be conservative in where we apply the no-JS styles we could restrict them to tr:first-child as well.

Esanders triaged this task as Unbreak Now! priority.Feb 7 2016, 10:28 AM

Can't we add :not(.jQuery-sortable) to our rules so they don't apply after JS has run.

This would fix read mode (save for the now-nastier FOUC), but wouldn't help VE.

Also to be conservative in where we apply the no-JS styles we could restrict them to tr:first-child as well.

That wouldn't be correct, though. See the buildHeaders() function in tablesorter for the logic. We use the table head row that has the most cells in it (or the last one, if there are multiple rows with the same number of cells).

Change 269114 had a related patch set uploaded (by Bartosz Dziewoński):
Revert "TableSorter: Avoid FOUC and preserve styling in VisualEditor"

https://gerrit.wikimedia.org/r/269114

Change 269114 merged by jenkins-bot:
Revert "TableSorter: Avoid FOUC and preserve styling in VisualEditor"

https://gerrit.wikimedia.org/r/269114

Change 269140 had a related patch set uploaded (by Bartosz Dziewoński):
Revert "TableSorter: Avoid FOUC and preserve styling in VisualEditor"

https://gerrit.wikimedia.org/r/269140

matmarex claimed this task.Feb 8 2016, 3:34 PM

I scheduled the revert to be deployed to Wikimedia wikis later today: https://wikitech.wikimedia.org/wiki/Deployments#deploycal-item-20160209T0000

Reopened T95189 too.

Change 269140 merged by Alex Monk:
Revert "TableSorter: Avoid FOUC and preserve styling in VisualEditor"

https://gerrit.wikimedia.org/r/269140