Page MenuHomePhabricator
Create Task
Maniphest T407469

Voting success message close button on wrong side in RTL
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
HMonroy
Authored By
dom_walden
Oct 16 2025, 7:41 AM
Tags
Referenced Files
F70992658: 2025-12-10_15-15-05.webm
Dec 10 2025, 11:18 PM
F70838996: 2025-12-03_08-49-36.webm
Dec 3 2025, 4:52 PM
F70255760: 2025-11-17_09-40-19.png
Nov 17 2025, 5:49 PM
F70255757: 2025-11-17_09-40-10.png
Nov 17 2025, 5:49 PM
F70255753: 2025-11-17_09-38-55.png
Nov 17 2025, 5:49 PM
F70255739: 2025-11-17_09-37-12.webm
Nov 17 2025, 5:49 PM
F70255623: 2025-11-12_09-49-00.mp4
Nov 17 2025, 5:49 PM
F70255621: 2025-11-12_09-48-25.mp4
Nov 17 2025, 5:49 PM
View All 11 Files
Subscribers
Aklapper
alaa
dom_walden
GMikesell-WMF
hubaishan

Description

What is the problem?

After voting on a wish written in an RTL language, the green success message you see has the close button on the right. This overlaps the content of the success message.

If your content language direction matches the language of the wish, this bug does not happen.

Steps to reproduce problem
  1. Login to https://meta.wikimedia.beta.wmcloud.org
  2. Go to https://meta.wikimedia.beta.wmcloud.org/wiki/Community_Wishlist/W20
  3. Click "Support wish", "Edit comment" or "Remove support" and submit
Environment

Browser: Firefox 140
Wiki(s): https://meta.wikimedia.beta.wmcloud.org CommunityRequests – (20369cc) 03:05, 16 October 2025.

Screenshots

voting_success_message.png (417×995 px, 43 KB)

Derived Requirements

The voting success message must correctly mirror its layout in RTL languages.
When a user votes on a wish written in an RTL language, the green success message must display the close button on the left, ensuring it does not overlap the text content.
The layout must respect the content language direction, regardless of the UI language direction.

Test Steps

Preconditions

  • User is logged into https://meta.wikimedia.beta.wmcloud.org.
  • The wish being tested is written in an RTL language (e.g., Hebrew, Arabic).
  • UI is in a language that *does not* match the wish language direction to trigger the scenario (e.g., UI in English, wish in Hebrew).
  • Using Minerva skin unless specified otherwise.

Test Case 1: Verify Close Button Position in RTL Success Message

  1. Navigate to https://meta.wikimedia.beta.wmcloud.org/wiki/Community_Wishlist/W20.
  2. Select a wish written in an RTL language.
  3. Click Support wish, Edit comment, or Remove support, then submit.
  4. Observe the green voting success message.
  5. Review the layout of the close button.
  6. 🟩❓❌⬜ AC1: Confirm the close button appears on the left side in RTL contexts.
  1. 🟩❓❌⬜ AC2: Confirm the close button does not overlap any of the success message text.

Test Case 2: Verify Correct Behavior When UI Direction Matches Wish Language Direction

  1. Change your content language to match the wish language direction (e.g., switch UI language to Hebrew).
  2. Navigate again to the RTL wish page.
  3. Trigger a voting action (Support, Edit comment, or Remove support).
  4. Observe the green success message.
  5. 🟩❓❌⬜ AC3: Confirm that in this matching-direction scenario, the close button appears in the correct mirrored position for the language.

QA Results - Meta Beta

ACStatusDetails
1✅T407469#11380298
2✅T407469#11380298
3✅T407469#11449669

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Use content lang dir to display voting success messagemediawiki/extensions/CommunityRequestsmaster+2 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

dom_walden created this task.Oct 16 2025, 7:41 AM
Restricted Application added a project: I18n. · View Herald TranscriptOct 16 2025, 7:41 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
dom_walden updated the task description. (Show Details)Oct 16 2025, 8:39 AM
dom_walden updated the task description. (Show Details)
• MusikAnimal moved this task from Backlog to Voting on the MediaWiki-extensions-CommunityRequests board.Oct 23 2025, 9:54 PM
mikez-WMF triaged this task as Low priority.Oct 28 2025, 8:17 PM
• MusikAnimal edited projects, added Community-Tech (Sea Lion Squad); removed Community-Tech.Nov 3 2025, 10:27 PM
• MusikAnimal moved this task from Backlog - groomed to Ready (prioritized + estimated) on the Community-Tech (Sea Lion Squad) board.
HMonroy changed the task status from Open to In Progress.Nov 4 2025, 9:00 PM
HMonroy claimed this task.
HMonroy moved this task from Ready (prioritized + estimated) to In Development on the Community-Tech (Sea Lion Squad) board.
gerritbot added a comment.Nov 11 2025, 1:45 AM

Change #1203579 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/extensions/CommunityRequests@master] Use content lang dir to display voting success message

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

gerritbot added a project: Patch-For-Review.Nov 11 2025, 1:45 AM
HMonroy moved this task from In Development to Feedback and Review on the Community-Tech (Sea Lion Squad) board.Nov 11 2025, 1:47 AM
gerritbot added a comment.Nov 11 2025, 10:15 AM

Change #1203579 merged by jenkins-bot:

[mediawiki/extensions/CommunityRequests@master] Use content lang dir to display voting success message

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

