Page MenuHomePhabricator

Collapsible TOC button missing accessible label
Closed, ResolvedPublic2 Estimated Story Points

Description

Background

Approach taken in T307900 adds a <label> element used as a button for the checkbox hack. This <label> currently doesn't have any text or an aria-label.
Accessibility report - "This element has role of "button" but does not have a name available to an accessibility API."

It should have text i.e. "Toggle the table of contents"

Developer notes

Considering the implementation of the collapsible TOC is still subject to change, and that there will likely be other small a11y errors in the future, my recommendation is to do this task later on.

QA steps

  • Navigate to a page on beta cluster with a TOC
  • Using VoiceOver or a screen reader, tab to the TOC collapsible icon (visible below desktop viewport 1000px)
  • Note that Toggle the table of contents is read and close captioned

Screen Shot 2022-07-22 at 10.03.54 AM.png (1×1 px, 587 KB)

QA Results - Beta

ACStatusDetails
1T310810#8122218

QA Results - Prod

ACStatusDetails
1T310810#8122222

Event Timeline

ovasileva raised the priority of this task from Medium to High.Jul 1 2022, 1:53 PM

Looks simple enough to add an aria-label in the template, no other risk here

bwang removed bwang as the assignee of this task.Jul 21 2022, 4:59 PM
bwang added a subscriber: bwang.
ovasileva lowered the priority of this task from High to Medium.Jul 21 2022, 5:24 PM

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

[mediawiki/skins/Vector@master] Add aria-label to TOC collapsible button.

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

cjming added a subscriber: cjming.

Change 816054 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add text to TOC collapsible button label for accessibility.

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

Test Result - Beta

Status:
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to a page on beta cluster with a TOC
Using VoiceOver or a screen reader, tab to the TOC collapsible icon (visible below desktop viewport 1000px)
❌ AC1: Note that Toggle the table of contents is read and close captioned

Screen Recording 2022-08-01 at 7.05.06 PM.mov.gif (888×990 px, 314 KB)

@ovasileva I failed this for not having the "Toggle the table of contents" and because the whole thing looks wonky and floats in over the text of the TOC. It doesn't cover the TOC when the site notice and banner are closed. This works fine in prod but that's because there was no banner or site notice.. I just wanted to highlight this before you sign this off.

Edtadros added a subscriber: Edtadros.

Test Result - Prod

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

Test Artifact(s):

QA Steps

Navigate to a page on a production wiki with a TOC
Using VoiceOver or a screen reader, tab to the TOC collapsible icon (visible below desktop viewport 1000px)
✅ AC1: Note that Toggle the table of contents is read and close captioned

Screen Recording 2022-08-01 at 7.13.25 PM.mov.gif (888×990 px, 343 KB)

@Edtadros - Can you confirm the issue you were seeing on the beta cluster was not present in production? Also, I can't seem to reproduce on the beta cluster. @cjming - do you think this is another oddity with the Dog article?

I can't seem to reproduce on the beta cluster. @cjming - do you think this is another oddity with the Dog article?

I think so - weirdly the Dog article on beta looks fine when logged-in -- only looks janky as anon. I have a Q out to the engineering channel to see if someone might be in the know. I'll report back here with findings.