From 573d3dafc159cb067ab9542cfb467f3e70792d0a Mon Sep 17 00:00:00 2001
From: Roan Kattouw <catrope@users.mediawiki.org>
Date: Mon, 25 Apr 2011 14:08:01 +0000
Subject: [PATCH] (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
---
 resources/Resources.php                 |   1 +
 skins/Vector.php                        |   2 ++
 skins/vector/images/arrow-down-icon.png | Bin 188 -> 241 bytes
 skins/vector/screen.css                 |   8 ++++++--
 skins/vector/vector.js                  |  18 ++++++++++++++++++
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 skins/vector/vector.js

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 437b9518388f47dd3d464c31f55a0f933b9a0462..90c907bf0bc3434fb093b06318cc18f3198f5ef1 100644
GIT binary patch
literal 241
zcmeAS@N?(olHy`uVBq!ia0vp^IzTMI!VDzm3pG3eQjEnx?oJHr&dIz4a-;)%LR^7#
zWo6~0Nt0&HnzeTA+Kn4G?%%)v?%lhOA3y%@P|O0-QxfDC%;50sMjD8d<n8Xl(7`I}
z0pxHNctjR6FmMZlFeAgPITAoY_7YEDSN7X1lDxcTas>@?Kp`hj7sn8Z%gG56E)91B
z0s=0`oOx0Z6cqHSp-Y^bi%Z;LhOU>F7B9!sX8~#fJK68dNScwfplC<Zf=>k&la-Sf
b?BQV8p1@%*oI3Ft&@={5S3j3^P6<r_s7Xqb

literal 188
zcmeAS@N?(olHy`uVBq!ia0vp^Vn8gw!3-o-jq62#lw^r(L`iUdT1k0gQ7VIDN`6wR
zf@f}GdTLN=VoGJ<$y6JlBK`oM5Z8?xH_n<h>+apVm6esBfBycWbG#5J#aa^N7yKUx
z7=CZ#3kC`pdAc};RNP8RILIZz<~5^pq9l{V%zzN*qlt?OoDV!I2yD6OP}rg|X{ry8
g5A!SU1_ow^6UnTO(LbkN2kK_<boFyt=akR{06LREvH$=8

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' );
+	});
+});
-- 
2.20.1