Page MenuHomePhabricator

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



  • 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


  • 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)


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)
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

Event Timeline

ovasileva moved this task from Incoming to Tracking on the Web-Team-Backlog board.

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.

Copied the test results from

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="">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
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)

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.