Blocks deployment to French Wikipedia [...]

What does it mean? Does this totally block the activation of the night mode as a beta feature on these projects?

In T359644#9618777, @Lofhi wrote:

Blocks deployment to French Wikipedia [...]

What does it mean? Does this totally block the activation of the night mode as a beta feature on these projects?

For desktop, yes. We will consider deployment to projects where we are confident that night mode will be accessible. We are doing this by using reports generated on https://night-mode-checker.wmcloud.org/ for each project. We cannot respond promptly to projects that are not using the standard markup so we cannot deploy the feature to these projects in confidence.

For example, at the time of writing, the top 100 most read articles on French Wikipedia have 5570 errors compared to the 286 errors we see for the top 100 most read for Polish which does use the standardized markup.

In short: The sooner French Wikipedia addresses this issue the quicker the feature will be activated. Currently because French Wikipedia does not do this, the number of accessibility issues is unacceptably high.

How do you expect projects to correct their issues by making night mode inaccessible?

In T359644#9624213, @Lofhi wrote:

How do you expect projects to correct their issues by making night mode inaccessible?

I'm not sure I understand the question @Lofhi.

There are no inaccessibility issues in the MediaWiki software. Inaccessibility issues arise with a dark mode theme when templates/wikitext styles content using inline styles or TemplateStyles that were built under the assumption of a certain color scheme that previously applied to content in the non-dark mode. Inaccessibility issues already exist on various projects in the standard mode.

The new issues that arise with dark mode and how to fix them are documented on mediawiki.org . Editors can use the recommendations there to make their content compatible with dark mode and we will be actively assisting communities in implementing them. It is our expectation that when dark mode is shipped that the dark mode will be more accessible than the standard mode.

To reduce the workload of communities, we are shipping styles that handle roughly 70-90% of cases for projects that follow the recommendations we been making for mobile friendly content since 2018. Since French Wikipedia and other projects do not follow these guidelines they do not benefit from those fixes which means additional work required on their side which will result in a delay with the deployment.

Does this help?

Let me rephrase: how do you expect us to notice compatibility problems with night mode if we have to constantly add ?vectornightmode=1 to the URL? By not blocking the beta feature rollout, you allow frwiki registered editors to use night mode as they choose, and to report problems as they read through our two million (almost three) articles.

In T359644#9625118, @Lofhi wrote:

Let me rephrase: how do you expect us to notice compatibility problems with night mode if we have to constantly add ?vectornightmode=1 to the URL? By not blocking the beta feature rollout, you allow frwiki registered editors to use night mode as they choose, and to report problems as they read through our two million (almost three) articles.

You will not need to constantly add the query string. French is one of our initial pilot projects. The feature will be accessible within the mobile site to a limited audience next week. We will be advertising this to technical editors. You can track the deployment at T359152.

( The reason for initially launching this on mobile first is that desktop beta features are also used by non-technical editors (who will be unable to edit templates). We are not comfortable at this time with the amount of scrutiny that will come with a beta launch.)

Alright. I don't really know how do you want to enable the dark mode only for the technical editors but I can only wait.

Also I want to say that the changements required by the WMF will take weeks. For example, migrating all our V2 infobox to V3/Lua (they use the same styles) is heavily based on community feedback and wikiprojects requirements. We are talking about +500 infobox. Same for every others “standardized” classes. Templates banners are centralized with meta-templates for years, but still we are not using .ambox

Secondary question: can you confirm that nearly every CSS rules (except rules used nearly everywhere) should be pushed in TemplateStyles subpages from Common.css? Back in time, there were performances discussions about caching of CSS... But you are caching HTML-parsed articles, right? So what is the problem of heavily using internal TemplateStyles CSS rules? The only problem will be to give replacements for misused CSS global classes, but I put my hopes on Codex tokens to fix it by bundling a set of meta-classes compatible with night mode into Common.css. Same, we are talking about weeks. Weeks + weeks = months.

Does WMF have a position on frwiki's infobox header colors? At the very least, they need to be reworked for contrast, but would WMF argue that it would be better to adopt a consistent, global color for all of them?

Hi @Lofhi just a note to say I saw your question and I'm trying to find you an answer :-)

Should the link in the task be to Use standardized class names in HTML markup for components in templates across projects section which seems more relevant to night mode?

BTW I just checked articles on the top 10 Wikipedias by size and not one of them places infobox templates below the first paragraph in wikitext. I don't think I've ever seen this being done in practice

Thanks for the correction! I've updated the description.

BTW I just checked articles on the top 10 Wikipedias by size and not one of them places infobox templates below the first paragraph in wikitext. I don't think I've ever seen this being done in practice

Yes this is correct. The infobox class is also a requirement for the infobox to be moved below the first paragraph.

This might be outside of this task, but I would be very interested in understanding any of the justification for the color and style/layout choices in templates, including the headings on the main page. @Jdlrobson Is there anywhere to see all of the different kinds of templates? Has such an audit been done, or might there be a page with most if not all of them? Though I've noticed even the same type of template doesn't mean it gets the same color or style treatment.

In T359644#9640524, @DTorsani-WMF wrote:

This might be outside of this task, but I would be very interested in understanding any of the justification for the color and style/layout choices in templates, including the headings on the main page. @Jdlrobson Is there anywhere to see all of the different kinds of templates? Has such an audit been done, or might there be a page with most if not all of them? Though I've noticed even the same type of template doesn't mean it gets the same color or style treatment.

What do you mean about "main pages"? Are you talking about wikis' main pages? Because the question could be expanded on the usages of colors of every templates on every page. On frwiki for example, the main page is directly using HTML tags with CSS rules defined in Commons.css.

Yes, the projects truly miss an official large palette of colors. New Codex color design tokens are not enough to be reused on projects. The old design style guide was not enough neither. It would be nice if WMF could define secondary accessible (WGAG compliant) of a large color sets, even if not used directly by WMF for the MediaWiki interface.

I already asked for reusable Codex components, but I am asking way too much for the ressources of the team currently, see T355242#9485341, T355242#9486457 and now T357463. For the moment, the team seems to focus on officially supporting a night mode palette, see T357835.

I meant https://en.wikipedia.org/wiki/Main_Page but am I interested in all templates on every page like you say. It is helpful to know that a broader color palette is wanted.

In T359644#9651178, @DTorsani-WMF wrote:

I meant https://en.wikipedia.org/wiki/Main_Page but am I interested in all templates on every page like you say. It is helpful to know that a broader color palette is wanted.

You will clearly not have one answer and there are multiple answers per project. For example, some "themes" of biographical infobox are defined here on frwiki: https://fr.wikipedia.org/wiki/Mod%C3%A8le:Infobox_Biographie2#Chartes_graphiques (but mainly in Module:Infobox/Biographie/Chartes).
The main motivation was: does this look good on my normal properly functioning eyes? Overall, accessibility has always taken second place on all projects, despite the efforts of some.
And again, in this particular case, there was an effort to choose colors by theme (sportsmen, artists, etc.) even if it doesn't make sense, since not everyone's perception of color is the same. The rest of the infoboxes are an arbitrary choice... like the majority of the templates.

For frwiki main page, the rework was done in 2017: https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Refonte_de_2017_de_l%27Accueil_principal_(FAQ)
@Trizek-WMF could bring some details about it since they were involved.

(volunteer hat on)

@DTorsani-WMF For en.wikipedia https://en.wikipedia.org/wiki/Wikipedia:List_of_infoboxes has a list of infoboxes which should be mostly complete. But that's not counting navboxes and other kinds of templates. https://en.wikipedia.org/wiki/Help:Using_colours also has some info, but I don't know how closely it is followed

As for the Main Page, the main colors have been the same since 2006(!) and I don't know how they were decided. See the latest discussion about changing the Main Page for an example of how difficult it is to get any kind of agreement. Although if there are some specific changes identified which would benefit night mode, that might be helpful.

I'd like to point out that frwiki has begun finalizing the transition of its V2 infoboxes, which has been going on for years, to V3 or Lua infoboxes. This will eventually enable the use of the standardized class, but it will take several weeks (months) since these changes are often held up by the need for consensus.

This migration will also facilitate potential discussions on the use of colors (like infobox headers) that are incompatible with accessibility, but I think that's rather far off the schedule for the moment.

In other words, I think it's acceptable for WMF to apply short-term fixes in MediaWiki until the community fixes are complete.

@Lofhi that's great news! One other idea I had is that could perhaps use another class in the mean time e.g. if you added fr_infobox to every infobox (both v2 and v1). I think if you did that, we could do something our side to speed up getting you night mode fixes. Let me know what you think.

Moving back to tech prioritization until have some clarity if there is some wiggle room here with introducing a new class.

In T359644#9683323, @Jdlrobson wrote:

Moving back to tech prioritization until have some clarity if there is some wiggle room here with introducing a new class.

Waiting opinions, https://fr.wikipedia.org/wiki/Discussion_Projet:Infobox#c-Lofhi-20240403082100-Support_du_mode_nuit_avec_une_classe_CSS_temporaire

Request made to add infobox--frwiki class to infoboxes, https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Demande_d%27intervention_sur_une_page_prot%C3%A9g%C3%A9e#c-Lofhi-20240411080200-Mod%C3%A8le:Classes_d%C3%A9but_infobox_(d_%C2%B7_h_%C2%B7_j_%C2%B7_%E2%86%B5)

Dunno if the BEM notation is needed, but I thought it was a good idea for organising since others projects also need WMF short-term fixes.

.infobox--frwiki is now used for every infobox (ref).

Change #1020386 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikimediaMessages@master] Allow sites to alter the infobox selector for night theme styles

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

Change #1020386 abandoned by Jdlrobson:

[mediawiki/extensions/WikimediaMessages@master] [POC] Allow sites to alter the infobox selector for night theme styles

Reason:

The "e" string function doesnt appear to be accessible in our version of LESS so this might be a non-starter :(

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

Change #1020386 restored by Jdlrobson:

[mediawiki/extensions/WikimediaMessages@master] [POC] Allow sites to alter the infobox selector for night theme styles

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

@ovasileva I think there is a way we can partially solve this issue now - at least for night theme styles that we should discuss.
The above patch will allow us to change the CSS class for _targeting infoboxes without bloating the CSS for all projects.

The change would look like follows:

• https://gerrit.wikimedia.org/r/1020386

If that doesn't make sense we could consider adding styles just for French but that would set a precedent for doing so for other projects and increasing the overall CSS we ship to all users so I want to be careful about taking that approach without a plan to remove it in future.

@Lofhi French can also now adopt the infobox class and disable the styles associated with infoboxes if they want to use their own using the approach outlined at https://www.mediawiki.org/wiki/Extension:WikimediaMessages#Disabling_styles - I'm not 100% sure what was the outcome of the discussion @Trizek-WMF was having with Od1n on https://fr.m.wikipedia.org/wiki/Wikip%C3%A9dia:Questions_techniques/semaine_10_2024 but if that's a possibility that would fix this much quicker (days rather than weeks).

In T359644#9724906, @Jdlrobson wrote:

@Lofhi French can also now adopt the infobox class and disable the styles associated with infoboxes if they want to use their own using the approach outlined at https://www.mediawiki.org/wiki/Extension:WikimediaMessages#Disabling_styles - I'm not 100% sure what was the outcome of the discussion @Trizek-WMF was having with Od1n on https://fr.m.wikipedia.org/wiki/Wikip%C3%A9dia:Questions_techniques/semaine_10_2024 but if that's a possibility that would fix this much quicker (days rather than weeks).

Ehm, why? I don't follow you. .infobox--frwiki was added to infoboxes for WMF needs, but now I see with the change #1020386 that the selector will match "any node which has a class prefixed with infobox". What was the purpose of the recent frwiki changes anyway? Ancestral frwiki classes .infobox_v2 and .infobox_v3 will also be _targeted by this selector.

The outcome of the discussion with Od1n is totally different, now, because at the time the idea was to force the use of the .infobox class without the possibility of mitigating the embedded CSS rules (skins.minerva.content.styles/hacks.less)/behaviors (MoveLeadParagraph). Today, it seems that a wiki can avoid the side effects of .infobox on Minerva (for example since the wiki isn't ready) by using other classes (.infobox_v2, .infobox_v3 or even .infobox--frwiki) while enjoying night mode.

I need clarification on the approach. Yes, frwiki should follow the conventions, but no, the wiki isn't ready for all of them yet. And I guess this could happen on any other wiki.

French Wikipedia should still work towards adding the infobox class on all its projects. If that's not the goal we need to talk and make sure we're on the same page :-). If all projects standardize to have the infobox class it's better for bots, screen scrapers (and thus SEO), crawlers, APIs, MobileFrontend etc.. as it allows all these things to identify what the infobox in the page is.

My understanding was that the reason French Wikipedia doesn't use the infobox class is because:

1. it dislikes the alteration of appearance that occurs via skins.minerva.content.styles/hacks.less
2. It believes the infobox should be at the top of the page e.g. we should disable MoveLeadParagraph.

However, it would benefit from the night mode styles given the amount of errors in night mode caused by having the non-standard selector.

French Wikipedia can now disable both of these things:

1. the hacks.less CSS by using https://www.mediawiki.org/wiki/Extension:WikimediaMessages#Disabling_styles
2. configuring $wgMFNamespacesWithLeadParagraphs. to disable lead paragraph hoisting

As a short term and temporary fix we could apply https://gerrit.wikimedia.org/r/1020386 to ship those night mode styles quicker given you are now providing the infobox--frwiki class.

What am I misunderstanding?

In T359644#9726811, @Jdlrobson wrote:

French Wikipedia should still work towards adding the infobox class on all its projects. If that's not the goal we need to talk and make sure we're on the same page :-). If all projects standardize to have the infobox class it's better for bots, screen scrapers (and thus SEO), crawlers, APIs, MobileFrontend etc.. as it allows all these things to identify what the infobox in the page is.

My understanding was that the reason French Wikipedia doesn't use the infobox class is because:

1. it dislikes the alteration of appearance that occurs via skins.minerva.content.styles/hacks.less
2. It believes the infobox should be at the top of the page e.g. we should disable MoveLeadParagraph.

The reason about frwiki not using the .infobox class is above all a lack of hands and consensus was hard to reach, which explains the still unfinished transition from "V2" to "V3" infoboxes (and so different CSS rules and HTML layout).
And this lack of hands means that our style rules conflict with the "site admin helper templates" from the WMF. This is not to say that our CSS rules are all good and state-of-the-art. Od1n also found that reused templates styles rendered generally better when using .infobox. Except that it was on the mobile version that the conflicts were most visible. So yes, the long-term objective is to get closer to the WMF conventions. I don't think frwiki's technical editors have any arguments against standardization. Except that it's very difficult to integrate.

In T359644#9726811, @Jdlrobson wrote:

French Wikipedia can now disable both of these things:

1. the hacks.less CSS by using https://www.mediawiki.org/wiki/Extension:WikimediaMessages#Disabling_styles
2. configuring $wgMFNamespacesWithLeadParagraphs. to disable lead paragraph hoisting

I don't think anyone wants to disable MoveLeadParagraph on frwiki. On the contrary, we should do everything we can to make it work for us too. Except that today MoveLeadParagraph only works with .infobox as the selector? Without the new feature for disabling styles we couldn't take advantage of the feature without getting broken-rendered infoboxes. Note: I'm working on a recommendation for the community to push the infoboxes below the first paragraph. I expect to submit it early next month. Exchanges may be extensive and results long to be propagated.

With the recent progress you have made, we can now begin a real transition towards standardization (for bots, screen scrapers, SEO, crawlers, APIs, MobileFrontend, etc.) because we can use the classes without being affected by any alteration of appearance. Meaning that one day, in a future perfect world that we hope, we could use the standard classes and upstream styles from the WMF templates into our own templates at our own pace, to the point of using most of them.

So the clarifications I need are:

• Will .infobox--frwiki be used only for WMF night mode fixes until the community fixes them itself?
• Is .infobox--frwiki needed if we add the .infobox class instead with the disabling styles (i.e. adding infobox in MediaWiki:wikimedia-styles-exclude)
• Could our .infobox_v2 and .infobox_v3 classes match by accident since you're just looking for infobox?

And this lack of hands means that our style rules conflict with the "site admin helper templates" from the WMF. This is not to say that our CSS rules are all good and state-of-the-art. Od1n also found that reused templates styles rendered generally better when using .infobox.

Right and you can now disable the site admin helper template rules which it seem like you understand. Let me know if you need any more information on that.

I don't think anyone wants to disable MoveLeadParagraph on frwiki.

That's good to hear! Right now this doesn't work though because French Wikipedia doesn't use the infobox class.

Is .infobox--frwiki needed if we add the .infobox class instead with the disabling styles (i.e. adding infobox in MediaWiki:wikimedia-styles-exclude)

Nope it wouldn't be needed.

Will .infobox--frwiki be used only for WMF night mode fixes until the community fixes them itself?

