From: Marius Hoch <hoo@online.de>
Date: Mon, 19 Aug 2013 19:09:08 +0000 (+0200)
Subject: Make variant selection menu toggleable by keyboard
X-Git-Tag: 1.31.0-rc.0~18853^2
X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dcompta/comptes/journal.php?a=commitdiff_plain;h=4fabc910d2e1bb4581ac7a80f019bd22758d089b;p=lhc%2Fweb%2Fwiklou.git

Make variant selection menu toggleable by keyboard

Altered the script as the variant selection menu
uses a slightly different dom structure than the
other menus.

Bug: 46486
Change-Id: I4fdfe1cf002e4f5370b7073b509e33828db7dcbf
---

diff --git a/skins/vector/vector.js b/skins/vector/vector.js
index ff3332f8d8..aa64624ac0 100644
--- a/skins/vector/vector.js
+++ b/skins/vector/vector.js
@@ -4,19 +4,25 @@
 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' );
 	} );
 
 	/**