Merge "Make dropdown menus keyboard-accessible without JavaScript"

VectorTemplate.php

@@ -357,6 +357,7 @@ class VectorTemplate extends BaseTemplate {
 							}
 						}
 						?>
+						<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="p-variants-label" />
 						<h3 id="p-variants-label">
 							<span><?php echo htmlspecialchars( $variantLabel ) ?></span>
 						</h3>
@@ -400,6 +401,7 @@ class VectorTemplate extends BaseTemplate {
 						echo ' emptyPortlet';
 					}
 					?>" aria-labelledby="p-cactions-label">
+						<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="p-cactions-label" />
 						<h3 id="p-cactions-label"><span><?php
 							$this->msg( 'vector-more-actions' )
 						?></span></h3>

components/tabs.less

@@ -167,10 +167,17 @@ div.vectorMenu h3 {
 	}
 }
 
+div.vectorMenu .vectorMenuCheckbox:checked + h3 span:after,
 div.vectorMenu.menuForceShow h3 span:after {
 	transform: scaleY( -1 );
 }
 
+div.vectorMenu .vectorMenuCheckbox:focus + h3 {
+	// Simulate browser focus ring
+	outline: dotted 1px; // Firefox style
+	outline: auto -webkit-focus-ring-color; // Webkit style
+}
+
 div.vectorMenu div.menu {
 	// Match the width of the dropdown "heading" (the tab)
 	min-width: 100%;
@@ -188,11 +195,15 @@ div.vectorMenu div.menu {
 	z-index: 2;
 }
 
-/* Enable forcing showing of the menu for accessibility */
 div.vectorMenu:hover div.menu,
 div.vectorMenu.menuForceShow div.menu {
 	display: block;
 }
+// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
+// Support: IE8
+div.vectorMenu .vectorMenuCheckbox:checked ~ div.menu {
+	display: block;
+}
 
 div.vectorMenu ul {
 	list-style-type: none;
@@ -247,6 +258,27 @@ div.vectorMenu li.selected a:visited {
 	text-decoration: none;
 }
 
+// Invisible checkbox covering the dropdown menu handle
+.vectorMenuCheckbox {
+	cursor: pointer;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	// Hide the checkbox completely in browsers that don't support :checked
+	display: none;
+}
+
+:not( :checked ) > .vectorMenuCheckbox {
+	// When the browser supports :checked, display it
+	display: block;
+}
+
 // Expand vectorMenu as basic tabs in IE6
 // (IE6 doesn't support :hover on DIV)
 * html div.vectorMenu div.menu {

vector.js

@@ -30,6 +30,9 @@ jQuery( function ( $ ) {
 	 */
 	$( 'div.vectorMenu' ).each( function () {
 		var $el = $( this );
+		if ( $el.find( '.vectorMenuCheckbox' ).length ) {
+			return;
+		}
 		$el.find( '> h3 > span' ).parent()
 			.attr( 'tabindex', '0' )
 			// For accessibility, show the menu when the h3 is clicked (bug 24298/46486)