| Lydia_Pintscher | |
| May 7 2025, 7:43 PM |
| F59937963: firefox-hover-more.png | |
| May 13 2025, 3:18 PM |
| F59937962: firefox-hover.png | |
| May 13 2025, 3:18 PM |
| F59751470: image.png | |
| May 7 2025, 7:43 PM |
| F59751455: image.png | |
| May 7 2025, 7:43 PM |
Problem:
Reported on Telegram: Today (May 7 2025) the colors of the statement UI changed in a way that makes it less readable when editing. That's an accessibility issue.
Hunch: It is related to the dark-mode changes for Vector 2022.
Screenshots/mockups:
State in Vector 2022:
State in old Vector:
Acceptance criteria:
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T366607 [Epic] Switch default skin on Wikidata.org to Vector 2022 | |||
| Resolved | Arian_Bozorg | T385039 [Epic] Update colours on Wikidata to work on dark mode on Vector 2022 | |||
| Resolved | ArthurTaylor | T389633 [Darkmode] Update colours on statement editing state on Items | |||
| Resolved | Arian_Bozorg | T393641 [Bug] color changes in statement UI for old Vector skin (and potentially others?) |
Nikki dug up https://gerrit.wikimedia.org/r/plugins/gitiles/data-values/value-view/+/4a9d997ac9f42a15afe1cd69ced523a6a6078c33%5E%21/#F0 as potentially related
It does seem to be those changes. Changing the values back by adding the following to my user CSS made it appear how it used to:
.ui-widget.ui-suggester-list { background: white; border-color: #C9C9C9; } .ui-suggester-list .ui-state-hover { background: #4C59A6; color: white; } .ui-suggester-list .ui-state-hover a, .ui-suggester-list .ui-state-hover a:hover { color: white; } .ui-suggester-list a { color: black; }
In Vector 2022 and MinervaNeue, it shows the same way as in Vector 2010 on mouse-hover (grey background, blue link highlighting). This should also be fixed. With Timeless, it displays the exact same way it does in Vector 2010 (automatically on, no hover needed).
Change #1143792 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[data-values/value-view@master] Fix hard-coded --background-color-base fallback value
Change #1143793 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD
There are two issues in here. One is that the background in skins other than Vector 2022 (and apparently MinervaNeue) is gray instead of white; this is a simple copy+paste mistake, fixed by the changes above. (This follow-up change would guard against similar mistakes in future, but needs more work.)
The other is the hover color, which is @color-progressive on @background-color-progressive-subtle, and which people are saying is not very readable. This part isn’t exactly a bug (at least not in the same way as the first part) – these are the colors specified by Design. However, it sounds like we should reconsider this part of the design. I’ll discuss this with @LarissaHonsek later today.
Change #1143792 merged by jenkins-bot:
[data-values/value-view@master] Fix hard-coded --background-color-base fallback value
Change #1143793 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD
Decision: we’ll change the reference state in Figma from “active” to “selected”. The “selected” state is @color-base on @background-color-progressive-subtle, which should have much better contrast (14.67 rather than 4.79 according to Firefox).
Change #1143832 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[data-values/value-view@master] Change UI suggester hover foreground to color-base
Change #1143834 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD
Change #1143835 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD
Change #1143835 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD
Mentioned in SAL (#wikimedia-operations) [2025-05-09T14:07:29Z] <lucaswerkmeister-wmde@deploy1003> Started scap sync-world: Backport for [[gerrit:1143835|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]]
Mentioned in SAL (#wikimedia-operations) [2025-05-09T14:14:10Z] <lucaswerkmeister-wmde@deploy1003> lucaswerkmeister-wmde: Backport for [[gerrit:1143835|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)
Mentioned in SAL (#wikimedia-operations) [2025-05-09T14:21:41Z] <lucaswerkmeister-wmde@deploy1003> Finished scap sync-world: Backport for [[gerrit:1143835|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] (duration: 14m 12s)
Change #1143841 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD
Change #1143832 merged by jenkins-bot:
[data-values/value-view@master] Change UI suggester hover foreground to color-base
Change #1143851 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD
Change #1143834 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Bump wikibase-data-values-value-view to HEAD
Change #1143859 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD
Change #1143851 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@wmf/1.44.0-wmf.28] Bump wikibase-data-values-value-view to HEAD
Mentioned in SAL (#wikimedia-operations) [2025-05-09T15:25:42Z] <lucaswerkmeister-wmde@deploy1003> Started scap sync-world: Backport for [[gerrit:1143851|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]]
Mentioned in SAL (#wikimedia-operations) [2025-05-09T15:32:20Z] <lucaswerkmeister-wmde@deploy1003> lucaswerkmeister-wmde: Backport for [[gerrit:1143851|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)
Mentioned in SAL (#wikimedia-operations) [2025-05-09T15:41:04Z] <lucaswerkmeister-wmde@deploy1003> Finished scap sync-world: Backport for [[gerrit:1143851|Bump wikibase-data-values-value-view to HEAD (T389633 T393641)]] (duration: 15m 22s)
This does not seem to work in Firefox (in the default skin)? In Edge, it works fine (well, I guess it works as designed? even though the 1.28:1 ratio of the highlight is not great, I’d say [and possibly does not fulfill WCAG accessibility criteria? dunno, no expert]). In Firefox, there is still no on-hover/keyboard navigation highlight at all. Well, there is a highlight on the “more” item; but there is a difference as well: without hover, it renders with white background, while on Edge, it renders with a light blue background (like the rest have in their on-hover state; when on-hover, it renders with a slightly-darker-blue background); huh.
I tried to find the offending style(s) but it is so complicated even the developer tools seem to be confused and show _different_ color values in the “Computed” tab. But maybe I’ve used that wrong. So, no idea there.
Firefox 138.0.3 on Windows 10. (And Edge 136.0.3240.64.) (Tested in a private window.)
Hovering above the first suggested row in Firefox:
Hovering above the “More” row in Firefox:
I don’t understand the issue… the first screenshot shows a highlight on the first row, as I would expect.
Whoa!?! That’s… impossible!! OK, the difference is not between Edge and Firefox, but between displays. When I open the screenshot on another display, the highlight is there. When I open it on the original display, the highlight is lost. Erm.
I executed “Reset Colors” in the display HW menu and… everything seems fine now! No idea what happened and when, as this seems to be the only color where I noticed a change, and the magic probably happened just around the time of this style change (or this style changed hit exactly the one problematic color??), so that was confusing.
Anyway, sorry for the fuss, nothing to see here, move along… :-/
Change #1143841 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD
Change #1143859 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@REL1_44] Bump wikibase-data-values-value-view to HEAD