Page MenuHomePhabricator
Create Task
Maniphest T279674

Use of dir=auto in WVUI breaks search interface is broken in wikis mixing LTR and RTL languages
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
Amire80
Apr 8 2021, 2:56 PM
Tags
Referenced Files
F34891123: image.png
Dec 20 2021, 11:20 PM
F34890944: Screen Shot 2021-12-20 at 11.01.09 AM.png
Dec 20 2021, 7:03 PM
F34888682: Screen Shot 2021-12-18 at 12.44.56 PM.png
Dec 18 2021, 8:45 PM
F34888680: Screen Shot 2021-12-18 at 12.44.26 PM.png
Dec 18 2021, 8:45 PM
F34870681: Screen Shot 2021-12-09 at 9.14.48 AM.png
Dec 9 2021, 5:16 PM
F34870678: Screen Shot 2021-12-09 at 9.14.29 AM.png
Dec 9 2021, 5:16 PM
F34589725: Screen Shot 2021-08-10 at 1.36.33 PM.png
Aug 10 2021, 8:36 PM
F34589564: image.png
Aug 10 2021, 4:58 PM
View All 10 Files
Subscribers
Aklapper
Amire80
Catrope
cjming
Edtadros
Huji
IKhitron
View All 12 Subscribers

Description

To reproduce:

  • Go to Meta (example link)
  • Enable new Vector and new search
  • Switch user language to Hebrew. Look carefully at the search box: the placeholder says "search Meta", aligned to the right, and with the Hebrew word חיפוש on the right like so:

Screen Shot 2021-08-02 at 1.00.57 PM.png (122×996 px, 8 KB)

  • Click the search box. Observe: The placeholder jumps to the other side, and the Hebrew word חיפוש is now on the left.

image.png (71×655 px, 2 KB)

Expected: The placeholder is supposed to remain in the same place and in the same visual word order.

This happens in all wikis when using them in a language whose direction is different from its content language, e.g. English Wikipedia with Hebrew user language and vice versa. It's particularly relevant for multilingual wikis, like Wikidata, Commons, and Meta.

Developer notes

This issue lies in WVUI and its usage of dir="auto". This overrides the default language and direction set by Vector.

  • A change in WVUI is required.
  • Codex has implemented a 1:1 HTML attribute copy of the false WVUI way. Needs a patch equal to WVUI.

QA Steps

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?uselang=he
  2. Verify that the placeholder text is aligned to the right (near the magnifying glass)
  3. Focus the search input
  4. Verify that the placeholder text is still aligned to the right (near the magnifying glass)

QA Results - Beta

ACStatusDetails
1✅T279674#7560476
2✅T279674#7560476

QA Results - Prod

ACStatusDetails
1✅T279674#7579259
2✅T279674#7579259

Details

SubjectRepoBranchLines +/-
Update WVUI to v0.3.3mediawiki/coremaster+115 -1 K
TextInput: Remove `dir="auto"` attribute for i18ndesign/codexmain+0 -11
Remove "dir=auto" attribute from TypeaheadSearch and Input componentswvuimaster+0 -9
Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Amire80 updated the task description. (Show Details)Apr 8 2021, 3:09 PM
Amire80 updated the task description. (Show Details)
IKhitron renamed this task from New Vector search interface is broken in LTR wikis with RTL interface language to New Vector search interface is broken in LTR wikis with RTL interface language and vice versa.Apr 8 2021, 3:12 PM
Jdlrobson added a project: WVUI.May 25 2021, 11:26 PM
Jdlrobson added a project: Web-Team-Backlog.May 26 2021, 3:31 PM
Jdlrobson assigned this task to ovasileva.May 26 2021, 3:49 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.
ovasileva triaged this task as Medium priority.Jun 7 2021, 4:00 PM
Jdlrobson moved this task from Needs Prioritization to Not ready to estimate on the Web-Team-Backlog board.Jun 11 2021, 4:45 PM
ovasileva moved this task from Not ready to estimate to Triaged but Future on the Web-Team-Backlog board.Jun 29 2021, 2:23 PM
Jdlrobson added a parent task: T283803: [EPIC] Desktop improvement visual refinement/cohesion, and cleanup.Jul 29 2021, 12:32 AM
Jdlrobson renamed this task from New Vector search interface is broken in LTR wikis with RTL interface language and vice versa to Use of dir=auto in WVUI breaks search interface is broken in wikis mixing LTR and RTL languages.Aug 2 2021, 8:06 PM
Jdlrobson removed ovasileva as the assignee of this task.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a parent task: T282473: [GOAL] Use the Codex search widget inside the mobile site.
Jdlrobson moved this task from Triaged but Future to unsed on the Web-Team-Backlog board.
Jdlrobson added a subscriber: ovasileva.
IKhitron added a subscriber: Jdlrobson.Aug 9 2021, 5:38 PM

