Improvements to language button
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	May 26 2021, 7:23 PM

Description

The following issues should be addressed with this task:

the language button should be keyboard accessible (i.e. you should be able to focus it via the tab key)
the language button should show a focus state when it is focused (which should match the focus state of the user menu button)
the language button should not have a darker background when you are hovering over the menu below
the color of the text, and both icons (the language icon, and the down arrow), should be #000000
fix the hover state: the button text should not get lighter when you hover over the button, it should remain #000000

QA Steps

Ensure the language button has the same button states as the quiet buttons in WVUI
Test multiple combinations of button states, i.e. hover and focus, focus and active
Test language button with javascript turned off
Test everything above in multiple browsers

QA Results - Beta

AC	Status	Details
1	✅	T283757#7359843
2	✅	T283757#7359843
3	✅	T283757#7359843
4	✅	T283757#7359843

QA Results - Beta

AC	Status	Details
1	✅	T283757#7368943
2	✅	T283757#7368943
3	✅	T283757#7368943
4	✅	T283757#7368943

Details

Subject	Repo	Branch	Lines +/-
Language button should prevent default click behavior	mediawiki/extensions/UniversalLanguageSelector	master	+16 -1
Update ULS button states to be consistent with other quiet buttons	mediawiki/skins/Vector	master	+8 -41
Simplify how we generate icons and button classes in Vector	mediawiki/skins/Vector	master	+116 -53
Align mw-ui-button with spec	mediawiki/core	master	+60 -24
Update mw-ui-quiet button states to match specs	mediawiki/core	master	+8 -9
Update Html::makeLink to support icon use case in Vector	mediawiki/core	master	+9 -1

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T275766 Log sessionID, isAnon, editBucketCount, and selectedLanguage properties in the UniversalLanguageSelector instrument
Resolved	ovasileva	T275794 Log time on page before switching language as part of the UniversalLanguageSelector instrument
Resolved	ovasileva	T256023 [EPIC] Improve language switching capabilities
Resolved	ovasileva	T268241 Style language button and menu
Resolved	ovasileva	T283757 Improvements to language button

Event Timeline

• alexhollender_WMF created this task.May 26 2021, 7:23 PM

ovasileva triaged this task as Medium priority.May 27 2021, 9:34 AM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-FY-2020-21).

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

• alexhollender_WMF added a parent task: T268241: Style language button and menu.Jun 1 2021, 6:48 PM

ovasileva moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog board.Jun 7 2021, 3:55 PM

@ovasileva @Volker_E can we do this before rolling out more widely?

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2020-21); removed Web-Team-Backlog.Jul 28 2021, 8:27 PM

LGoto edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Kanbanana-FY-2020-21).Aug 2 2021, 9:26 PM

• alexhollender_WMF updated the task description. (Show Details)Aug 2 2021, 11:09 PM

The language button doesn't have the right states as it doesn't get impacted by hover states, given it uses a checkbox hack. I suggest we update the MediaWiki core rules so that they also apply to input[type=checkbox]:checked ~ .mw.ui-button

LGoto set the point value for this task to 2.Aug 10 2021, 5:17 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson renamed this task from Improve styling of language button to Improve styling of language button on hover/focus.Aug 10 2021, 5:18 PM

@alexhollender Just to confirm, are these the expected styles for the ULS button?

Language button should have a focus, hover, and active state
Language button shouldn't automatically have a darker background color when the popover is open (https://jmp.sh/yMrT6nD)

Also, do we also need to file another ticket for updating the user links states? From what I can tell the user page "focus" style isn't consistent, and all user links are missing an "active" state. https://jmp.sh/TFGD1TY

Change 713008 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: Move ULS click handler to the Menu checkbox

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

gerritbot added a project: Patch-For-Review.Aug 13 2021, 8:58 PM

