mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-11-15 11:40:43 +00:00
5f8bf83849
This patch improves screenreader support by applying some basic rules and improving the OOjs UI usage. Things done here: - make use of 'aria-label' attribute to label interactive buttons - use connect method on help button to allow keyboard interaction - give hint on help button that it opens a dialog - communicate state of autoexpand button - add attributes to make screenreaders understand the accordion mechanism if the slider widget See: https://www.w3.org/TR/wai-aria-practices/#button https://www.w3.org/TR/wai-aria-practices/#accordion Bug: T165489 Change-Id: I7a174e5971a751ec54d4d5115d5441f0a577c103
55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
( function ( mw, $ ) {
|
|
/**
|
|
* Module containing presentation logic for the helper button
|
|
*/
|
|
var HelpButtonView = {
|
|
|
|
/**
|
|
* Renders the help button and renders and adds the popup for it.
|
|
*
|
|
* @return {jQuery} the help button object
|
|
*/
|
|
render: function () {
|
|
var helpButton, helpPopup;
|
|
|
|
helpButton = new OO.ui.ButtonWidget( {
|
|
icon: 'help',
|
|
framed: false,
|
|
classes: [ 'mw-revslider-show-help' ]
|
|
} );
|
|
helpPopup = new OO.ui.PopupWidget( {
|
|
$content: $( '<p>' ).text( mw.msg( 'revisionslider-show-help-tooltip' ) ),
|
|
$floatableContainer: helpButton.$element,
|
|
padded: true,
|
|
width: 200,
|
|
classes: [ 'mw-revslider-tooltip', 'mw-revslider-help-tooltip' ]
|
|
} );
|
|
helpButton.connect( this, {
|
|
click: 'showDialog'
|
|
} );
|
|
helpButton.$element
|
|
.mouseover( function () {
|
|
helpPopup.toggle( true );
|
|
} )
|
|
.mouseout( function () {
|
|
helpPopup.toggle( false );
|
|
} )
|
|
.children().attr( {
|
|
'aria-haspopup': 'true',
|
|
'aria-label': mw.msg( 'revisionslider-show-help-tooltip' )
|
|
} );
|
|
|
|
$( 'body' ).append( helpPopup.$element );
|
|
|
|
return helpButton.$element;
|
|
},
|
|
|
|
showDialog: function () {
|
|
mw.libs.revisionSlider.HelpDialog.show();
|
|
}
|
|
};
|
|
|
|
mw.libs.revisionSlider = mw.libs.revisionSlider || {};
|
|
mw.libs.revisionSlider.HelpButtonView = HelpButtonView;
|
|
}( mediaWiki, jQuery ) );
|