Yes this was my understanding (assuming you don't replace infobox--frwiki to infobox.

Anyway, thanks again for getting us to where we are now! It's definitely looking a lot more optimistic than it was a month ago so I want to make sure you know I appreciate your efforts in this space! I know consensus is hard to build!

Could our .infobox_v2 and .infobox_v3 classes match by accident since you're just looking for infobox?

So we haven't agreed on an approach yet but we have two options we are considering:

1. we _target .infobox---frwiki. The benefit of this is it _targets French only, the downside is all projects would get unused CSS and it wouldn't help other projects e.g. say italian adding infobox--it.
2. We _target any class beginning with infobox-. The benefit is we could recommend other projects other than French follow suit, but on the downside code is less readable.
3. We _target any class beginning with infobox. The benefit is we can minimize CSS rules. Downside is it would match infobox_v2 and infobox_v3 here (but it sounds like they already have infobox--fr so maybe that's okay?)

Does that make sense?

Change #1021552 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/WikimediaMessages@master] [POC] Apply night mode fixes to French Wikipedia infoboxes

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

In T359644#9728041, @Jdlrobson wrote:

Anyway, thanks again for getting us to where we are now! It's definitely looking a lot more optimistic than it was a month ago so I want to make sure you know I appreciate your efforts in this space! I know consensus is hard to build!

So we haven't agreed on an approach yet but we have two options we are considering:

1. we _target .infobox---frwiki. The benefit of this is it _targets French only, the downside is all projects would get unused CSS and it wouldn't help other projects e.g. say italian adding infobox--it.
2. We _target any class beginning with infobox-. The benefit is we could recommend other projects other than French follow suit, but on the downside code is less readable.
3. We _target any class beginning with infobox. The benefit is we can minimize CSS rules. Downside is it would match infobox_v2 and infobox_v3 here (but it sounds like they already have infobox--fr so maybe that's okay?)

Does that make sense?

Thank you for these answers! I think we should concentrate on night mode for now. I don't know the repercussions of using .infobox without embedded styles in MediaWiki (even if we can import some rules). It's something that would require analyzing the CSS styles on the mobile version. I don't want to see anything broken because of a lack of experience about how frwiki is built with its templates and frwiki-own-styles, and I'd prefer feedback from contributors like Od1n before going any further.

It means we should keep .infobox---frwiki for the moment. Next step is to simply use .infobox and disabling embedded styles. Then the next step is trying to catch up the upstream after the "V2" to "V3" frwiki infoboxes transition is done.

This leaves it up to you to decide how to propagate the patches to as many wikis as possible. Whether you want to create style rules for each wiki or generalize them. Once I've heard back from contributors who've been involved in frwiki maintenance longer than I have, I'll be back to tell you how it's going. I don't think the current situation is now blocking your work, and that's why I pushed .infobox---frwiki as early as possible

Edit: I asked opinions about it on this page

Estimating a 2 for the solution for frwiki, will set up a parent ticket tracking solutions for other projects

We repurposed this ticket to be about French. Creating new epic for other projects: T363197

Change #1020386 abandoned by Jdlrobson:

[mediawiki/extensions/WikimediaMessages@master] [POC] Allow sites to alter the infobox selector for night theme styles

Reason:

We discussed a generalized approach and decided to do this at a later date if and when another community takes this approach. https://gerrit.wikimedia.org/r/c/1021552 matches the favored approach more closely.

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

Change #1023533 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/extensions/WikimediaMessages@master] feature(WikimediaMessages): Enhance night mode CSS for infoboxes compatibility

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

Change #1023533 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] feature(WikimediaMessages): Enhance night mode CSS for infoboxes compatibility

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

Change #1021552 abandoned by Jdlrobson:

[mediawiki/extensions/WikimediaMessages@master] [POC] Apply night mode fixes to French Wikipedia infoboxes

Reason:

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

@Mabualruz but I noticed a typo while going through checklist so this one needs more work (See gerrit patch https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikimediaMessages/+/1023533)

Change #1023536 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/extensions/WikimediaMessages@master] fix(WikimediaMessages): Correct class naming in theme-night.less

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

Change #1023536 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] fix(WikimediaMessages): Correct class naming in theme-night.less

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

I've updated the BDD (based off of the Acceptance Criteria) and Test Steps as well. This will be tested on frwiki in production as part of the deployment task as suggested in the task description.

frwiki is now also using the class .infobox. We should delete .infobox--frwiki in the future, but for now please keep it. The use of the standardized class means that the first introductory paragraph is also be moved on the top on the mobile version, so let's wait for possible comments.

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Label Update to Dark/Light

✅ AC1: The infobox should appear below the lead paragraph
Test Case 1: Verify WCAG Color Contrast Standards in Night Mode

Navigate to a French Wikipedia page that includes an infobox--fr on a mobile device.
Switch the page view to night mode.
AC1: Use a WCAG color contrast checker tool to verify that all elements within the infobox--fr meet the required contrast ratios.
Test Link- https://fr.m.wikipedia.org/wiki/Polar_Pod?minervanightmode=1
Resolution- 820x1180

✅ AC2: The infobox should be friendly in night mode.
Test Case 2: Verify Placement of infobox--fr in Mobile View

Navigate to a French Wikipedia page that includes an infobox--fr on a mobile device.
AC2: Confirm that the infobox--fr appears below the lead paragraph.