@alexhollender can you take a look at what's proposed here and highlight any red flags? We'd like to make a start on this move to unlock other conversations with language team. We'd disable it to begin with to allow us to iterate so don't worry if it doesn't feel polished.

In T260738#6509950, @Jdlrobson wrote:

@alexhollender can you take a look at what's proposed here and highlight any red flags? We'd like to make a start on this move to unlock other conversations with language team. We'd disable it to begin with to allow us to iterate so don't worry if it doesn't feel polished.

To clarify: this is the proposed, permanent solution for non-JS users?

• how will the languages be organized in the flat list?
• do we know that that component can handle overflow/scrolling?

To clarify: this is the proposed, permanent solution for non-JS users?

In terms of the format - list operating like the more menu, that's the proposal, but other better solutions are welcome if you have any.

how will the languages be organized in the flat list?

It would be a long list identical in order to the existing format in the sidebar

do we know that that component can handle overflow/scrolling?

Yes. If you want to play around with the design challenges for a scrollable list you can use the following code for the existing more menu.

for(var i =0; i< 100; i++ ) {mw.util.addPortletLink('p-cactions', '#', 'item ' + i);}
$('#p-cactions .menu').css({height: 200, overflow: 'scroll'})

Noting that the eventual styling of the button will be different (although that shouldn't prevent us from starting this task)

I've made a proof of concept for how this would work.
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/635080

For now I've ignored the problem of the indicators and tweaking the design to be perfect, so it's not complete in that sense. However it does show how we can render a button in new Vector that works without JS and is compatible with ULS.

A short comment on the, what I understand, current proposal for non-JS users:

That screenshot is outdated. Please refer to the latest patch to see how this works.
(Also note this task about moving the menu and adding a button and putting it behind a feature flag - styling will be done in a follow up task)

Change 621084 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Languages can be moved out of sidebar

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

Change 621084 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Languages can be moved out of sidebar

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

Change 659077 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[operations/mediawiki-config@master] Enable language in header on beta cluster for QA purposes

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

Change 659077 merged by jenkins-bot:
[operations/mediawiki-config@master] Enable language in header on beta cluster for QA purposes

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

This can now be tested/seen on https://en.wikipedia.beta.wmflabs.org/wiki/Test_indicators in all its messy glory. Have raised T273144 and T273143 for issues I've seen so far.

Test Result - Beta

Status: In Progress
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to https://en.wikipedia.beta.wmflabs.org/wiki/Test_indicators per T260738#6782652

❓ AC1: The language button is feature flagged and disabled by default
Not sure how to verify this in beta.

✅ AC2: A new language menu dropdown is added to the top right of the page.

❓ AC3: The language dropdown is limited in height with vertical scrolling for long lists.
What is the limit? How can I add more languages?

✅ AC4: The dropdown uses the existing Vector MenuDropdown component

❌ AC5: When clicking the menu with JS disabled the list of menus reveals itself.
The menu is revealed on hover. Clicking doesn't make it open or close.

❓ AC6: Minimize any styling changes here, but revise/remove any of the styles in the existing drop down styles that don't apply to this new component.
Per T260738#6631623, styling will be part of a later task. Does this need to be verified?

✅ AC7: The list of languages are removed from the sidebar. There is no settings cog in modern Vector with feature flag enabled.

✅ AC8: Vector legacy is not impacted.

❌ AC9: The label will need to be changed from Languages to "<num> languages", which is a fork from the data given by SkinMustache and will require modification in Vector either via hook or
I'm unsure if this is implemented or not. There is only one language on the test page.

❓ AC1: The language button is feature flagged and disabled by default

Not sure how to verify this in beta.
This can be a pass since I had to turn it on and can confirm it didn't show prior to that. We can also confirm it does not show up on mediawiki.org

AC6: Minimize any styling changes here, but revise/remove any of the styles in the existing drop down styles that don't apply to this new component.

No need to verify

AC3: The language dropdown is limited in height with vertical scrolling for long lists.

What is the limit? How can I add more languages?

I don't think this has been discussed. @alexhollender what do you think should happen for longer lists?

AC5: When clicking the menu with JS disabled the list of menus reveals itself.

The menu is revealed on hover. Clicking doesn't make it open or close.

Let's open a bug for this during sign off. It seems to impact the more menu too.

Test Result - Beta

Status: In Progress
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to https://en.wikipedia.beta.wmflabs.org/wiki/Test_indicators per T260738#6782652

✅ AC3: The language dropdown is limited in height with vertical scrolling for long lists.
Per standup and discussion with Alex, I modified the HTML to have more languages in the list. The maximum before it starts scrolling is 7 languages.