Page MenuHomePhabricator
Create Task
Maniphest T282024

ULS language list should use `column-width` CSS property instead of splitting the lists
Open, Needs TriagePublic
Actions

Description

Current ULS language list window has the following HTML:

<div class="row uls-language-block">
  <ul class="three columns">
    …
  </ul>
  <ul class="three columns">
    …
  </ul>
</div>

This HTML exists for appearance, to split the list into multiple columns. This is bad from accessibility standpoint and just unnecessary. Although that was an acceptable solution some time ago when ULS was developed, in 2021 there are more efficient and accessible ways of achieving that. I propose moving to column-width property for this (Caniuse query for it, supports IE11). If necessary (although I don’t see why the first list is split into two columns instead of 4), a column-count and width declarations can be added.

Example of ULS language list in new Vector (Firefox 88, Windows) with column-width: 12em applied (and HTML structure amended):

image.png (361×847 px, 10 KB)

Related Objects
Search...

Event Timeline

stjn created this task.May 5 2021, 4:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 5 2021, 4:48 PM
Izno subscribed.May 5 2021, 4:50 PM

(There's a LESS mixin for column-width.)

Nikerabbit subscribed.May 7 2021, 8:28 AM

Some things to consider, which may require design changes:

  • Languages are grouped by script
  • Long lists are split into groups that fit the screen at once

Something like Europe section on a page like London would be more representative example.

stjn added a comment.May 7 2021, 10:31 AM

Languages are grouped by script

This part can probably be left as is if it is an important distinction.

Long lists are split into groups that fit the screen at once

Although I am not sure if this is a good idea (since this order must be confusing at least for some readers), this can also be left as is if needed. The lists generated by CSS properties will take the same space, they just won’t be split into four separate lists.

Jdlrobson added a project: Web-Team-Backlog (Tracking).May 26 2021, 2:27 PM
ovasileva moved this task from Incoming to Language Switching on the Desktop Improvements (Vector 2022) board.Aug 31 2021, 8:41 PM
ovasileva moved this task from Untriaged to Move to Backlog on the Web-Team-Backlog (Tracking) board.Nov 4 2021, 3:24 PM
Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Tracking).Nov 4 2021, 11:59 PM
Jdlrobson moved this task from Incoming to Tracking on the Web-Team-Backlog board.Nov 5 2021, 5:43 PM
Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.
Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Tracking).Dec 3 2021, 5:30 PM
Jdlrobson moved this task from Tracking to Incoming on the Web-Team-Backlog board.
ovasileva moved this task from Incoming to Tracking on the Web-Team-Backlog board.Dec 6 2021, 4:15 PM
putnik subscribed.Feb 5 2022, 9:31 PM
Iniquity subscribed.Feb 5 2022, 9:36 PM
Jdlrobson moved this task from Language Switching to Tracking (Waiting on other teams) on the Desktop Improvements (Vector 2022) board.Jun 8 2022, 3:20 PM
ovasileva subscribed.Oct 18 2022, 8:35 PM
Izno merged a task: T323315: Remove columns in UniversalLanguageSelector.Nov 17 2022, 9:13 PM
Izno added subscribers: RAN1, UniversalLanguageSelector.
Izno removed a subscriber: UniversalLanguageSelector.
RAN1 changed the task status from Open to Stalled.Nov 18 2022, 4:26 AM

Multi-column break properties aren't currently supported on Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1675322

Izno added a comment.Nov 18 2022, 4:38 AM
In T282024#8404783, @RAN1 wrote:

Multi-column break properties aren't currently supported on Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1675322

Hmm? Shouldn't be relevant here.

RAN1 added a comment.Nov 18 2022, 5:15 AM

Languages grouped by region are also grouped by script if it's not a one-line column.

stjn changed the task status from Stalled to Open.EditedNov 18 2022, 7:29 PM

I don't think my task is asking to unite all the different script lists into one. It's asking to stop breaking lists into columns with HTML. I would appreciate it if you didn't mark tasks as stalled without asking first what the scope of the task is. Thanks.

RAN1 added a comment.Nov 19 2022, 10:16 AM

I opened T323315 in error. I marked this stalled because I noticed CSS column breaks don't register on Firefox.

stjn added a project: Accessibility.Jul 9 2023, 12:48 AM

Also an accessibility violation, I now realise. Well, here’s to another two years without fixing.

Frostly subscribed.Jul 9 2023, 2:47 AM

Please see https://www.mediawiki.org/wiki/Bug_management/Development_prioritization#Why_has_nobody_fixed_this_issue_yet?, thanks!

Frostly unsubscribed.Jul 9 2023, 2:47 AM
RAN1 unsubscribed.Jul 14 2023, 10:38 PM
stjn mentioned this in T339818: ULS should return focus to element it was triggered by if it's closed with Esc.Jul 31 2023, 11:27 AM
Pginer-WMF added a parent task: T287860: Support for a Responsive Language Selector.Jul 31 2023, 11:37 AM
Jdlrobson edited projects, added Desktop Improvements (Vector 2022) (Tracking); removed Desktop Improvements (Vector 2022).Tue, May 28, 8:59 PM
Restricted Application added a subscriber: Base. · View Herald TranscriptTue, May 28, 8:59 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL