wikimedia/mediawiki-extensions-WikiEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor synced 2024-11-24 00:06:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility of expandable controls

Browse source 
Fixing aria-* attributes to the Heading menu and roles property to 
the menu dropdown items in order to make the element function like an 
ideal menu to screen readers. 

Adding aria-expanded attribute to Expandable panes(Advanced, 
Special Characters and Help) widgets to allow
screen readers announces of the state expandable buttons. 

Bug: T244426
Change-Id: I0cb47afd7f3622ed83a57410086984d9abc9acfd
This commit is contained in:
Akinwale Alagbe 2020-02-05 15:02:11 -08:00 committed by Bartosz Dziewoński
parent 4787c733d6
commit b2222d0afa
1 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
modules/jquery.wikiEditor.toolbar.js
View file

@ -278,7 +278,7 @@
}, },
buildTool: function ( context, id, tool ) { buildTool: function ( context, id, tool ) {
var i, label, $button, config, icon, $select, $options, oouiButton, var i, label, $button, config, icon, $select, $options, oouiButton,
option, optionLabel; option, optionLabel, menuId;
if ( 'filters' in tool ) { if ( 'filters' in tool ) {
for ( i = 0; i < tool.filters.length; i++ ) { for ( i = 0; i < tool.filters.length; i++ ) {
if ( $( tool.filters[ i ] ).length === 0 ) { if ( $( tool.filters[ i ] ).length === 0 ) {
@ -370,6 +370,7 @@
} }
return $button; return $button;
case 'select': case 'select':
menuId = 'menu-' + ( new Date() ).getTime();
$select = $( '<div>' ) $select = $( '<div>' )
.attr( { rel: id, class: 'tool tool-select' } ); .attr( { rel: id, class: 'tool tool-select' } );
$options = $( '<div>' ).addClass( 'options' ); $options = $( '<div>' ).addClass( 'options' );
@ -401,7 +402,7 @@
} ) } )
.text( optionLabel ) .text( optionLabel )
.addClass( 'option' ) .addClass( 'option' )
.attr( { rel: option, tabindex: 0 } ) .attr( { rel: option, tabindex: 0, role: 'menuitem' } )
); );
} }
} }
@ -409,21 +410,23 @@
.addClass( 'label' ) .addClass( 'label' )
.text( label ) .text( label )
.data( 'options', $options ) .data( 'options', $options )
.attr( 'tabindex', 0 ) .attr( { role: 'button', tabindex: 0, 'aria-expanded': false, 'aria-controls': menuId, 'aria-haspopup': 'menu' } )
.on( 'mousedown', function ( e ) { .on( 'mousedown', function ( e ) {
// No dragging! // No dragging!
e.preventDefault(); e.preventDefault();
return false; return false;
} ) } )
.on( 'click keydown', function ( e ) { .on( 'click keydown', function ( e ) {
var $options; var $options, canShowOptions;
if ( if (
e.type === 'click' || e.type === 'click' ||
e.type === 'keydown' && e.key === 'Enter' e.type === 'keydown' && e.key === 'Enter'
) { ) {
$options = $( this ).data( 'options' ); $options = $( this ).data( 'options' );
// eslint-disable-next-line no-jquery/no-class-state // eslint-disable-next-line no-jquery/no-class-state
$options.closest( '.tool-select' ).toggleClass( 'options-shown' ); canShowOptions = !$options.closest( '.tool-select' ).hasClass( 'options-shown' );
$options.closest( '.tool-select' ).toggleClass( 'options-shown', canShowOptions );
$( this ).attr( 'aria-expanded', canShowOptions.toString() );
e.preventDefault(); e.preventDefault();
return false; return false;
} }
@ -610,7 +613,7 @@
.attr( { .attr( {
tabindex: 0, tabindex: 0,
role: 'button', role: 'button',
'aria-pressed': 'false', 'aria-expanded': ( selected === id ).toString(),
'aria-controls': 'wikiEditor-section-' + id 'aria-controls': 'wikiEditor-section-' + id
} ) } )
.text( $.wikiEditor.autoMsg( section, 'label' ) ) .text( $.wikiEditor.autoMsg( section, 'label' ) )
@ -643,17 +646,19 @@
// eslint-disable-next-line no-jquery/no-class-state // eslint-disable-next-line no-jquery/no-class-state
show = !$section.hasClass( 'section-visible' ); show = !$section.hasClass( 'section-visible' );
$sections.find( '.section-visible' ) $sections.find( '.section-visible' )
.attr( 'aria-expanded', 'false' )
.removeClass( 'section-visible' ) .removeClass( 'section-visible' )
.addClass( 'section-hidden' ); .addClass( 'section-hidden' );
$( this ).attr( 'aria-expanded', 'false' );
$( this ).parent().parent().find( 'a' ).removeClass( 'current' ); $( this ).parent().parent().find( 'a' ).removeClass( 'current' );
if ( show ) { if ( show ) {
$section $section
.removeClass( 'section-hidden' ) .removeClass( 'section-hidden' )
.attr( 'aria-expanded', 'true' ) .attr( 'aria-expanded', 'true' )
.addClass( 'section-visible' ); .addClass( 'section-visible' );
$( this ).addClass( 'current' );
$( this ).attr( 'aria-expanded', 'true' )
.addClass( 'current' );
} }
// Save the currently visible section // Save the currently visible section