Preferences: Improve accessibility of the JS tabs of Preferences
authorDerk-Jan Hartman <hartman@videolan.org>
Sun, 11 Aug 2013 07:11:40 +0000 (09:11 +0200)
committerMarius Hoch <hoo@online.de>
Tue, 10 Dec 2013 19:29:20 +0000 (20:29 +0100)
commit460ad0e05ac41eee818685327683ffc5b4d336d2
tree4434ad2b27201463f199ac9e84069d35e0f85440
parent0886ddb2e98d535aa9e465c20574a24582429d04
Preferences: Improve accessibility of the JS tabs of Preferences

This enables keyboard accessibility of the tabs, by only allowing
focus on one tab element using tabindex=0 and tabindex=-1 for the
other tabs. Navigation between tabs is then handled by using the left
and right arrow keys. This is the advised methodology.

We also add tab, tabpanel and tablist roles to improve accessibility
for assistive technology, while overriding the implicit tablist role
of the li element with 'presentation' to make sure we don't have mixed
semantics of lists and tabs.

We keep track of:
aria-selected:   If this tab is currently selected
aria-controls:   Which tabpanel is controlled by this tab
aria-labelledby: Which tab is the label for this tabpanel
aria-hidden:     If this tabpanel is (not) visible

Tested using VoiceOver. Should also work with JAWS 14.

Change-Id: Ica447a3b6f08422fd3c7452a5bd87d509dad9870
RELEASE-NOTES-1.23
languages/messages/MessagesEn.php
languages/messages/MessagesQqq.php
resources/Resources.php
resources/mediawiki.special/mediawiki.special.preferences.css
resources/mediawiki.special/mediawiki.special.preferences.js