'skins.vector' => array(
'styles' => array( 'vector/screen.css' => array( 'media' => 'screen' ) ),
+ 'scripts' => 'vector/vector.js',
'remoteBasePath' => $GLOBALS['wgStylePath'],
'localBasePath' => "{$GLOBALS['IP']}/skins",
),
htmlspecialchars( $wgLocalStylePath ) .
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
+
+ $out->addModuleScripts( 'skins.vector' );
}
/**
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;
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 {
--- /dev/null
+/*
+ * 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' );
+ });
+});