Page MenuHomePhabricator

Labels with numbers don't display correctly on Special:EditWatchlist in LTR
Closed, ResolvedPublic

Assigned To
Authored By
Cparle
Jan 28 2026, 12:35 PM
Referenced Files
F72965567: 2026-03-17_12-38-13.png
Mar 18 2026, 12:40 AM
F71661904: 2026-02-03_12-55-48.png
Feb 3 2026, 9:12 PM
F71661670: 2026-02-03_12-45-10.png
Feb 3 2026, 9:12 PM
F71661666: 2026-02-03_12-43-00.png
Feb 3 2026, 9:12 PM
F71661664: 2026-02-03_12-42-26.png
Feb 3 2026, 9:12 PM
F71661661: 2026-02-03_12-42-02.png
Feb 3 2026, 9:12 PM
F71661417: 2026-02-03_12-24-56.png
Feb 3 2026, 9:12 PM
F71661412: 2026-02-03_09-15-35.png
Feb 3 2026, 9:12 PM

Description

If I have a label named "(number) (string)" and then it doesn't display properly on Special:EditWatchlist in LTR

Example: label "88 keys" displayed in English

image.png (2,614×1,192 px, 206 KB)

... and in Arabic
image.png (2,550×926 px, 162 KB)


Derived Requirement

Ensure that watchlist labels containing numbers and text are displayed correctly on Special:EditWatchlist in left-to-right (LTR) interfaces, with consistent and readable ordering regardless of language or script.

Test Steps

Test Case 1: Ensure numeric labels render correctly in LTR language on Special:EditWatchlist

  1. Create a watchlist label containing both numbers and text, for example 88 keys.
  2. Assign the label to one or more watched pages.
  3. Navigate to Special:EditWatchlist using an LTR interface language such as English.
  4. Locate the label in the label assignment or display area.
  5. ✅❓❌⬜ AC1: The label text is displayed correctly as 88 keys with proper ordering and no visual distortion.

Test Case 2: Ensure numeric labels remain readable across different language contexts

  1. Using the same label 88 keys, switch the interface language to a right-to-left language such as Arabic.
  2. Navigate to Special:EditWatchlist.
  3. Locate the label in the label assignment or display area.
  4. ✅❓❌⬜ AC2: The label remains readable and consistently ordered, without broken or reversed number–text rendering.

QA Results - Beta

ACStatusDetails
1T415776#11580989
2T415776#11721376

Event Timeline

Change #1234361 had a related patch set uploaded (by Cparle; author: Cparle):

[mediawiki/core@master] Make sure labels on Special:EditWatchlist render properly in LTR

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

Change #1234361 merged by jenkins-bot:

[mediawiki/core@master] Make sure labels on Special:EditWatchlist render properly in LTR

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

Change #1235742 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/core@master] Special:EditWatchlist: Escape label names in watchlist table

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

Change #1235742 merged by jenkins-bot:

[mediawiki/core@master] Special:EditWatchlist: Escape label names in watchlist table

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

@Cparle Please review AC2

Test Result - Beta

Status: ✅ PASS / ❓ Need More Info / ❌ FAIL
Environment: Beta
OS: macOS Tahoe 26.2
Browser: Chrome 143
Device: MBA
Emulated Device: NA

Test Artifact(s):
https://en.wikipedia.beta.wmcloud.org/w/index.php?title=Special:WatchlistLabels
https://en.wikipedia.beta.wmcloud.org/wiki/Special:EditWatchlist?uselang=ar

Test Steps

Test Case 1: Ensure numeric labels render correctly in LTR language on Special:EditWatchlist

  1. Create a watchlist label containing both numbers and text, for example 86 Fries.
  2. Assign the label to one or more watched pages.
  3. Navigate to Special:EditWatchlist using an LTR interface language such as English.
  4. Locate the label in the label assignment or display area.
  5. ✅❓AC1: The label text is displayed correctly as 86 Fries with proper ordering and no visual distortion.

I know Mobile is being worked on. Edit Watchlist has no labels option, as seen in the screenshot

✅Desktop: Manage Watchlist✅Desktop: Edit Watchlist✅Mobile: Manage Watchlist❓Mobile: Edit Watchlist
2026-02-03_09-15-18.png (1,268×788 px, 129 KB)
2026-02-03_09-15-09.png (1,258×799 px, 136 KB)
2026-02-03_09-15-35.png (954×1,079 px, 104 KB)
2026-02-03_12-24-56.png (914×1,057 px, 177 KB)

Test Case 2: Ensure numeric labels remain readable across different language contexts

  1. Using the same label 86 Fries, switch the interface language to a right-to-left language such as Arabic.
  2. Navigate to Special:EditWatchlist.
  3. Locate the label in the label assignment or display area.
  4. ✅❓❌ AC2: The label remains readable and consistently ordered, without broken or reversed number–text rendering.

I know Mobile is being worked on. Edit Watchlist has no labels option, as seen in the screenshot

✅Desktop: Manage Watchlist✅Desktop: Edit Watchlist✅Mobile: Manage Watchlist❓Mobile: Edit Watchlist
2026-02-03_12-42-02.png (1,265×859 px, 126 KB)
2026-02-03_12-42-26.png (1,072×776 px, 93 KB)
2026-02-03_12-43-00.png (997×1,089 px, 102 KB)
2026-02-03_12-45-10.png (977×1,097 px, 190 KB)

Assign/Remove vs Edit Watchlist
Which one should it be since both are different? One is Fries 86 while the other is 86 Fries. Also Onion Rings! vs !Onion Rings

2026-02-03_12-55-48.png (1,018×792 px, 101 KB)

GMikesell-WMF changed the task status from Open to In Progress.Feb 3 2026, 9:12 PM
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from QA to In Development on the Community-Tech (Fox Squad) board.

@GMikesell-WMF how it's displayed on the actual Special:EditWatchlist page is ok now right? The problem is with the modals? That looks like a problem with the codex checkbox, I added a subtask T417979

Samwilson subscribed.

It looks like we need to wrap the checkbox labels in <bdi>, as we're already doing in the table.

Change #1245006 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/core@master] Special:EditWatchlist: Wrap watchlist label in <bdi>

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

Change #1245006 merged by jenkins-bot:

[mediawiki/core@master] Special:EditWatchlist: Wrap watchlist label in <bdi>

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

@Samwilson Looks like it is good to go now, as seen in the pic below. I will mark this as Resolved. Thanks for all your work!

Assign/Remove vs Edit Watchlist
Which one should it be since both are different? One is Fries 86 while the other is 86 Fries. Also Onion Rings! vs !Onion Rings

2026-02-03_12-55-48.png (1,018×792 px, 101 KB)

! In T415776#11657025, @Samwilson wrote:

It looks like we need to wrap the checkbox labels in <bdi>, as we're already doing in the table.

Assign/Remove vs Edit Watchlist

2026-03-17_12-38-13.png (1,759×1,013 px, 197 KB)

GMikesell-WMF updated the task description. (Show Details)