Page MenuHomePhabricator

OOUI indexed dialogs (IndexLayout) / tabbed navigation (TabPanelLayout) is not accessible
Closed, ResolvedPublic

Description

The tabs inside of this window are not accessible for VoiceOver.

The ARIA roles and attributes need to be adapted. role=tablist, role=tab & role=tabpanel are very well supported across browsers/screenreaders.
Best practices also feature a simple demo. For basic support we should add/amend the necessary roles and if we wanna go further in future, we could also think about changing the tabs into anchors and connect with the tabpanels as internal links.

Event Timeline

In https://doc.wikimedia.org/oojs-ui/master/demos/#dialogs-mediawiki-ltr, the tabs in "Indexed dialog" are keyboard-accessible.

In VE's link dialog it's also possible to change the tabs with keyboard actions only? After Ctrl+K to open the link inspector, press Tab once and then use left/right arrow keys to switch.

It seems that this was only while I had Voice Over activated. It seems that Safari doesn't do anything with the listbox (and with VO active, the keyboard access also breaks).

Also honestly, this is a usage of listbox in a way that I have never seen before.. Normally i'd expect this to be tablist, tab, tabpanel combination. (Like the MediaWiki preferences table also features).

Safari doesn't see it at all. Chrome does see it, but it's pretty useless, since when you move from 4 to three, it already switches the page, so there is no way to effectively be able to navigate page 2, 3 and 4.

Also honestly, this is a usage of listbox in a way that I have never seen before.. Normally i'd expect this to be tablist, tab, tabpanel combination. (Like the MediaWiki preferences table also features).

Yes, it's kind of accidental, this uses SelectWidget internally, which has role=listbox.

Seems to partly have to do with the intercept of left and right navigation, interfering with the voiceover keyboard combinations. (even though those use modifiers + nav keys) more investigation to follow

Volker_E renamed this task from OOjs UI indexed dialogs / tabbed navigation is not accessible to OOUI indexed dialogs / tabbed navigation is not accessible.Jan 17 2018, 12:50 AM
Volker_E updated the task description. (Show Details)

Additional note: Current Special:Preferences does everything already very well (only addition to accessible ARIA tabs is aria-controls):

<ul id="preftoc" role="tablist">
	<li role="presentation" class="">
		<a id="preftab-personal" role="tab" href="#mw-prefsection-personal" aria-controls="mw-prefsection-personal" aria-selected="false" tabindex="-1">User profile</a>
	</li>
	<li role="presentation" class="selected">
		<a id="preftab-rendering" role="tab" href="#mw-prefsection-rendering" aria-controls="mw-prefsection-rendering" aria-selected="true" tabindex="0">Appearance</a>
	</li>
	<li role="presentation">
		<a id="preftab-editing" role="tab" href="#mw-prefsection-editing" aria-controls="mw-prefsection-editing" aria-selected="false" tabindex="-1">Editing</a>
	</li></ul>
<form class="mw-htmlform" action="/wiki/Special:Preferences" method="post" id="mw-prefs-form" autocomplete="off">
	<div id="preferences" class="jsprefs">
		<fieldset id="mw-prefsection-personal" role="tabpanel" aria-labelledby="preftab-personal" class="prefsection" aria-hidden="true" style="display: none;">
			<legend class="mainLegend">User profile</legend></fieldset>
		<fieldset id="mw-prefsection-rendering" role="tabpanel" aria-labelledby="preftab-rendering" aria-hidden="false" class="prefsection" style="display: block;">
			<legend class="mainLegend">Appearance</legend></fieldset>

Change 443521 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] IndexLayout (TabPanelLayouts): Apply correct ARIA roles & attributes

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

Change 443521 merged by jenkins-bot:
[oojs/ui@master] IndexLayout (TabPanelLayouts): Apply correct ARIA roles & attributes

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

Volker_E renamed this task from OOUI indexed dialogs / tabbed navigation is not accessible to OOUI indexed dialogs (IndexLayout) / tabbed navigation (TabPanelLayout) is not accessible.Jul 4 2018, 8:39 AM
Volker_E claimed this task.
Volker_E moved this task from Next-up to OOUI-0.27.5 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.27.5); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

This will roll-out in OOUI v0.27.5 and be on Beta Cluster from next Tue evening PDT on.