Page MenuHomePhabricator

Improvements to language button
Open, MediumPublic2 Estimated Story Points

Description

Description

The following issues should be addressed with this task:

  1. the language button should be keyboard accessible (i.e. you should be able to focus it via the tab key)
  2. the language button should show a focus state when it is focused (which should match the focus state of the user menu button)
  3. the language button should not have a darker background when you are hovering over the menu below
    image.png (509×774 px, 77 KB)
  4. the color of the text, and both icons (the language icon, and the down arrow), should be #000000
  5. fix the hover state: the button text should not get lighter when you hover over the button, it should remain #000000
    image.png (347×575 px, 41 KB)

QA Steps

QA Results - Beta

Event Timeline

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

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

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

@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

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 renamed this task from Improve styling of language button on hover/focus to Improvements to language button.Aug 18 2021, 8:00 PM
alexhollender reassigned this task from alexhollender to bwang.
alexhollender 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 removed bwang as the assignee of this task.Mon, Aug 23, 5:14 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

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

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

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

Change 715798 merged by jenkins-bot:

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

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

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.Thu, Sep 2, 4:11 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

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 AC1.
✅ AC2: Test multiple combinations of button states, i.e. hover and focus, focus and active

STATEactivehoverfocus
active
Screen Shot 2021-09-16 at 9.37.27 AM.png (172×165 px, 9 KB)
Screen Shot 2021-09-16 at 9.37.40 AM.png (172×165 px, 9 KB)
Screen Shot 2021-09-16 at 9.37.53 AM.png (172×165 px, 9 KB)
hover
Screen Shot 2021-09-16 at 9.45.24 AM.png (172×165 px, 9 KB)
Screen Shot 2021-09-16 at 9.45.31 AM.png (172×165 px, 9 KB)
focus
Screen Shot 2021-09-16 at 9.48.04 AM.png (172×165 px, 9 KB)

✅ AC3: Test language button with javascript turned off

STATEactivehoverfocus
active
Screen Shot 2021-09-16 at 9.57.25 AM.png (172×165 px, 9 KB)
Screen Shot 2021-09-16 at 9.57.45 AM.png (172×165 px, 9 KB)
Screen Shot 2021-09-16 at 9.58.05 AM.png (172×165 px, 9 KB)
hover
Screen Shot 2021-09-16 at 9.59.46 AM.png (172×165 px, 9 KB)
Screen Shot 2021-09-16 at 9.59.57 AM.png (172×165 px, 9 KB)
focus
Screen Shot 2021-09-16 at 10.02.26 AM.png (172×165 px, 9 KB)

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