Page MenuHomePhabricator

Vector 2022 controls are not discoverable with iOS VoiceOver
Open, MediumPublic3 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Safari iOS
  • Switch to desktop mode
  • Enable Vector 2022
  • Enable VoiceOver
  • move your finger over the screen and try to reach
    • Watch page
    • Watchlist
    • Notifications
    • Alerts

What happens?:

  • The elements are so tiny they almost cannot be selected
  • This happens because the underlying controls exposed by the accessibility tree, are not sized the same as the elements that have the actual .click handlers
    • Watch star cannot be found at all
    • Alerts and notifs cannot be found at all if they don't have any counter on them
    • Alerts and notifs are hard to find as their hitarea is only as big as the counter
    • Watchlist is weirdly sized

What should have happened instead?:
The underlying controls should be sized the same as the labels and/or icons that have the click handler, so that voiceover users can discover them, by moving their finger across the screen.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
This is similar to T321406: Minerva page menu's hard to access using iOS VoiceOver

Developer notes

I would prefer if we can get this done inside MediaWiki core, as currently Minerva and Vector are relatively similar, and adding code to Vector diverges these implementations as otherwise we'd be creating wok for ourselves on the long run.

Event Timeline

TheDJ renamed this task from Vector 2022 controls are not accessible with iOS VoiceOver to Vector 2022 controls are not discoverable with iOS VoiceOver.Oct 21 2022, 8:54 PM
bwang triaged this task as Medium priority.Oct 25 2022, 7:57 PM

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

[mediawiki/skins/Vector@master] POC: Override usage of mixin-screen-reader-text in icon buttons to fix button accessibility for mobile screen reader users navigating by touch

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

LGoto set the point value for this task to 1.Dec 5 2022, 6:33 PM
LGoto removed the point value for this task.
LGoto set the point value for this task to 3.Jan 26 2023, 6:29 PM

@TheDJ I cant reproduce this, I've tried VO on Safari and other mobile browsers and it seems I can read out those elements fine. here's a screenrecording I took, do you have any other steps to reprod? https://phabricator.wikimedia.org/F36525602

Change 856012 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Override usage of mixin-screen-reader-text in icon buttons to fix button accessibility for mobile screen reader users navigating by touch

Reason:

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

Jdlrobson subscribed.

@TheDJ I'm wondering if I should close out this ticket. Do you have any reproduction steps per T321413#8565306 ? Thanks in advance!