@Jdlrobson, pay attention, the second screenshot you've added is irrelevant.

Jdlrobson updated the task description. (Show Details)Aug 10 2021, 1:24 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a comment.Aug 10 2021, 1:27 PM

@IKhitron are you familiar with the WVUI library and how we transition to it? The first screenshot is the search before WVUI has been loaded and the second shows WVUI after it is loared and I think this is important context to understanding this issue. Why do you think it is irrelevant? Is there another bug occurring here that we need to understand?

IKhitron added a comment.Aug 10 2021, 4:58 PM
In T279674#7272137, @Jdlrobson wrote:

@IKhitron are you familiar with the WVUI library and how we transition to it? The first screenshot is the search before WVUI has been loaded and the second shows WVUI after it is loared and I think this is important context to understanding this issue. Why do you think it is irrelevant? Is there another bug occurring here that we need to understand?

No, I don't. I say so, because it does not show the problem I asked Amir to fix. This

image.png (71×655 px, 2 KB)

screenshot does show the wrong words order -
-חיפוש בMeta
instead of
Meta-חיפוש ב.

Jdlrobson updated the task description. (Show Details)Aug 10 2021, 8:36 PM
Jdlrobson updated the task description. (Show Details)Aug 10 2021, 8:38 PM

The screenshot is not meant to be an exact duplication of the steps that Amir has been presented, it was meant to communicate to developers the shift of the placeholder from right to left.

Having the right screenshot isn't necessary for fixing this bug but I've updated it for you since you pointed it out.

Jdlrobson moved this task from unsed to Needs Prioritization (Tech) on the Web-Team-Backlog board.Aug 10 2021, 8:52 PM
Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.
Jdlrobson moved this task from Backlog to Using Codex in web team products / Skin unification on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Aug 11 2021, 6:01 PM
Jdlrobson moved this task from Incoming to Search on the Desktop Improvements (Vector 2022) board.Aug 31 2021, 10:02 PM
Jdlrobson added a comment.Oct 22 2021, 1:43 AM

Is this a duplicate of T294075 ?

Jdlrobson merged a task: T294075: Placeholder of the search box is misplaced in new vector in RTL mode.Oct 22 2021, 6:50 PM
Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Needs Prioritization (Tech)).
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson added a subscriber: Huji.
Jdlrobson set the point value for this task to 2.Oct 25 2021, 5:49 PM
Jdlrobson changed the point value for this task from 2 to 3.
Jdlrobson moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming claimed this task.Nov 1 2021, 11:22 PM
cjming moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming removed cjming as the assignee of this task.Nov 2 2021, 4:49 PM
cjming moved this task from Doing to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming subscribed.
• nray claimed this task.Nov 5 2021, 4:52 PM
• nray moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
gerritbot added a comment.Nov 10 2021, 1:22 AM

Change 737815 had a related patch set uploaded (by Nray; author: Nray):

[wvui@master] Remove \"dir=auto\" attribute from TypeaheadSearch and Input components

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

gerritbot added a project: Patch-For-Review.Nov 10 2021, 1:22 AM
• nray removed • nray as the assignee of this task.Nov 10 2021, 1:23 AM
• nray moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
• nray subscribed.
Jdlrobson moved this task from Code Review to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Nov 12 2021, 4:04 PM
gerritbot added a comment.Nov 12 2021, 4:14 PM

Change 737815 merged by jenkins-bot:

[wvui@master] Remove \"dir=auto\" attribute from TypeaheadSearch and Input components

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

• nray mentioned this in rWVUIf2ab818365d8: Remove "dir=auto" attribute from TypeaheadSearch and Input components.Nov 12 2021, 4:16 PM
Maintenance_bot removed a project: Patch-For-Review.Nov 12 2021, 5:10 PM
• nray added a comment.Nov 12 2021, 5:38 PM

This has been merged but won't be released until the next release of WVUI

Jdlrobson assigned this task to Volker_E.Nov 12 2021, 5:49 PM
Volker_E added a project: Codex.Nov 13 2021, 4:31 AM

Thanks @nray! This wrong attribute has been brought over into new Codex library as well, so let's make sure, we're keeping the code in sync between those two.

Volker_E updated the task description. (Show Details)Nov 13 2021, 4:36 AM
gerritbot added a comment.Nov 13 2021, 4:44 AM

Change 738501 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] TextInput: Remove `dir=\"auto\"` attribute for i18n

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

gerritbot added a project: Patch-For-Review.Nov 13 2021, 4:44 AM
IKhitron added a comment.Nov 13 2021, 1:00 PM

Thank you. When there be the next release of WVUI?

Volker_E added a subscriber: Catrope.EditedNov 15 2021, 2:31 AM

We could make a quick patch release, it would currently only contain this patch. Would like to checkin with @Catrope first on the progress for https://gerrit.wikimedia.org/r/c/wvui/+/738470 as a combined patch release would be preferable. With such, it would be either end of the coming or second-next week until it's released and put into MW core to production use.

