Page MenuHomePhabricator
Create Task
Maniphest T367058

QA Growth-related OOUI updates (mobile + desktop)
Closed, ResolvedPublic
Actions

Assigned To
Etonkovidova
Authored By
ovasileva
Jun 10 2024, 1:41 PM
Tags
Referenced Files
F55931058: Screen Shot 2024-06-27 at 2.22.59 PM.png
Jun 27 2024, 9:36 PM
F55930680: Screen Shot 2024-06-27 at 1.56.09 PM.png
Jun 27 2024, 9:36 PM
F55631357: Screen Shot 2024-06-22 at 4.17.49 PM.png
Jun 23 2024, 12:04 AM
F55634802: Screen Shot 2024-06-22 at 4.54.08 PM.png
Jun 23 2024, 12:04 AM
F55634758: Screen Shot 2024-06-22 at 4.53.44 PM.png
Jun 23 2024, 12:04 AM
F55632764: Screen Shot 2024-06-22 at 4.30.30 PM.png
Jun 23 2024, 12:04 AM
F55632673: Screen Shot 2024-06-22 at 4.30.14 PM.png
Jun 23 2024, 12:04 AM
F55632449: Screen Shot 2024-06-22 at 4.27.09 PM.png
Jun 23 2024, 12:04 AM
View All 30 Files
Subscribers
Aklapper
KStoller-WMF
Michael
ovasileva
RHo

Description

Background

  • The web team will soon be releasing dark mode more widely. To prepare for this, DST have worked on switching OOUI to work in dark mode. As a part of this, we want to identify which, if any, parts of Growth-owned pages and extensions need further work after the OOUI changes are in place

User story

  • As a new editor who uses dark mode, I want the ability to use dark mode on the newcomer homepage and within Echo, so that I do not have an inconsistent experience

Requirements

  • Perform exploratory testing of OOUI dark mode fixes on:
    • The newcomer homepage
    • Suggested Edits & Structured Tasks
    • Mentor Dashboard
    • ✅ Help panel - no issues
    • ✅ CommunityConfiguration pages - no issues
    • Echo
    • Anywhere else the Growth team uses OOUI
  • Document any issues in a table

Test Results

  • For QA engineer to fill out

Not specifically Growth features related: saving an edit presents the Summary dialog with some non-readable elements:

Screen Shot 2024-06-22 at 4.27.40 PM.png (1×1 px, 521 KB)

Special:Homepage

due to the large number of UI issues are listed in T367372: [QA task] Homepage - dark mode UI evaluation

Suggested Edits & Structured Tasks
guided tours - many elements are non-readable
Screen Shot 2024-06-22 at 4.27.09 PM.png (1×830 px, 152 KB)
intro tours - many elements are non-readable
Screen Shot 2024-06-22 at 4.30.14 PM.png (1×1 px, 231 KB)
add link - the highlighted word is not visible
Screen Shot 2024-06-22 at 4.30.30 PM.png (924×1 px, 281 KB)
Special:RecentChanges/Watchlist
low contrast (an accessibility issue) in several places where oo-ui-image-invert is present<a class="oo-ui-buttonElement-button" role="button"><span class="oo-ui-iconElement-icon oo-ui-iconElement-noIcon oo-ui-image-invert"></span><span class="oo-ui-labelElement-label">50</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator oo-ui-image-invert"></span></a>
Screen Shot 2024-06-21 at 3.38.20 PM.png (624×684 px, 74 KB)
no invert color for a check marklight mode - the check mark for white circle (indicating that the highlight color is not used for the filters) is visible:
Screen Shot 2024-06-21 at 3.18.21 PM.png (1×1 px, 209 KB)
dark mode - no inverted colors for the check mark
Screen Shot 2024-06-21 at 3.45.48 PM.png (1×1 px, 289 KB)
Mentor Dashboard
the icons in a table header do not have inverted colors
Screen Shot 2024-06-22 at 4.53.44 PM.png (1×2 px, 311 KB)
the text under Claim mentee is not visible
Screen Shot 2024-06-22 at 4.54.08 PM.png (1×1 px, 100 KB)
Echo - Special:Notifications

The issues are present only on Special:Notifications

not visible elements
Screen Shot 2024-06-21 at 3.50.46 PM.png (1×2 px, 291 KB)
hovering over rows makes them unreadable
Screen Shot 2024-06-21 at 3.51.02 PM.png (1×2 px, 302 KB)
low contrast for oo-ui-image-invert
Screen Shot 2024-06-22 at 4.17.49 PM.png (1×2 px, 254 KB)

This task was created by Version 1.0.0 of the Web team task template using phabulous

Related Objects
Search...

Event Timeline

ovasileva created this task.Jun 10 2024, 1:41 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 10 2024, 1:41 PM
ovasileva triaged this task as High priority.Jun 10 2024, 1:41 PM
ovasileva moved this task from Incoming to Tracking on the Web-Team-Backlog board.
KStoller-WMF added a parent task: T366760: [EPIC] Dark mode for Growth team maintained features.Jun 10 2024, 2:59 PM
ovasileva added a project: FY2023-24-WE 2.1 Typography and palette customizations.Jun 10 2024, 3:03 PM
KStoller-WMF assigned this task to Etonkovidova.Jun 10 2024, 3:31 PM
KStoller-WMF updated the task description. (Show Details)Jun 10 2024, 3:34 PM
RHo subscribed.Jun 10 2024, 3:47 PM
KStoller-WMF moved this task from Inbox to Up Next on the Growth-Team board.Jun 10 2024, 3:48 PM
ovasileva added a parent task: T367150: Deploy dark mode to logged-out users in tier 1 and 2 wikis on the Vector2022 and Minerva skin.Jun 11 2024, 9:43 AM
KStoller-WMF moved this task from Up Next to Sprint 16 (Growth Team) on the Growth-Team board.Jun 11 2024, 4:37 PM
KStoller-WMF edited projects, added Growth-Team (Sprint 16 (Growth Team)); removed Growth-Team.
Etonkovidova updated the task description. (Show Details)Jun 12 2024, 12:25 AM
KStoller-WMF moved this task from Incoming to Blocked / Needs Work on the Growth-Team (Sprint 16 (Growth Team)) board.Jun 12 2024, 4:08 PM
KStoller-WMF added a comment.Jun 12 2024, 5:34 PM

