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.