Page MenuHomePhabricator

Reconsider keyboard user navigation hint exposure
Closed, ResolvedPublic

Description

Currently, Special:Preferences' .mw-navigation-hint with it's message (in enwiki) “Tip: You can use the left and right arrow keys to navigate between the tabs in the tabs list.” is keyboard focussable.
We're also exposing it currently to screenreader users, which seems unnecessary given that we have ARIA roles on the tabs in place. Left & right arrow keys are default behaviour for tab navigation.

Event Timeline

Volker_E triaged this task as Normal priority.Sep 19 2018, 6:38 PM
Volker_E created this task.
Volker_E updated the task description. (Show Details)Sep 19 2018, 6:59 PM

Change 461452 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Special:Preferences: Expose .mw-navigation-hint on keyboard focus only

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

Volker_E renamed this task from Reconsider keyboard user navigation hint to Reconsider keyboard user navigation hint exposure.Sep 19 2018, 7:15 PM
TheDJ added a comment.Sep 19 2018, 7:23 PM

Please note that the new tabs dont actually work in a screenreader. At least not when using VoiceOver

@TheDJ Could you refine? We have implemented them in the way they were in old interface with correct ARIA roles, see T148030: OOUI indexed dialogs (IndexLayout) / tabbed navigation (TabPanelLayout) is not accessible

TheDJ added a comment.EditedSep 19 2018, 8:09 PM

Not sure what goes on exactly, possibly has something to do with the #anchor synchronization. But when I cursor from tab to tab on https://en.wikipedia.beta.wmflabs.org/wiki/Special:Preferences
The focus immediately follows me, and selects to tabpanel making it impossible to actually descend into the tabpanel, because going forward or backward will select the next tabpanel again. (only the first and last allow me to get out).

I don't have this problem with:
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

Here is a video, where you can see that the focus follows the accessibility cursor and immediately selects another tabpanel, before i can do VO-space to actually select the tab.
Here is a video https://youtu.be/gCYhxZQaLuI

matmarex added a subscriber: hoo.Sep 19 2018, 11:50 PM

Looks like the message was added per the suggestion of @hoo on https://gerrit.wikimedia.org/r/c/mediawiki/core/+/78640

Left and right arrowing doesn't work that well with screen readers anyway because the key is overwritten by the screen reader (especially true for JAWS). I would think most screen reader users would just navigate around the page using their virtual cursor and press enter on the relevant tab.

TheDJ added a comment.Sep 20 2018, 6:36 AM

Small note that this hint was specifically for keyboard-only users, less for screenreader users

Change 461452 merged by jenkins-bot:
[mediawiki/core@master] Special:Preferences: Expose .mw-navigation-hint on keyboard focus only

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

Volker_E closed this task as Resolved.Nov 5 2018, 4:08 AM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.