@Jdlrobson Just to clarify, you are talking about the no js language button right? That one has no hover and active states, but has a focus state. As opposed to the regular ULS which doesn't use the checkbox hack, and has hover and active states on the h3 instead (but no focus).

I think updating MediaWiki core makes sense for the no js button, but I'm thinking it might be a bit tricker to make the regular ULS consistent. Because the regular ULS applies "display: none" on the checkbox, we would have to use tabindex=0 in order to get a focus state on the h3. That would require some changes to Menu template, and it feels a bit hacky.

Another option that I think could work is to stop hiding the checkbox, and apply the "mw-interlanguage-selector" class to the checkbox instead of the h3. This still requires some changes to the Menu template, but it would make the ULS more consistent with other menus, and improve the experience for screen readers (currently the ULS button is announced as an h3 rather than an checkbox, its not obvious the h3 is clickable). This approach would also mean the ULS would benefit from future improvements to the checkbox hack (T253650) down the line.

I put up a POC here: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/713008

bwang claimed this task.Aug 13 2021, 9:38 PM

bwang reassigned this task from bwang to • alexhollender_WMF.Aug 16 2021, 5:29 PM

bwang moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Test wiki created on Patch Demo by BWang (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/d54512fbe9/w/

@bwang and I just spoke, we're going to re-focus this task to be about:

making the language button focus-able/keyboard accessible, including having a visible focus state
fixing the dark background on the button when you're hovering on the menu below
fixing the button text getting lighter when you hover over it

we also discussed two related issues which will be handled in separate tasks:

the language button has an active state but other buttons in the site header do not
the focus state on various buttons is inconsistent

• alexhollender_WMF renamed this task from Improve styling of language button on hover/focus to Improvements to language button.Aug 18 2021, 8:00 PM

• alexhollender_WMF reassigned this task from • alexhollender_WMF to bwang.

• alexhollender_WMF updated the task description. (Show Details)

Test wiki on Patch Demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/d54512fbe9/w/~~

Test wiki created on Patch Demo by BWang (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/573bbf8e39/w/

bwang moved this task from Blocked on Others to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 19 2021, 4:44 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 19 2021, 5:04 PM

bwang removed bwang as the assignee of this task.Aug 23 2021, 5:14 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

LGoto assigned this task to Jdlrobson.Aug 24 2021, 5:05 PM

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

[mediawiki/skins/Vector@master] Separate language button icon from button classes

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

Jdlrobson reassigned this task from Jdlrobson to bwang.Aug 30 2021, 6:29 PM

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson mentioned this in T288852: Drop user links feature flag.Aug 30 2021, 6:45 PM

bwang removed bwang as the assignee of this task.Aug 31 2021, 5:08 PM

bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

LGoto assigned this task to Jdlrobson.Aug 31 2021, 5:09 PM

Change 713008 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update ULS button states to be consistent with other quiet buttons

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

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.23; 2021-09-13).Aug 31 2021, 8:00 PM

Please test on beta cluster and move to QA if satisfied, and needs more work if not.

Change 715798 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/core@master] Update mw-ui-quiet button states to match specs

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

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

[mediawiki/core@master] Update Html::makeLink to support icon use case in Vector

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

bwang claimed this task.Sep 1 2021, 4:30 PM

bwang moved this task from Design Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

[mediawiki/core@master] Introduce mw-ui-button.mw-ui-icon-element

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

bwang updated the task description. (Show Details)Sep 1 2021, 5:50 PM

Change 715798 merged by jenkins-bot:

[mediawiki/core@master] Update mw-ui-quiet button states to match specs

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

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Sep 1 2021, 8:16 PM

Change 715989 merged by jenkins-bot:

[mediawiki/core@master] Update Html::makeLink to support icon use case in Vector

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

bwang removed bwang as the assignee of this task.Sep 2 2021, 4:11 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

LGoto assigned this task to bwang.Sep 2 2021, 5:06 PM

Change 715991 merged by jenkins-bot:

[mediawiki/core@master] Align mw-ui-button with spec

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

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

[mediawiki/extensions/UniversalLanguageSelector@master] Language button should prevent default click behavior

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

Change 715084 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Simplify how we generate icons and button classes in Vector

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

Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Sep 7 2021, 2:50 PM

• alexhollender_WMF claimed this task.Sep 9 2021, 5:09 PM

Test wiki created on Patch Demo by Santhosh.thottingal using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/b1cfc46753/w/

Test wiki on Patch Demo by Santhosh.thottingal using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/b1cfc46753/w/~~

Change 715793 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Language button should prevent default click behavior

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

the button looks good. I noticed that when you focus it via the tab key, and then press enter, the menu doesn't open up. This seems to also be the case for the ⋯ user menu button. I will file a separate task for those.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Ensure the language button has the same button states as the quiet buttons in WVUI
See table in AC2.
✅ AC2: Test multiple combinations of button states, i.e. hover and focus, focus and active

STATE	active	hover	focus
active
hover
focus

✅ AC3: Test language button with javascript turned off

STATE	active	hover	focus
active
hover
focus

✅ AC4: Test everything above in multiple browsers
Verified in Chrome, Safari and Firefox

Edtadros updated the task description. (Show Details)Sep 16 2021, 5:06 PM

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Ensure the language button has the same button states as the quiet buttons in WVUI
See table in AC1.
✅ AC2: Test multiple combinations of button states, i.e. hover and focus, focus and active

STATE	active	hover	focus
active
hover
focus

✅ AC3: Test language button with javascript turned off

STATE	active	hover	focus
active
hover
focus

✅ AC4: Test everything above in multiple browsers
Verified in Chrome, Safari and Firefox

@ovasileva Can you please verify that the behavior of active-focused is correct? I passed this in beta, but now that I'm looking at it again, I'm not sure that is the correct behavior.

Edtadros updated the task description. (Show Details)Sep 21 2021, 1:21 PM

@alexhollender - can you take a look and confirm the expected states?

In T283757#7368943, @Edtadros wrote:

@ovasileva Can you please verify that the behavior of active-focused is correct?

@Edtadros can you clarify what you mean by active-focused? I thought it can only have one state at a time, i.e. it's either active, focused, or hovered.

ovasileva closed this task as Resolved.Sep 30 2021, 9:55 PM

Test wiki on Patch Demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/573bbf8e39/w/~~

Jdlrobson mentioned this in T294286: "Add discussion" button on mobile has no margin, and is not centred on wider screens.Oct 26 2021, 3:53 PM

	F34649753: Screen Shot 2021-09-21 at 6.07.25 AM.png
	Sep 21 2021, 1:19 PM

	F34649755: Screen Shot 2021-09-21 at 6.09.35 AM.png
	Sep 21 2021, 1:19 PM

	F34649759: Screen Shot 2021-09-21 at 6.10.00 AM.png
	Sep 21 2021, 1:19 PM

	F34649763: Screen Shot 2021-09-21 at 6.10.25 AM.png
	Sep 21 2021, 1:19 PM

	F34649743: Screen Shot 2021-09-21 at 6.06.01 AM.png
	Sep 21 2021, 1:19 PM

	F34649747: Screen Shot 2021-09-21 at 6.06.31 AM.png
	Sep 21 2021, 1:19 PM

	F34649761: Screen Shot 2021-09-21 at 6.10.18 AM.png
	Sep 21 2021, 1:19 PM

	F34649765: Screen Shot 2021-09-21 at 6.10.34 AM.png
	Sep 21 2021, 1:19 PM

Improvements to language buttonClosed, ResolvedPublic2 Estimated Story PointsActions

Description

Description

QA Steps

QA Results - Beta

QA Results - Beta

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Improvements to language button
Closed, ResolvedPublic2 Estimated Story Points
Actions

Related Objects
Search...