jQuery( function ( $ ) {
$( 'div.vectorMenu' ).each( function () {
var $el = $( this );
- $el.find( 'h3:first a:first' )
- // For accessibility, show the menu when the hidden link in the menu is clicked (bug 24298)
- .click( function ( e ) {
- $el.find( '.menu:first' ).toggleClass( 'menuForceShow' );
- e.preventDefault();
+ $el.find( '> h3 > a' ).parent()
+ .attr( 'tabindex', '0' )
+ // For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
+ .on( 'click keypress', function ( e ) {
+ if( e.type === 'click' || e.which === 13 ) {
+ $el.find( '.menu:first' ).toggleClass( 'menuForceShow' );
+ e.preventDefault();
+ }
} )
- // When the hidden link has focus, also set a class that will change the arrow icon
+ // When the heading has focus, also set a class that will change the arrow icon
.focus( function () {
- $el.addClass( 'vectorMenuFocus' );
+ $el.find( '> a' ).addClass( 'vectorMenuFocus' );
} )
.blur( function () {
- $el.removeClass( 'vectorMenuFocus' );
- } );
+ $el.find( '> a' ).removeClass( 'vectorMenuFocus' );
+ } )
+ .find( '> a:first' )
+ // As the h3 can already be focused there's no need for the link to be focusable
+ .attr( 'tabindex', '-1' );
} );
/**