TheDJ has uploaded a new change for review.
https://gerrit.wikimedia.org/r/78640
Change subject: Preferences: Improve accessibility of the JS tabs of Preferences
......................................................................
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
---
M RELEASE-NOTES-1.22
M resources/mediawiki.special/mediawiki.special.preferences.js
2 files changed, 41 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/40/78640/1
diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22
index af467a0..a2142b5 100644
--- a/RELEASE-NOTES-1.22
+++ b/RELEASE-NOTES-1.22
@@ -180,6 +180,7 @@
setcookie() or setrawcookie() should begin using this instead.
* New hook WebResponseSetCookie, called from WebResponse::setcookie().
* New hook ResetSessionID, called when the session id is reset.
+* Improved the accessibility of the tabs in Special:Preferences
=== Bug fixes in 1.22 ===
* Disable Special:PasswordReset when $wgEnableEmail is false. Previously one
diff --git a/resources/mediawiki.special/mediawiki.special.preferences.js
b/resources/mediawiki.special/mediawiki.special.preferences.js
index 03d93d0..37f6402 100644
--- a/resources/mediawiki.special/mediawiki.special.preferences.js
+++ b/resources/mediawiki.special/mediawiki.special.preferences.js
@@ -3,17 +3,26 @@
*/
jQuery( function ( $ ) {
var $preftoc, $preferences, $fieldsets, $legends,
- hash,
+ hash, labelFunc,
$tzSelect, $tzTextbox, $localtimeHolder, servertime;
- $( '#prefsubmit' ).attr( 'id', 'prefcontrol' );
+ labelFunc = function () {
+ return this.id.replace( /^mw-prefsection/g, 'preftab' );
+ };
- $preftoc = $('<ul id="preftoc"></ul>');
+ $( '#prefsubmit' ).attr( 'id', 'prefcontrol' );
+ $preftoc = $('<ul id="preftoc"></ul>')
+ .attr( 'role', 'tablist' );
$preferences = $( '#preferences' )
.addClass( 'jsprefs' )
.before( $preftoc );
$fieldsets = $preferences.children( 'fieldset' )
.hide()
+ .attr( {
+ 'aria-hidden': 'true',
+ role: 'tabpanel',
+ 'aria-labelledby': labelFunc
+ } )
.addClass( 'prefsection' );
$legends = $fieldsets
.children( 'legend' )
@@ -36,12 +45,12 @@
}
$( window ).scrollTop( scrollTop );
- $preftoc.find( 'li' ).removeClass( 'selected' );
+ $preftoc.find( 'li' ).removeClass( 'selected' ).find( 'a'
).attr( 'tabIndex', -1 ).attr( 'aria-selected', 'false' );
$tab = $( document.getElementById( 'preftab-' + name ) );
if ( $tab.length ) {
- $tab.parent().addClass( 'selected' );
- $preferences.children( 'fieldset' ).hide();
- $( document.getElementById( 'mw-prefsection-' + name )
).show();
+ $tab.attr( 'tabIndex', 0 ).attr( 'aria-selected',
'false' ).focus().parent().addClass( 'selected' );
+ $preferences.children( 'fieldset' ).hide().attr(
'aria-hidden', 'true' );
+ $( document.getElementById( 'mw-prefsection-' + name )
).show().attr( 'aria-hidden', 'false' );
}
}
@@ -55,17 +64,40 @@
ident = $legend.parent().attr( 'id' );
$li = $( '<li>' )
+ .attr( 'role', 'presentation' )
.addClass( i === 0 ? 'selected' : '' );
$a = $( '<a>' )
.attr( {
id: ident.replace( 'mw-prefsection', 'preftab'
),
- href: '#' + ident
+ href: '#' + ident,
+ role: 'tab',
+ tabIndex: i === 0 ? 0 : -1,
+ 'aria-selected': i === 0 ? 'true' : 'false',
+ 'aria-controls': ident
} )
.text( $legend.text() );
$li.append( $a );
$preftoc.append( $li );
} );
+ // Enable keyboard users to use left and right keys to switch tabs
+ $preftoc.on( 'keydown', function( event ) {
+ var keyLeft = 37,
+ keyRight = 39,
+ $el;
+
+ if( event.keyCode === keyLeft ) {
+ $el = $('#preftoc li.selected').prev().find( 'a' );
+ } else if ( event.keyCode === keyRight ) {
+ $el = $('#preftoc li.selected').next().find( 'a' );
+ } else {
+ return;
+ }
+ if ( $el !== undefined && $el.length > 0 ) {
+ switchPrefTab( $el.attr( 'href' ).replace(
'#mw-prefsection-', '' ) );
+ }
+ } );
+
// If we've reloaded the page or followed an open-in-new-window,
// make the selected tab visible.
hash = window.location.hash;
--
To view, visit https://gerrit.wikimedia.org/r/78640
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ica447a3b6f08422fd3c7452a5bd87d509dad9870
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
