From: Roan Kattouw <catrope@users.mediawiki.org>
Date: Mon, 25 Apr 2011 14:08:01 +0000 (+0000)
Subject: (bug 24298) Make dropdown menus in Vector more accessible by expanding and collapsing... 
X-Git-Tag: 1.31.0-rc.0~30566
X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22articles%22%2C%22id_article=%24id_article%22%29%20.%20%22?a=commitdiff_plain;h=573d3dafc159cb067ab9542cfb467f3e70792d0a;p=lhc%2Fweb%2Fwiklou.git

(bug 24298) Make dropdown menus in Vector more accessible by expanding and collapsing them when the hidden link behind the dropdown arrow receives a click event (triggered by an enter or space bar key press in the typical use case) and changing the appearance of the arrow when the hidden link behind it is focused. Patch by Jan Paul Posma
--This line, and those behind, will be ignored--

M    phase3/skins/Vector.php
M    phase3/skins/vector/images/arrow-down-icon.png
M    phase3/skins/vector/screen.css
AM   phase3/skins/vector/vector.js
M    phase3/resources/Resources.php
---

diff --git a/resources/Resources.php b/resources/Resources.php
index 9bf6e40bbe..b61fa81001 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -15,6 +15,7 @@ return array(
 
 	'skins.vector' => array(
 		'styles' => array( 'vector/screen.css' => array( 'media' => 'screen' ) ),
+		'scripts' => 'vector/vector.js',
 		'remoteBasePath' => $GLOBALS['wgStylePath'],
 		'localBasePath' => "{$GLOBALS['IP']}/skins",
 	),
diff --git a/skins/Vector.php b/skins/Vector.php
index b14dba08da..2b1ae43903 100644
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -39,6 +39,8 @@ class SkinVector extends SkinTemplate {
 				htmlspecialchars( $wgLocalStylePath ) .
 				"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
 		);
+		
+		$out->addModuleScripts( 'skins.vector' );
 	}
 
 	/**
diff --git a/skins/vector/images/arrow-down-icon.png b/skins/vector/images/arrow-down-icon.png
index 437b951838..90c907bf0b 100644
Binary files a/skins/vector/images/arrow-down-icon.png and b/skins/vector/images/arrow-down-icon.png differ
diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index 4784aefc9b..bb93bc78f6 100644
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -204,10 +204,13 @@ div#mw-head h5 {
 		float: left;
 		/* @embed */
 		background-image: url(images/arrow-down-icon.png);
-		background-position: 100% 60%;
+		background-position: 0px 60%;
 		background-repeat: no-repeat;
 		cursor: pointer;
 	}
+	div.vectorMenuFocus {
+		background-position: -22px 60%;
+	}
 	/* @noflip */
 	body.rtl div.vectorMenu {
 		direction: rtl;
@@ -280,7 +283,8 @@ div#mw-head h5 {
 	x:-moz-any-link {
 		margin-left: 23px;
 	}
-	div.vectorMenu:hover div.menu {
+	/* Enable forcing showing of the menu for accessibility */
+	div.vectorMenu:hover div.menu, div.vectorMenu div.menuForceShow {
 		display: block;
 	}
 	div.vectorMenu ul {
diff --git a/skins/vector/vector.js b/skins/vector/vector.js
new file mode 100644
index 0000000000..84cb5b846f
--- /dev/null
+++ b/skins/vector/vector.js
@@ -0,0 +1,18 @@
+/*
+ * Vector-specific scripts
+ */
+$(document).ready( function() {	
+	// For accessibility, show the menu when the hidden link in the menu is clicked
+	$( '#p-cactions h5 a' ).click( function() {
+		$( '#p-cactions .menu' ).toggleClass( 'menuForceShow' );
+	});
+	
+	// When the hidden link has focus, also set a class that will change the arrow icon
+	$( '#p-cactions h5 a' ).focus( function () {
+		$( '#p-cactions' ).addClass( 'vectorMenuFocus' );
+	});
+	
+	$( '#p-cactions h5 a' ).blur( function () {
+		$( '#p-cactions' ).removeClass( 'vectorMenuFocus' );
+	});
+});