Page MenuHomePhabricator

Add an accessible label to ULS and language variant buttons
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

The ULS button is currently labeled with either the number of available languages ("196 languages") the currently selected language ("English"). Language variants also just displays the currently selected variant. All these dropdowns don't do a great job of describing the button without further context, especially for people using assistive tech.

Expected

ULS should read out an accessible label like "Change article language- English" or "Change article language, available in X languages".
Language variant button should read out a label like "Change language variant".

Acceptance criteria

  • Add aria label to language button with the copy: "Change article language, available in X languages"
  • Add aria label to variant switcher with the copy: "Change language variant"

Developer notes

This should be achievable with an aria-label attribute on the h3 in the Menu template.

QA steps

  • Pull up an article in modern + legacy Vector (logged in + logged out)
  • Check the markup (or test with VO) for the language variant switcher (logged in/out, modern + legacy Vector)
  • Check the markup (or test with VO) for the language button dropdown (logged in, modern Vector)

QA Results - Beta

ACStatusDetails
1T289523#7403154
2T289523#7403154

QA Results - Prod

ACStatusDetails
1T289523#7403155
2T289523#7403155

Event Timeline

ULS should read out an accessible label like "Change article language- English" or "Change article language, available in 196 languages".

I think the latter makes more sense

ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)
Jdlrobson subscribed.

(Tagging ULS as we might need some changes in ULS for the Wikidata language button if that's in scope)

Change 721100 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add aria-label to language dropdown menus

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

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming subscribed.
cjming updated the task description. (Show Details)

Change 721100 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add aria-label to language dropdown menus

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

Test Result - Beta

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

Test Artifact(s):

QA Steps steps

Pull up an article in modern + legacy Vector (logged in + logged out)
Check the markup (or test with VO) for the language variant switcher (logged in/out, modern + legacy Vector)
⬜ AC1: You should see "Change language variant" i.e. https://phabricator.wikimedia.org/F34643344
Tab not available in Beta. It passed in Prod already.

Logged InLogged Out
Modern
Legacy

❓ AC2: Check the markup (or test with VO) for the language button dropdown (logged in, modern Vector)
You should see "Change article language, available in {{X}} languages" i.e. https://phabricator.wikimedia.org/F34643341
The text is different from the expected test. Is the displayed text acceptable?

Logged InLogged Out
Modern
Screen Recording 2021-10-05 at 10.37.22 AM.mov.gif (930×1 px, 180 KB)
NA
LegacyNANA

Test Result - Prod

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

Test Artifact(s):

QA Steps steps

Pull up an article in modern + legacy Vector (logged in + logged out)
Check the markup (or test with VO) for the language variant switcher (logged in/out, modern + legacy Vector)
✅ AC1: You should see "Change language variant" i.e. https://phabricator.wikimedia.org/F34643344

Logged InLogged Out
Modern
Screen Recording 2021-10-05 at 10.30.57 AM.mov.gif (930×1 px, 316 KB)
Screen Recording 2021-10-04 at 9.20.17 AM.mov.gif (970×980 px, 433 KB)
Legacy
Screen Recording 2021-10-05 at 10.29.37 AM.mov.gif (930×1 px, 367 KB)
Screen Recording 2021-10-05 at 10.26.20 AM.mov.gif (930×1 px, 550 KB)

❓ AC2: Check the markup (or test with VO) for the language button dropdown (logged in, modern Vector)
You should see "Change article language, available in {{X}} languages" i.e. https://phabricator.wikimedia.org/F34643341
The text is different from the expected test. Is the displayed text acceptable?

Logged InLogged Out
Modern
Screen Recording 2021-10-05 at 10.35.37 AM.mov.gif (930×1 px, 455 KB)
NA
LegacyNANA
Edtadros updated the task description. (Show Details)
Edtadros subscribed.

@ovasileva please take a look at the AC2 in Beta/Prod. The text is different, but I'm not sure if that's enough to fail. If it is please feel free to assign it back to me.

@ovasileva @Edtadros looks like the wording was updated by someone on the language team in this patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722552 on 9/21/21 so I updated the QA steps accordingly and it matches what is being recorded for AC2.

The reason in the patch description is noted as:

Update the wording of vector-language-button-aria-label

  1. "Change article language" can be understood as changing the article itself. I'm changing it to "Go to an article in another language."
  2. Remove comma splice.

Double checked in standup - looks good!