I moved this to blocked to communicate that we should wait until the OOUI change was merged before testing.

This is done now: Codex 1.7.0, OOUI 0.50.0 has also been released and is now available on beta.
This release updates OOUI color variables to respect CSS custom properties in the same way that Codex does. This means that most parts of OOUI should seamlessly switch into dark mode along with the surrounding page (assuming you are on Vector or Minerva).
Details: T364777: [EPIC] Enable dark mode in OOUI.

However, I think we should also wait until this task is resolved T365764: [OOUI] Icons: Add support for use in dark mode before testing.

Etonkovidova mentioned this in T367372: [QA task] Homepage - dark mode UI evaluation .Jun 12 2024, 11:43 PM
Etonkovidova updated the task description. (Show Details)
Etonkovidova added a subtask: T367372: [QA task] Homepage - dark mode UI evaluation .
Etonkovidova updated the task description. (Show Details)Jun 12 2024, 11:46 PM
Jdlrobson moved this task from Backlog to Milestones on the FY2023-24-WE 2.1 Typography and palette customizations board.Jun 13 2024, 12:58 AM
Etonkovidova updated the task description. (Show Details)Jun 21 2024, 10:53 PM
Etonkovidova updated the task description. (Show Details)Jun 23 2024, 12:04 AM
KStoller-WMF moved this task from Sprint 16 (Growth Team) to Sprint 17 (Growth Team) on the Growth-Team board.Jun 27 2024, 5:24 PM
KStoller-WMF edited projects, added Growth-Team (Sprint 17 (Growth Team)); removed Growth-Team (Sprint 16 (Growth Team)).
Etonkovidova added a comment.Jun 27 2024, 9:36 PM

Copied the test results from https://phabricator.wikimedia.org/T366376#9932698

Test results - Special:CommunityConfiguration
DescriptionElement LocationScreenshot(s)
Accessibility issue - doesn't exist in Light mode Links must be distinguishable without relying on color (two issues).ext-communityConfiguration-Guidelines__Guideline:nth-child(1) > p > .external.text <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Community_configuration">Learn more</a>
Screen Shot 2024-06-27 at 1.56.09 PM.png (736×2 px, 195 KB)

Note: The issue "Links must be distinguishable without relying on color" is present for any link in Community Configuration modules.

Special:EnrollAsMentor and Special:MentorshipDashboard were tested on cswiki beta.

Test results - Special:EnrollAsMentor - ✅ No issues
Test results - Special:MentorshipDashboard
Descriptionscreenshots
the icons in the table are still not visible
Screen Shot 2024-06-27 at 2.22.59 PM.png (1×3 px, 333 KB)
Jdlrobson edited projects, added dark-mode; removed FY2023-24-WE 2.1 Typography and palette customizations, Web-Team-Backlog.Jul 1 2024, 8:03 PM
Jdlrobson moved this task from Backlog to Web (MediaWiki) on the dark-mode board.Jul 3 2024, 1:45 AM
Etonkovidova attached a referenced file: F55931058: Screen Shot 2024-06-27 at 2.22.59 PM.png. (Show Details)Jul 7 2024, 10:46 PM
Etonkovidova attached a referenced file: F55930680: Screen Shot 2024-06-27 at 1.56.09 PM.png. (Show Details)
Michael subscribed.Jul 8 2024, 4:16 PM
Etonkovidova closed this task as Resolved.Jul 10 2024, 9:23 PM

The found issues (reported in the task) were separated into phab tasks (see the tasks in the Task Graph for this task). Closing as Resolved since the scope of this task is done.

Etonkovidova closed subtask T369591: Dark mode: Special:Notifications as Resolved.Jul 11 2024, 7:50 PM
ovasileva edited parent tasks, added: T341632: [EPIC] Palette customizations and dark mode; removed: T367150: Deploy dark mode to logged-out users in tier 1 and 2 wikis on the Vector2022 and Minerva skin.Jul 15 2024, 10:08 AM
Etonkovidova closed subtask T367372: [QA task] Homepage - dark mode UI evaluation as Resolved.Jul 15 2024, 9:50 PM
Scardenasmolinar changed the status of subtask T369589: Dark mode: Special:RecentChanges/Watchlist from Open to In Progress.Jul 23 2024, 7:10 PM
Scardenasmolinar closed subtask T369589: Dark mode: Special:RecentChanges/Watchlist as Resolved.Aug 5 2024, 3:01 PM
Etonkovidova closed subtask T369590: Dark mode: Mentor Dashboard as Resolved.Nov 15 2024, 11:48 PM
Etonkovidova closed subtask T369588: Dark Mode: Suggested Edits & Structured Tasks as Resolved.Wed, Dec 11, 7:08 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 · Credits