FYI, this task was mentioned at https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Sortable_tables_on_mobile.

Permalink: https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1004201528#Sortable_tables_on_mobile

Updated permalink with my second on the request for mobile sortability: https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1004345968#Sortable_tables_on_mobile
May I change the priority to high? This is very disappointing that mobile users are *still* unable to make use of what article authors want readers to be able to do.

In T233340#6794918, @Reywas92 wrote:

May I change the priority to high?

@Reywas92: Do you plan to work on fixing this issue yourself? Asking as Priority reflects reality and does not cause it.

The glorious implementation of Template:Static row numbers has finally allowed the easy addition of fixed, static row numbers as an integrated column on any table.

The only problem is that the lack of sortable tables in the mobile view causes a slight problem in mobile view only. Without some weird CSS magic in the template CSS the number "1" starts in the header cell. Instead of the topmost data cell where it should start.

This only occurs in mobile view when class=sortable is used on the table. It doesn't occur in mobile if the class is not used.

For example tables, links, and explanatory notes see:
*User:Timeshifter/Sandbox144 - Click the desktop and mobile view links at the bottom of the page.

In no case is there a problem in desktop view. For discussion and more technical details see:
*Template talk:Static row numbers/styles.css

With my very limited understanding of CSS I gather that the knowledge of this CSS tweaking, and the need for it, may help in fixing the problems in adding sortability in mobile view.

@Timeshifter: Hi, local templates on a wiki are maintained by that wiki community. Please bring up any problems with local templates on that wiki.
This task is about code in software repositories instead. Thanks a lot!

On mobile the code is functional, however looks a bit odd. We likely want to tweak the CSS to fully fix this issue

This (a fullscreen/rotate button for tables) may be relevant to that: https://phabricator.wikimedia.org/T66577#6335259 The gif nicely shows how the table is not well displayed/browsable on mobile. Other than that, clicking on a table header to sort could have a visual feedback: making the header cell shortly flash in blue (like the hovered rows).

Hi @Samwalton9 this came up on https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1090162285#%22Sortable_tables%22_on_%22Mobile_browsers%22_(Please_fix!!) today and seemed relevant to your team's current efforts.

In T233340#7964152, @Jdlrobson wrote:

Hi @Samwalton9 this came up on https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1090162285#%22Sortable_tables%22_on_%22Mobile_browsers%22_(Please_fix!!) today and seemed relevant to your team's current efforts.

Thanks for the ping. Above you noted

The mw-collapsible code and the sortable code are currently tightly coupled - so enabling sortable requires enabling the other as well. We could modify core to make it possible to do one without the other.

Is this still true as far as you're aware?

We've fixed that since as part of desktop improvements where we needed to override search (T250851).

Remaining work is:

• Adding some CSS for lower resolutions. I think probably these sortable indicators should appear below the text on mobile given the limited screen real estate. Also for usability they need a larger touch area. (screenshot from List_of_European_Cup_and_UEFA_Champions_League_finals?useskin=minerva)

• Flipping this boolean: https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/includes/Hooks.php#L457

Not sure why this didn't get added by the bot:

https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/804454

@Samwalton9: Because it did not follow https://www.mediawiki.org/wiki/Gerrit/Commit_message_guidelines :)

Change 804454 had a related patch set uploaded (by Aklapper; author: EllenR):

[mediawiki/skins/MinervaNeue@master] Add sortability to sortable tables for mobile web

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

Testing the WIP patch via Patch Demo (on desktop and my mobile device) and it seems pretty functional to me - the arrow placement looks better than in the gif in the task description (I assume some related CSS/JS changes happened since?) and because the entire cell is interactable I didn't have any problems sorting the table. It doesn't accidentally trigger while scrolling either.

@Jdlrobson in Gerrit you mentioned "They are not big enough for my large thumbs so this doesn't look great from an accessibility standpoint (it's very easy to scroll down the page and accidentally sort the tables)". Could you elaborate on the issue you're seeing?

I'm playing around with this on https://patchdemo.wmflabs.org/wikis/6e0742c69c/wiki/New_York_Yankees

It definitely looks better than I remember it.

If we're going to enable it for every user I would feel more comfortable if a designer took a look at this and signed off on it. (this is a jquery plugin built for desktop which never had any kind of design review.)

While testing the patch on a mobile device (iPhone SE 2nd gen) I could see that the whole table header cell is a touch area, which definitely improves the ergonomics for people with "large thumbs". I could also see that if a person tries to specifically tap on the small caret icon, there's a pressed state feedback (darker background color), that can help convey that the whole cell is tappable. +1 from a design standpoint!

This all sounds good to me then! I don't think you need any web team assistance to complete this work then. Feel free to ping me directly or tag Web-Team-Backlog (Kanbanana-FY-2021-22) if you need anything else from us.

+2ed

Change 804454 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add sortability to sortable tables for mobile web

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

Thanks all! It would be great to get this in the next Tech News, summary below:

Users can now sort sortable tables in the mobile skin

see https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2022/Mobile_and_apps/Table_sorting_on_mobile

Thanks to the team for implementing this! Really appreciate it getting done after being supported in the community survey! It works great on the mobile browser interface, though I'm wondering if it will also be included in the next update of the iPhone app?

In T233340#8058365, @Reywas92 wrote:

Thanks to the team for implementing this! Really appreciate it getting done after being supported in the community survey! It works great on the mobile browser interface, though I'm wondering if it will also be included in the next update of the iPhone app?

The Android and iPhone apps are independent of mobile web. It seems that for some reason the corresponding iPhone app task was declined: T232046. You may need to ask there to find out why.

Per https://meta.wikimedia.org/wiki/Talk:Community_Wishlist_Survey_2022/Mobile_and_apps/Table_sorting_on_mobile there may be some issues with static row numbers on enwiki, but I suspect this is a local CSS issue rather than something that needs fixing by us.

Also a quick note that this was fixed on enwiki.

One more issue: preload via Skin::getDefaultModules() should be allowed to avoid the separate load request in a fresh environment.

Change 904587 had a related patch set uploaded (by Func; author: Func):

[mediawiki/skins/MinervaNeue@master] Remove jquery.tablesorter modules form the dequeue list

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

Change 904587 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove jquery.tablesorter modules form the dequeue list

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