WMDE-Fisch has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/354649 )
Change subject: Improve support for screenreaders ...................................................................... Improve support for screenreaders 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 --- M modules/ext.RevisionSlider.HelpButtonView.js M modules/ext.RevisionSlider.SliderArrowView.js M modules/ext.RevisionSlider.init.js 3 files changed, 32 insertions(+), 8 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider refs/changes/49/354649/1 diff --git a/modules/ext.RevisionSlider.HelpButtonView.js b/modules/ext.RevisionSlider.HelpButtonView.js index 9fa0018..ec2bb99 100644 --- a/modules/ext.RevisionSlider.HelpButtonView.js +++ b/modules/ext.RevisionSlider.HelpButtonView.js @@ -24,16 +24,17 @@ width: 200, classes: [ 'mw-revslider-tooltip', 'mw-revslider-help-tooltip' ] } ); + helpButton.connect( mw.libs.revisionSlider.HelpDialog, { + click: 'show' + } ); helpButton.$element - .click( function () { - mw.libs.revisionSlider.HelpDialog.show(); - } ) .mouseover( function () { helpPopup.toggle( true ); } ) .mouseout( function () { helpPopup.toggle( false ); - } ); + } ) + .children().attr( 'aria-haspopup', 'true' ); $( 'body' ).append( helpPopup.$element ); diff --git a/modules/ext.RevisionSlider.SliderArrowView.js b/modules/ext.RevisionSlider.SliderArrowView.js index 8454d95..3032132 100644 --- a/modules/ext.RevisionSlider.SliderArrowView.js +++ b/modules/ext.RevisionSlider.SliderArrowView.js @@ -47,6 +47,7 @@ backwardArrowButton.$element .attr( 'data-dir', -1 ) + .children().attr( 'arial-label', mw.msg( 'revisionslider-arrow-tooltip-older' ) ) .mouseover( { button: backwardArrowButton, popup: backwardArrowPopup }, this.showPopup ) .mouseout( { popup: backwardArrowPopup }, this.hidePopup ) .focusin( { button: backwardArrowButton }, this.arrowFocusHandler ); @@ -88,6 +89,7 @@ forwardArrowButton.$element .attr( 'data-dir', 1 ) + .children().attr( 'arial-label', mw.msg( 'revisionslider-arrow-tooltip-newer' ) ) .mouseover( { button: forwardArrowButton, popup: forwardArrowPopup }, this.showPopup ) .mouseout( { popup: forwardArrowPopup }, this.hidePopup ) .focusin( { button: forwardArrowButton }, this.arrowFocusHandler ); diff --git a/modules/ext.RevisionSlider.init.js b/modules/ext.RevisionSlider.init.js index f964ef4..12cf1f5 100644 --- a/modules/ext.RevisionSlider.init.js +++ b/modules/ext.RevisionSlider.init.js @@ -8,6 +8,12 @@ var startTime = mw.now(), api = new mw.libs.revisionSlider.Api( mw.util.wikiScript( 'api' ) ); + toggleButton.$element.attr( 'role', 'heading' ); + toggleButton.$element.children().attr( { + 'aria-expanded': autoExpand, + 'aria-controls': 'mw-revslider-slider-wrapper' + } ); + mw.track( 'counter.MediaWiki.RevisionSlider.event.init' ); mw.libs.revisionSlider.userOffset = mw.user.options.get( 'timecorrection' ) ? mw.user.options.get( 'timecorrection' ).split( '|' )[ 1 ] : mw.config.get( 'extRevisionSliderTimeOffset' ); @@ -29,6 +35,7 @@ revs.reverse(); $container = $( '.mw-revslider-slider-wrapper' ); + $container.attr( 'id', 'mw-revslider-slider-wrapper' ); revisionList = new mw.libs.revisionSlider.RevisionList( mw.libs.revisionSlider.makeRevisions( revs ) ); revisionList.getView().setDir( $container.css( 'direction' ) || 'ltr' ); @@ -66,6 +73,7 @@ $( '.mw-revslider-container' ).removeClass( 'mw-revslider-container-collapsed' ) .addClass( 'mw-revslider-container-expanded' ); $( '.mw-revslider-slider-wrapper' ).show(); + toggleButton.$element.children().attr( 'aria-expanded', 'true' ); expanded = true; }, @@ -74,28 +82,41 @@ $( '.mw-revslider-container' ).removeClass( 'mw-revslider-container-expanded' ) .addClass( 'mw-revslider-container-collapsed' ); $( '.mw-revslider-slider-wrapper' ).hide(); + toggleButton.$element.children().attr( 'aria-expanded', 'false' ); }; autoExpandButton = new OO.ui.ToggleButtonWidget( { icon: 'pin', classes: [ 'mw-revslider-auto-expand-button' ], - title: mw.message( autoExpand ? + title: mw.msg( autoExpand ? 'revisionslider-turn-off-auto-expand-title' : 'revisionslider-turn-on-auto-expand-title' - ).text(), + ), value: autoExpand } ); + autoExpandButton.$element.children().attr( + 'arial-label', + mw.msg( autoExpand ? + 'revisionslider-turn-off-auto-expand-title' : + 'revisionslider-turn-on-auto-expand-title' + ) ); autoExpandButton.connect( this, { click: function () { autoExpand = !autoExpand; settings.setAutoExpand( autoExpand ); if ( autoExpand ) { - autoExpandButton.setTitle( mw.message( 'revisionslider-turn-off-auto-expand-title' ).text() ); + autoExpandButton.setTitle( mw.msg( 'revisionslider-turn-off-auto-expand-title' ) ); + autoExpandButton.$element.children().attr( + 'arial-label', mw.msg( 'revisionslider-turn-off-auto-expand-title' ) + ); expand(); mw.track( 'counter.MediaWiki.RevisionSlider.event.autoexpand_on' ); } else { - autoExpandButton.setTitle( mw.message( 'revisionslider-turn-on-auto-expand-title' ).text() ); + autoExpandButton.setTitle( mw.msg( 'revisionslider-turn-on-auto-expand-title' ) ); + autoExpandButton.$element.children().attr( + 'arial-label', mw.msg( 'revisionslider-turn-on-auto-expand-title' ) + ); mw.track( 'counter.MediaWiki.RevisionSlider.event.autoexpand_off' ); } } -- To view, visit https://gerrit.wikimedia.org/r/354649 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I7a174e5971a751ec54d4d5115d5441f0a577c103 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/RevisionSlider Gerrit-Branch: master Gerrit-Owner: WMDE-Fisch <christoph.jau...@wikimedia.de> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