gerritbot added a comment.Nov 15 2021, 8:18 PM

Change 738501 merged by jenkins-bot:

[design/codex@main] TextInput: Remove `dir=\"auto\"` attribute for i18n

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

Volker_E mentioned this in rDCODa25d22fd8d93: TextInput: Remove `dir="auto"` attribute for i18n.Nov 15 2021, 8:22 PM
Maintenance_bot removed a project: Patch-For-Review.Nov 15 2021, 9:10 PM
Catrope added a subscriber: Krinkle.Nov 18 2021, 7:34 PM
In T279674#7502780, @Volker_E wrote:

We could make a quick patch release, it would currently only contain this patch. Would like to checkin with @Catrope first on the progress for https://gerrit.wikimedia.org/r/c/wvui/+/738470 as a combined patch release would be preferable. With such, it would be either end of the coming or second-next week until it's released and put into MW core to production use.

It's blocked on https://gerrit.wikimedia.org/r/c/mediawiki/core/+/739341, which is in turn blocked on @Krinkle's review of https://gerrit.wikimedia.org/r/c/mediawiki/core/+/739340. Once those core patches land, we can land the WVUI externalization patch, and at that point I would like to do a release.

Volker_E moved this task from Backlog to Done on the WVUI board.Nov 19 2021, 5:18 AM
gerritbot added a comment.Nov 20 2021, 4:49 AM

Change 740293 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update WVUI to v0.3.3

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

gerritbot added a project: Patch-For-Review.Nov 20 2021, 4:49 AM
gerritbot added a comment.Nov 20 2021, 5:59 AM

Change 740293 merged by jenkins-bot:

[mediawiki/core@master] Update WVUI to v0.3.3

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

Maintenance_bot removed a project: Patch-For-Review.Nov 20 2021, 6:10 AM
Jdlrobson moved this task from Blocked on Others to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Nov 29 2021, 5:58 PM

The new WVUI has released so this can now be QAed.

Jdlrobson reassigned this task from Volker_E to Edtadros.Nov 29 2021, 5:58 PM
Jdlrobson added a subscriber: Volker_E.
• nray updated the task description. (Show Details)Dec 1 2021, 6:10 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.EditedDec 9 2021, 5:16 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?uselang=he
✅ AC1: Verify that the placeholder text is aligned to the right (near the magnifying glass)

Screen Shot 2021-12-09 at 9.14.29 AM.png (405×855 px, 85 KB)

Focus the search input
✅ AC2: Verify that the placeholder text is still aligned to the right (near the magnifying glass)
Screen Shot 2021-12-09 at 9.14.48 AM.png (405×867 px, 86 KB)

Edtadros updated the task description. (Show Details)Dec 9 2021, 5:17 PM
Edtadros reassigned this task from Edtadros to ovasileva.Dec 18 2021, 8:45 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: hewiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Go to https://he.wikipedia.org/wiki/Main_Page
✅ AC1: Verify that the placeholder text is aligned to the right (near the magnifying glass)

Screen Shot 2021-12-18 at 12.44.26 PM.png (349×856 px, 87 KB)

Focus the search input
✅ AC2: Verify that the placeholder text is still aligned to the right (near the magnifying glass)
Screen Shot 2021-12-18 at 12.44.56 PM.png (345×857 px, 87 KB)

Edtadros updated the task description. (Show Details)Dec 18 2021, 8:46 PM
Huji added a comment.Dec 19 2021, 2:27 AM

Is there a reason this is now working on hewiki but not on fawiki?

Jdlrobson added a comment.Dec 20 2021, 7:03 PM

@Huji it appears to work for me: https://fa.wikipedia.org/wiki/%D8%B5%D9%81%D8%AD%D9%87%D9%94_%D8%A7%D8%B5%D9%84%DB%8C?uselang=fa&safemode=1&useskinversion=2

Screen Shot 2021-12-20 at 11.01.09 AM.png (192×1 px, 21 KB)

Do you have a gadget running perhaps? Can you share screenshot of what you are seeing?

Huji added a comment.Dec 20 2021, 11:20 PM

I will do more investigations and get back to you, but as a start: the URL you provided works, but as soon as I remove the safemode=1 bit it fails to work (screenshot below).

image.png (102×1 px, 13 KB)

Huji added a comment.Dec 20 2021, 11:28 PM

I tried with a different account and it worked.

The problem is with a CSS-only gadget that I use to change the default font of the wiki: https://fa.wikipedia.org/wiki/MediaWiki:Gadget-pfont.css

I fixed it in this edit

Jdlrobson added a comment.Dec 20 2021, 11:40 PM

Thanks for investigating this @Huji

ovasileva closed this task as Resolved.Jan 4 2022, 11:07 AM

Thanks for double-checking @Huji! Looks like this one is all done

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 · Credits