Make dropdown menus keyboard-accessible without JavaScript

Instead of implementing keyboard (and mouse click) handling in
JavaScript, put an invisible <input type="checkbox"> into the
dropdown handle. It can be focused and toggled using keyboard
actions like a normal checkbox. This checkbox also takes over
the duties of handling mouse hovering and clicking.

Old JavaScript and CSS are left in place for compatibility with
cached page HTML, to be removed later in a follow-up.

Bug: T168080
Change-Id: I27532140b06c97921f1cfb64e44bff814d99a358

VectorTemplate.php

@@ -362,6 +362,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>
@@ -405,6 +406,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)