From 56ec1a3c8702abd26d60b6964917ab46ad64213a Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Tue, 4 Jul 2017 17:51:10 +0200
Subject: [PATCH] Remove <div> inside of the <h3>

The <div> was introduced in aba11a7b but this is not valid in HTML 5.

This change ommits the <div> and attaches the background image to the
existing <span>.

Cached HTML with the <div></div> does not matter for the result.

Bug: T169551
Change-Id: I04f7032b6f6bafe10548fde690f55de66b56f61f
---
 VectorTemplate.php   |  4 ++--
 components/tabs.less | 18 +++++-------------
 vector.js            |  6 +++---
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/VectorTemplate.php b/VectorTemplate.php
index 234e015f..9b0c80cd 100644
--- a/VectorTemplate.php
+++ b/VectorTemplate.php
@@ -398,7 +398,7 @@ class VectorTemplate extends BaseTemplate {
 						}
 						?>
 						<h3 id="p-variants-label">
-							<span><?php echo htmlspecialchars( $variantLabel ) ?></span><div></div>
+							<span><?php echo htmlspecialchars( $variantLabel ) ?></span>
 						</h3>
 
 						<div class="menu">
@@ -468,7 +468,7 @@ class VectorTemplate extends BaseTemplate {
 					?>" aria-labelledby="p-cactions-label">
 						<h3 id="p-cactions-label"><span><?php
 							$this->msg( 'vector-more-actions' )
-						?></span><div></div></h3>
+						?></span></h3>
 
 						<div class="menu">
 							<ul<?php $this->html( 'userlangattributes' ) ?>>
diff --git a/components/tabs.less b/components/tabs.less
index d9369034..a22d260d 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -148,28 +148,20 @@ div.vectorMenu h3 span {
 	font-size: 0.8em;
 	padding-left: 0.7em;
 	padding-top: 1.375em;
-	margin-right: 20px;
+	padding-right: 20px;
 	font-weight: normal;
 	color: @menu-main-heading-color;
-}
-
-div.vectorMenu h3 div {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 20px;
-	height: 2.5em;
 	.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
-	background-position: 100% 70%;
+	background-position: 100% 100%;
 	background-repeat: no-repeat;
 	.transition(background-position 250ms);
 }
 
-div.vectorMenu.menuForceShow h3 div {
-	background-position: 100% 100%;
+div.vectorMenu.menuForceShow h3 span {
+	background-position: 100% 130%;
 }
 
-div.vectorMenuFocus h3 div {
+div.vectorMenuFocus h3 span {
 	.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
 }
 
diff --git a/vector.js b/vector.js
index 6e4a2a7d..f0b806ae 100644
--- a/vector.js
+++ b/vector.js
@@ -30,7 +30,7 @@ jQuery( function ( $ ) {
 	 */
 	$( 'div.vectorMenu' ).each( function () {
 		var $el = $( this );
-		$el.find( '> h3 > div' ).parent()
+		$el.find( '> h3 > span' ).parent()
 			.attr( 'tabindex', '0' )
 			// For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
 			.on( 'click keypress', function ( e ) {
@@ -41,10 +41,10 @@ jQuery( function ( $ ) {
 			} )
 			// When the heading has focus, also set a class that will change the arrow icon
 			.focus( function () {
-				$el.find( '> div' ).addClass( 'vectorMenuFocus' );
+				$el.find( '> span' ).addClass( 'vectorMenuFocus' );
 			} )
 			.blur( function () {
-				$el.find( '> div' ).removeClass( 'vectorMenuFocus' );
+				$el.find( '> span' ).removeClass( 'vectorMenuFocus' );
 			} );
 	} );