(bug 24298) Make dropdown menus in Vector more accessible by expanding and collapsing...

--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 9bf6e40..b61fa81 100644 (file)
--- 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 b14dba0..2b1ae43 100644 (file)
--- 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 437b951..90c907b 100644 (file)
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 4784aef..bb93bc7 100644 (file)
--- 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 (file)
index 0000000..84cb5b8
--- /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' );
+       });
+});