HMonroy mentioned this in rECOR7f8bfa2cb9b5: Use content lang dir to display voting success message.Nov 11 2025, 10:16 AM
Maintenance_bot removed a project: Patch-For-Review.Nov 11 2025, 10:30 AM
ReleaseTaggerBot added a project: MW-1.46-notes (1.46.0-wmf.3; 2025-11-19).Nov 11 2025, 11:00 AM
HMonroy changed the task status from In Progress to Open.Nov 12 2025, 5:05 PM
HMonroy moved this task from Feedback and Review to QA on the Community-Tech (Sea Lion Squad) board.
GMikesell-WMF updated the task description. (Show Details)Nov 14 2025, 11:44 PM
GMikesell-WMF updated Other Assignee, added: GMikesell-WMF.
Restricted Application added a subscriber: hubaishan. · View Herald TranscriptNov 14 2025, 11:44 PM
GMikesell-WMF updated the task description. (Show Details)Nov 14 2025, 11:45 PM
Restricted Application added a subscriber: alaa. · View Herald TranscriptNov 14 2025, 11:45 PM
GMikesell-WMF subscribed.Nov 17 2025, 5:49 PM

@HMonroy Please review AC3, regarding mobile EN RTL, since the close button still overlaps, as seen in the video.

Test Result - Meta Beta

Status: ✅ PASS / ❌ FAIL
Environment: Meta Beta
OS: macOS Tahoe 26.1
Browser: Chrome 142
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

https://meta.wikimedia.beta.wmcloud.org/wiki/Community_Wishlist/W20

Preconditions

  • User is logged into https://meta.wikimedia.beta.wmcloud.org.
  • The wish being tested is written in an RTL language (e.g., Hebrew, Arabic).
  • UI is in a language that *does not* match the wish language direction to trigger the scenario (e.g., UI in English, wish in Hebrew).
  • Using Minerva skin unless specified otherwise.

Test Case 1: Verify Close Button Position in RTL Success Message

  1. Navigate to https://meta.wikimedia.beta.wmcloud.org/wiki/Community_Wishlist/W20.
  2. Select a wish written in an RTL language.
  3. Click Support wish, Edit comment, or Remove support, then submit.
  4. Observe the green voting success message.
  5. Review the layout of the close button.
  6. 🟩 AC1: Confirm the close button appears on the left side in RTL contexts.
Hebrew
  1. 🟩 AC2: Confirm the close button does not overlap any of the success message text.
En-RTL: SubmitEn-RTL: EditEn-RTL: Remove

Test Case 2: Verify Correct Behavior When UI Direction Matches Wish Language Direction

  1. Change your content language to match the wish language direction (e.g., switch UI language to Hebrew).
  2. Navigate again to the RTL wish page.
  3. Trigger a voting action (Support, Edit comment, or Remove support).
  4. Observe the green success message.
  5. ❌ AC3: Confirm that in this matching-direction scenario, the close button appears in the correct mirrored position for the language.

🟩See AC2

❌Mobile

❌ Mobile: En-RTL🟩 Mobile: Hebrew-RTL Submit🟩 Mobile: Hebrew-RTL Edit🟩 Mobile: Hebrew-RTL Remove
2025-11-17_09-38-55.png (1×828 px, 125 KB)
2025-11-17_09-40-10.png (1×760 px, 118 KB)
2025-11-17_09-40-19.png (1×823 px, 115 KB)
GMikesell-WMF changed the task status from Open to In Progress.Nov 17 2025, 5:51 PM
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from QA to In Development on the Community-Tech (Sea Lion Squad) board.
HMonroy changed the task status from In Progress to Open.Dec 2 2025, 12:31 AM
HMonroy added a parent task: T407349: Display all wishlist parts in current UI language.
HMonroy moved this task from In Development to QA on the Community-Tech (Sea Lion Squad) board.
GMikesell-WMF added a comment.EditedDec 3 2025, 4:52 PM

Test Case 2: Verify Correct Behavior When UI Direction Matches Wish Language Direction

  1. Change your content language to match the wish language direction (e.g., switch UI language to Hebrew).
  2. Navigate again to the RTL wish page.
  3. Trigger a voting action (Support, Edit comment, or Remove support).
  4. Observe the green success message.
  5. ❌ AC3: Confirm that in this matching-direction scenario, the close button appears in the correct mirrored position for the language.

🟩See AC2

@HMonroy issue still looks different, as seen in the video below.

https://meta.wikimedia.beta.wmcloud.org/wiki/Community_Wishlist/W20?useformat=mobile&uselang=en-rtl

❌ Mobile: En-RTL
GMikesell-WMF changed the task status from Open to In Progress.Dec 3 2025, 4:53 PM
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from QA to In Development on the Community-Tech (Sea Lion Squad) board.
HMonroy moved this task from In Development to Feedback and Review on the Community-Tech (Sea Lion Squad) board.Dec 5 2025, 10:46 PM
HMonroy changed the task status from In Progress to Open.Dec 10 2025, 5:28 PM
HMonroy moved this task from Feedback and Review to QA on the Community-Tech (Sea Lion Squad) board.
GMikesell-WMF added a comment.Dec 10 2025, 11:18 PM
In T407469#11429265, @GMikesell-WMF wrote:

Test Case 2: Verify Correct Behavior When UI Direction Matches Wish Language Direction

  1. Change your content language to match the wish language direction (e.g., switch UI language to Hebrew).
  2. Navigate again to the RTL wish page.
  3. Trigger a voting action (Support, Edit comment, or Remove support).
  4. Observe the green success message.
  5. ❌ AC3: Confirm that in this matching-direction scenario, the close button appears in the correct mirrored position for the language.

🟩See AC2

@HMonroy issue still looks different, as seen in the video below.

https://meta.wikimedia.beta.wmcloud.org/wiki/Community_Wishlist/W20?useformat=mobile&uselang=en-rtl

❌ Mobile: En-RTL

@HMonroy "X" is no longer crossing with the words anymore. I will mark this now as Resolved. Thanks for all your work!

✅ Mobile: En-RTL
GMikesell-WMF closed this task as Resolved.Dec 10 2025, 11:18 PM
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
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