Page MenuHomePhabricator

Language button v1 - allow language button to appear at top of page (plus JS fallback)
Closed, ResolvedPublic3 Estimated Story Points

Description

Prototype: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/635080

We will move the language switcher to the top right in three phases. These phases will be 1) moving the language switcher and providing non-JS fallback 2) Progressive enhancement via Vue.js or existing code (pending further discussion and 3) moving the language cog (for selecting interface language). This task concerns phase 1.

presentproposed

acceptance criteria

  • The language button is feature flagged and disabled by default
  • A new language menu dropdown is added to the top right of the page. This sidesteps T104660
  • The language dropdown is limited in height with vertical scrolling for long lists.
  • The dropdown uses the existing Vector MenuDropdown component
  • When clicking the menu with JS disabled the list of menus reveals itself.
  • 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.
  • The list of languages are removed from the sidebar. There is no settings cog in modern Vector with feature flag enabled.
  • Vector legacy is not impacted.
  • 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

Note: The settings cog will be later reconfigured as it is on Wikimedia Commons so is inside ULS like this:

Sign off steps

  • A task is created to style the menu as a button
  • A task is created to wire up ULS

additional material

https://docs.google.com/presentation/d/18leDJOJ1ldXQ_zr5kD9Kl7Z-F-Ab2j8ao9CiOwQm7CQ/edit#slide=id.g6b27b3c96d_0_1

Mocks

Mock 1 - language button

QA Results - Beta

QA Results - Prod

ACStatusDetails
1-9T260738#6842555

Event Timeline

Jdlrobson renamed this task from Language dropdown accessible without JavaScript to [Languages 1/3] Language dropdown accessible without JavaScript.Aug 18 2020, 9:20 PM
Jdlrobson updated the task description. (Show Details)
ovasileva triaged this task as Medium priority.Oct 1 2020, 6:06 PM
ovasileva raised the priority of this task from Medium to High.

@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.

@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.

ovasileva renamed this task from [Languages 1/3] Language dropdown accessible without JavaScript to Language button v1 - allow language button to appear at top of page (plus JS fallback) .Nov 18 2020, 5:07 PM

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


We should orient on Special:RecentChanges element and use Accent50 for interaction label. It's problematic to have this not indicated active.

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)

ovasileva updated the task description. (Show Details)

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.

Edtadros added a subscriber: Edtadros.

@Jdlrobson please take a look at the ❓ and ❌ T260738#6783865.

❓ 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

✅ AC1: The language button is feature flagged and disabled by default
see T260738#6785478

✅ 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.
@Jdlrobson / @alexhollender 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.


Per T260738#6785478 a bug should be opened for this during signoff.

⬜ 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 per T260738#6631623,

✅ 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

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.

As discussed in standup, this will be validated in production with the main task.