From de2ef2a585447cf75fc8d4a734c12aa2bbd028c2 Mon Sep 17 00:00:00 2001
From: TJ VanToll <tj.vantoll@gmail.com>
Date: Sat, 25 Oct 2014 09:18:17 -0700
Subject: Menu: Wrap menu items in a <div>

This avoids styling issues where ui-state-focus rules apply to submenus.

Fixes #10162
Closes gh-1342
---
 tests/unit/menu/menu.html            | 397 ++++++++++++++++++-----------------
 tests/unit/menu/menu_common.js       |   2 +-
 tests/unit/menu/menu_core.js         |   7 +-
 tests/unit/menu/menu_events.js       |  24 +--
 tests/unit/menu/menu_methods.js      |   5 +-
 tests/unit/menu/menu_options.js      |  18 +-
 tests/unit/menu/menu_test_helpers.js |   4 +-
 tests/visual/menu/menu.html          | 357 +++++++++++++++++--------------
 8 files changed, 446 insertions(+), 368 deletions(-)

(limited to 'tests')

diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html
index cb3df5b00..56115c334 100644
--- a/tests/unit/menu/menu.html
+++ b/tests/unit/menu/menu.html
@@ -33,7 +33,7 @@
 		font-size: 15px;
 		line-height: 15px;
 	}
-	.ui-menu .ui-menu-item {
+	.ui-menu .ui-menu-item-wrapper {
 		padding: 0;
 	}
 	#menu3 {
@@ -52,263 +52,284 @@
 <div id="qunit-fixture">
 
 <ul class="foo" id="menu1">
-	<li class="foo">Aberdeen</li>
-	<li class="foo">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li id="testID1" class="foo">Addyston</li>
-	<li class="foo">Adelphi</li>
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div id="testID1">Addyston</div></li>
+	<li class="foo"><div>Adelphi</div></li>
 </ul>
 
 <ul id="menu2">
-	<li class="foo">Aberdeen</li>
-	<li class="foo">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo"><span class="ui-icon ui-icon-print"></span>Addyston</li>
-	<li>Delphi
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo">
+		<div><span class="ui-icon ui-icon-print"></span>Addyston</div>
+	</li>
+	<li>
+		<div>Delphi</div>
 		<ul>
-			<li class="foo">Ada</li>
-			<li class="foo">Saarland</li>
-			<li class="foo">Salzburg</li>
+			<li class="foo"><div>Ada</div></li>
+			<li class="foo"><div>Saarland</div></li>
+			<li class="foo"><div>Salzburg</div></li>
 		</ul>
 	</li>
-	<li class="foo"> Saarland</li>
-	<li>Salzburg
+	<li class="foo"><div> Saarland</div></li>
+	<li>
+		<div>Salzburg</div>
 		<ul>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li class="foo">Ada</li>
-					<li class="foo">Saarland</li>
-					<li class="foo">Salzburg</li>
+					<li class="foo"><div>Ada</div></li>
+					<li class="foo"><div>Saarland</div></li>
+					<li class="foo"><div>Salzburg</div></li>
 				</ul>
 			</li>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li class="foo">Ada</li>
+					<li class="foo"><div>Ada</div></li>
 					<li> - </li>
-					<li class="foo">Saarland</li>
+					<li class="foo"><div>Saarland</div></li>
 					<li></li>
-					<li class="foo">Salzburg</li>
+					<li class="foo"><div>Salzburg</div></li>
 					<li>&ndash;</li>
 				</ul>
 			</li>
-			<li class="foo">Perch</li>
+			<li class="foo"><div>Perch</div></li>
 		</ul>
 	</li>
 </ul>
 
 <ul class="foo" id="menu3">
-	<li class="foo">Aberdeen</li>
-	<li class="foo">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo">Addyston</li>
-	<li class="foo">Adelphi</li>
-	<li class="foo">Adena</li>
-	<li class="foo">Adrian</li>
-	<li class="foo">Akron</li>
-	<li class="foo">Albany</li>
-	<li class="foo">Alexandria</li>
-	<li class="foo">Alger</li>
-	<li class="foo">Alledonia</li>
-	<li class="foo">Alliance</li>
-	<li class="foo">Alpha</li>
-	<li class="foo">Alvada</li>
-	<li class="foo">Alvordton</li>
-	<li class="foo">Amanda</li>
-	<li class="foo">Amelia</li>
-	<li class="foo">Amesville</li>
-	<li class="foo">Aberdeen</li>
-	<li class="foo">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo">Addyston</li>
-	<li class="foo">Adelphi</li>
-	<li class="foo">Adena</li>
-	<li class="foo">Adrian</li>
-	<li class="foo">Akron</li>
-	<li class="foo">Albany</li>
-	<li class="foo">Alexandria</li>
-	<li class="foo">Alger</li>
-	<li class="foo">Alledonia</li>
-	<li class="foo">Alliance</li>
-	<li class="foo">Alpha</li>
-	<li class="foo">Alvada</li>
-	<li class="foo">Alvordton</li>
-	<li class="foo">Amanda</li>
-	<li class="foo">Amelia</li>
-	<li class="foo">Amesville</li>
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
+	<li class="foo"><div>Adelphi</div></li>
+	<li class="foo"><div>Adena</div></li>
+	<li class="foo"><div>Adrian</div></li>
+	<li class="foo"><div>Akron</div></li>
+	<li class="foo"><div>Albany</div></li>
+	<li class="foo"><div>Alexandria</div></li>
+	<li class="foo"><div>Alger</div></li>
+	<li class="foo"><div>Alledonia</div></li>
+	<li class="foo"><div>Alliance</div></li>
+	<li class="foo"><div>Alpha</div></li>
+	<li class="foo"><div>Alvada</div></li>
+	<li class="foo"><div>Alvordton</div></li>
+	<li class="foo"><div>Amanda</div></li>
+	<li class="foo"><div>Amelia</div></li>
+	<li class="foo"><div>Amesville</div></li>
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
+	<li class="foo"><div>Adelphi</div></li>
+	<li class="foo"><div>Adena</div></li>
+	<li class="foo"><div>Adrian</div></li>
+	<li class="foo"><div>Akron</div></li>
+	<li class="foo"><div>Albany</div></li>
+	<li class="foo"><div>Alexandria</div></li>
+	<li class="foo"><div>Alger</div></li>
+	<li class="foo"><div>Alledonia</div></li>
+	<li class="foo"><div>Alliance</div></li>
+	<li class="foo"><div>Alpha</div></li>
+	<li class="foo"><div>Alvada</div></li>
+	<li class="foo"><div>Alvordton</div></li>
+	<li class="foo"><div>Amanda</div></li>
+	<li class="foo"><div>Amelia</div></li>
+	<li class="foo"><div>Amesville</div></li>
 </ul>
 
 <ul class="foo" id="menu4">
-	<li class="foo">Aberdeen</li>
+	<li class="foo"><div>Aberdeen</div></li>
 	<li class="foo">
-		Ada
+		<div>Ada</div>
 		<ul class="foo">
-			<li class="foo">Aberdeen</li>
-			<li class="foo">Ada</li>
-			<li class="foo">Adamsville</li>
-			<li class="foo">Addyston</li>
-			<li class="foo">Adelphi</li>
-			<li class="foo">Adena</li>
-			<li class="foo">Adrian</li>
-			<li class="foo">Akron</li>
-			<li class="foo">Albany</li>
-			<li class="foo">Alexandria</li>
-			<li class="foo">Alger</li>
-			<li class="foo">Alledonia</li>
-			<li class="foo">Alliance</li>
-			<li class="foo">Alpha</li>
-			<li class="foo">Alvada</li>
-			<li class="foo">Alvordton</li>
-			<li class="foo">Amanda</li>
-			<li class="foo">Amelia</li>
-			<li class="foo">Amesville</li>
-			<li class="foo">Aberdeen</li>
-			<li class="foo">Ada</li>
-			<li class="foo">Adamsville</li>
-			<li class="foo">Addyston</li>
-			<li class="foo">Adelphi</li>
-			<li class="foo">Adena</li>
-			<li class="foo">Adrian</li>
-			<li class="foo">Akron</li>
-			<li class="foo">Albany</li>
+			<li class="foo"><div>Aberdeen</div></li>
+			<li class="foo"><div>Ada</div></li>
+			<li class="foo"><div>Adamsville</div></li>
+			<li class="foo"><div>Addyston</div></li>
+			<li class="foo"><div>Adelphi</div></li>
+			<li class="foo"><div>Adena</div></li>
+			<li class="foo"><div>Adrian</div></li>
+			<li class="foo"><div>Akron</div></li>
+			<li class="foo"><div>Albany</div></li>
+			<li class="foo"><div>Alexandria</div></li>
+			<li class="foo"><div>Alger</div></li>
+			<li class="foo"><div>Alledonia</div></li>
+			<li class="foo"><div>Alliance</div></li>
+			<li class="foo"><div>Alpha</div></li>
+			<li class="foo"><div>Alvada</div></li>
+			<li class="foo"><div>Alvordton</div></li>
+			<li class="foo"><div>Amanda</div></li>
+			<li class="foo"><div>Amelia</div></li>
+			<li class="foo"><div>Amesville</div></li>
+			<li class="foo"><div>Aberdeen</div></li>
+			<li class="foo"><div>Ada</div></li>
+			<li class="foo"><div>Adamsville</div></li>
+			<li class="foo"><div>Addyston</div></li>
+			<li class="foo"><div>Adelphi</div></li>
+			<li class="foo"><div>Adena</div></li>
+			<li class="foo"><div>Adrian</div></li>
+			<li class="foo"><div>Akron</div></li>
+			<li class="foo"><div>Albany</div></li>
 		</ul>
 	</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo">Addyston</li>
-	<li class="foo">Adelphi</li>
-	<li class="foo">Adena</li>
-	<li class="foo">Adrian</li>
-	<li class="foo">Akron</li>
-	<li class="foo">Albany</li>
-	<li class="foo">Alexandria</li>
-	<li class="foo">Alger</li>
-	<li class="foo">Alledonia</li>
-	<li class="foo">Alliance</li>
-	<li class="foo">Alpha</li>
-	<li class="foo">Alvada</li>
-	<li class="foo">Alvordton</li>
-	<li class="foo">Amanda</li>
-	<li class="foo">Amelia</li>
-	<li class="foo">Amesville</li>
-	<li class="foo">Aberdeen</li>
-	<li class="foo">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo">Addyston</li>
-	<li class="foo">Adelphi</li>
-	<li class="foo">Adena</li>
-	<li class="foo">Adrian</li>
-	<li class="foo">Akron</li>
-	<li class="foo">Albany</li>
-	<li class="foo">Alexandria</li>
-	<li class="foo">Alger</li>
-	<li class="foo">Alledonia</li>
-	<li class="foo">Alliance</li>
-	<li class="foo">Alpha</li>
-	<li class="foo">Alvada</li>
-	<li class="foo">Alvordton</li>
-	<li class="foo">Amanda</li>
-	<li class="foo">Amelia</li>
-	<li class="foo">Amesville</li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
+	<li class="foo"><div>Adelphi</div></li>
+	<li class="foo"><div>Adena</div></li>
+	<li class="foo"><div>Adrian</div></li>
+	<li class="foo"><div>Akron</div></li>
+	<li class="foo"><div>Albany</div></li>
+	<li class="foo"><div>Alexandria</div></li>
+	<li class="foo"><div>Alger</div></li>
+	<li class="foo"><div>Alledonia</div></li>
+	<li class="foo"><div>Alliance</div></li>
+	<li class="foo"><div>Alpha</div></li>
+	<li class="foo"><div>Alvada</div></li>
+	<li class="foo"><div>Alvordton</div></li>
+	<li class="foo"><div>Amanda</div></li>
+	<li class="foo"><div>Amelia</div></li>
+	<li class="foo"><div>Amesville</div></li>
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
+	<li class="foo"><div>Adelphi</div></li>
+	<li class="foo"><div>Adena</div></li>
+	<li class="foo"><div>Adrian</div></li>
+	<li class="foo"><div>Akron</div></li>
+	<li class="foo"><div>Albany</div></li>
+	<li class="foo"><div>Alexandria</div></li>
+	<li class="foo"><div>Alger</div></li>
+	<li class="foo"><div>Alledonia</div></li>
+	<li class="foo"><div>Alliance</div></li>
+	<li class="foo"><div>Alpha</div></li>
+	<li class="foo"><div>Alvada</div></li>
+	<li class="foo"><div>Alvordton</div></li>
+	<li class="foo"><div>Amanda</div></li>
+	<li class="foo"><div>Amelia</div></li>
+	<li class="foo"><div>Amesville</div></li>
 </ul>
 
 <div id="menu5">
-	<blockquote>Aberdeen</blockquote>
-	<blockquote>Ada</blockquote>
-	<blockquote>Adamsville</blockquote>
-	<blockquote>Addyston</blockquote>
-	<blockquote>Delphi
-		<div>
-			<blockquote>Ada</blockquote>
-			<blockquote>Saarland</blockquote>
-			<blockquote>Salzburg</blockquote>
+	<blockquote><div>Aberdeen</div></blockquote>
+	<blockquote><div>Ada</div></blockquote>
+	<blockquote><div>Adamsville</div></blockquote>
+	<blockquote><div>Addyston</div></blockquote>
+	<blockquote>
+		<div>Delphi</div>
+		<div class="menu">
+			<blockquote><div>Ada</div></blockquote>
+			<blockquote><div>Saarland</div></blockquote>
+			<blockquote><div>Salzburg</div></blockquote>
 		</div>
 	</blockquote>
-	<blockquote>Saarland</blockquote>
-	<blockquote>Salzburg
-		<div>
-			<blockquote>Delphi
-				<div>
-					<blockquote>Ada</blockquote>
+	<blockquote><div>Saarland</div></blockquote>
+	<blockquote>
+		<div>Salzburg</div>
+		<div class="menu">
+			<blockquote>
+				<div>Delphi</div>
+				<div class="menu">
+					<blockquote><div>Ada</div></blockquote>
 					<blockquote id="testID2">Saarland</blockquote>
-					<blockquote>Salzburg</blockquote>
+					<blockquote><div>Salzburg</div></blockquote>
 				</div>
 			</blockquote>
-			<blockquote>Delphi
-				<div>
-					<blockquote>Ada</blockquote>
-					<blockquote>Saarland</blockquote>
-					<blockquote>Salzburg</blockquote>
+			<blockquote>
+				<div>Delphi</div>
+				<div class="menu">
+					<blockquote><div>Ada</div></blockquote>
+					<blockquote><div>Saarland</div></blockquote>
+					<blockquote><div>Salzburg</div></blockquote>
 				</div>
 			</blockquote>
-			<blockquote>Perch</blockquote>
+			<blockquote><div>Perch</div></blockquote>
 		</div>
 	</blockquote>
 </div>
 
 <ul id="menu6">
-	<li class="foo">Aberdeen</li>
-	<li class="foo ui-state-disabled">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo">Addyston</li>
-	<li id="testID3" class="ui-state-disabled">Delphi
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo ui-state-disabled"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
+	<li id="testID3" class="ui-state-disabled">
+		<div>Delphi</div>
 		<ul>
-			<li class="foo">Ada</li>
-			<li class="foo">Saarland</li>
-			<li class="foo">Salzburg</li>
+			<li class="foo"><div>Ada</div></li>
+			<li class="foo"><div>Saarland</div></li>
+			<li class="foo"><div>Salzburg</div></li>
 		</ul>
 	</li>
-	<li class="foo">Saarland</li>
+	<li class="foo"><div>Saarland</div></li>
 </ul>
 
 <ul id="menu7">
-	<li class="ui-menu-group"><strong>Group 1</strong></li>
-	<li>Aberdeen</li>
-	<li>Ada</li>
-	<li>Adamsville</li>
-	<li>Addyston</li>
+	<li class="ui-menu-group">
+		<div><strong>Group 1</strong></div>
+	</li>
+	<li><div>Aberdeen</div></li>
+	<li><div>Ada</div></li>
+	<li><div>Adamsville</div></li>
+	<li><div>Addyston</div></li>
 	<li></li>
-	<li class="ui-menu-group"><strong>Group 2</strong></li>
-	<li>Delphi
+	<li class="ui-menu-group">
+		<div><strong>Group 2</strong></div>
+	</li>
+	<li>
+		<div>Delphi</div>
 		<ul>
-			<li>Ada</li>
-			<li>Saarland</li>
-			<li>Salzburg</li>
+			<li><div>Ada</div></li>
+			<li><div>Saarland</div></li>
+			<li><div>Salzburg</div></li>
 		</ul>
 	</li>
-	<li>Saarland</li>
+	<li><div>Saarland</div></li>
 	<li>---</li>
-	<li class="ui-menu-group"><strong>Group 3</strong></li>
-	<li>Salzburg
+	<li class="ui-menu-group">
+		<div><strong>Group 3</strong></div>
+	</li>
+	<li>
+		<div>Salzburg</div>
 		<ul>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li>Ada</li>
+					<li><div>Ada</div></li>
 					<li> - </li>
-					<li>Saarland</li>
+					<li><div>Saarland</div></li>
 					<li>&mdash;</li>
-					<li>Salzburg</li>
+					<li><div>Salzburg</div></li>
 					<li>&ndash;</li>
 				</ul>
 			</li>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li>Ada</li>
-					<li>Saarland</li>
-					<li>Salzburg</li>
+					<li><div>Ada</div></li>
+					<li><div>Saarland</div></li>
+					<li><div>Salzburg</div></li>
 				</ul>
 			</li>
-			<li>Perch</li>
+			<li><div>Perch</div></li>
 		</ul>
 	</li>
-	<li>Amesville</li>
+	<li><div>Amesville</div></li>
 </ul>
 
 <ul id="menu8">
-	<li class="foo">Aberdeen</li>
-	<li class="foo ui-state-disabled">Ada</li>
-	<li class="foo">Adamsville</li>
-	<li class="foo">Addyston</li>
+	<li class="foo"><div>Aberdeen</div></li>
+	<li class="foo ui-state-disabled"><div>Ada</div></li>
+	<li class="foo"><div>Adamsville</div></li>
+	<li class="foo"><div>Addyston</div></li>
 	<li class="foo">-</li>
-	<li class="foo">-Saarland</li>
+	<li class="foo"><div>-Saarland</div></li>
 </ul>
 
 </div>
diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js
index 099dd091e..2404ebe02 100644
--- a/tests/unit/menu/menu_common.js
+++ b/tests/unit/menu/menu_common.js
@@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", {
 		items: "> *",
 		menus: "ul",
 		position: {
-			my: "left-1 top",
+			my: "left top",
 			at: "right top"
 		},
 		role: "menu",
diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js
index df039c9e4..f02f97fca 100644
--- a/tests/unit/menu/menu_core.js
+++ b/tests/unit/menu/menu_core.js
@@ -48,12 +48,13 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio
 asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function() {
 	expect( 1 );
 	var element = $( "#menu1" ).menu(),
-		firstChild = element.children().eq( 0 );
+		firstChild = element.children().eq( 0 ),
+		wrapper = firstChild.children( ".ui-menu-item-wrapper" );
 
 	element.menu( "focus", null, firstChild );
-	firstChild.addClass( "ui-state-active" );
+	wrapper.addClass( "ui-state-active" );
 	setTimeout( function() {
-		ok( firstChild.is( ".ui-state-active" ), "ui-state-active improperly removed" );
+		ok( wrapper.is( ".ui-state-active" ), "ui-state-active improperly removed" );
 		start();
 	}, 500 );
 });
diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js
index 02e63bf63..f4d494f47 100644
--- a/tests/unit/menu/menu_events.js
+++ b/tests/unit/menu/menu_events.js
@@ -32,7 +32,7 @@ test( "handle click on custom item menu", function() {
 		select: function() {
 			log();
 		},
-		menus: "div"
+		menus: ".menu"
 	});
 	log( "click", true );
 	click( element, "1" );
@@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() {
 	expect( 1 );
 	var element = $( "#menu1" ).menu({
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index() );
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
@@ -142,12 +142,12 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() {
 
 asyncTest( "handle submenu auto collapse: mouseleave", function() {
 	expect( 4 );
-	var element = $( "#menu5" ).menu({ menus: "div" }),
+	var element = $( "#menu5" ).menu({ menus: ".menu" }),
 		event = $.Event( "mouseenter" );
 
 	function menumouseleave1() {
 		equal( element.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" );
-		element.menu( "focus", event, element.find( ":nth-child(7)" ).find( "div" ).eq( 0 ).children().eq( 0 ) );
+		element.menu( "focus", event, element.find( ":nth-child(7)" ).find( ".menu" ).eq( 0 ).children().eq( 0 ) );
 		setTimeout( menumouseleave2, 350 );
 	}
 	function menumouseleave2() {
@@ -177,7 +177,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen
 			log( $( ui.item[ 0 ] ).text() );
 		},
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index() );
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
@@ -243,7 +243,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
 			log( $( ui.item[0] ).text() );
 		},
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index() );
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
@@ -363,7 +363,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus"
 			log( $( ui.item[ 0 ] ).text() );
 		},
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index());
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
@@ -438,7 +438,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f
 			log( $( ui.item[ 0 ] ).text() );
 		},
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index());
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index());
 		}
 	});
 
@@ -533,7 +533,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
 			log( $( ui.item[0] ).text() );
 		},
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index());
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index());
 		}
 	});
 
@@ -585,7 +585,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and
 			log( $( ui.item[0] ).text() );
 		},
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index());
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
@@ -612,7 +612,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function()
 	expect( 3 );
 	var element = $( "#menu2" ).menu({
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index() );
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
@@ -635,7 +635,7 @@ asyncTest( "Keep focus on selected item (see #10644)", function() {
 	expect( 1 );
 	var element = $( "#menu2" ).menu({
 		focus: function( event ) {
-			log( $( event.target ).find( ".ui-state-focus" ).index() );
+			log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
 		}
 	});
 
diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js
index 5a633998d..ef8279018 100644
--- a/tests/unit/menu/menu_methods.js
+++ b/tests/unit/menu/menu_methods.js
@@ -73,11 +73,12 @@ test( "refresh icons (see #9377)", function() {
 	expect( 3 );
 	var element = $( "#menu1" ).menu();
 	ok( !element.hasClass( "ui-menu-icons") );
-	element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
+	element.find( "li:first .ui-menu-item-wrapper" )
+		.html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" );
 	element.menu( "refresh" );
 
 	ok( element.hasClass( "ui-menu-icons" ) );
-	element.find( "li:first" ).html( "Save" );
+	element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" );
 	element.menu( "refresh" );
 	ok( !element.hasClass( "ui-menu-icons" ) );
 });
diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js
index c76673345..438b02a32 100644
--- a/tests/unit/menu/menu_options.js
+++ b/tests/unit/menu/menu_options.js
@@ -71,8 +71,10 @@ test( "{ role: 'menu' } ", function() {
 	ok( items.length > 0, "number of menu items" );
 	items.each(function( item ) {
 		ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
-		equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" );
-		equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
+		equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ),
+			"menuitem", "menu item ("+ item + ") role" );
+		equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
+			"tabindex for menu item ("+ item + ")" );
 	});
 });
 
@@ -86,8 +88,10 @@ test( "{ role: 'listbox' } ", function() {
 	ok( items.length > 0, "number of menu items" );
 	items.each(function( item ) {
 		ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
-		equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" );
-		equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
+		equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option",
+			"menu item ("+ item + ") role" );
+		equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
+			"tabindex for menu item ("+ item + ")" );
 	});
 });
 
@@ -101,8 +105,10 @@ test( "{ role: null }", function() {
 	ok( items.length > 0, "number of menu items" );
 	items.each(function( item ) {
 		ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" );
-		equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" );
-		equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" );
+		equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), undefined,
+			"menu item ("+ item + ") role" );
+		equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1",
+			"tabindex for menu item ("+ item + ")" );
 	});
 });
 
diff --git a/tests/unit/menu/menu_test_helpers.js b/tests/unit/menu/menu_test_helpers.js
index 77737c390..ea273c765 100644
--- a/tests/unit/menu/menu_test_helpers.js
+++ b/tests/unit/menu/menu_test_helpers.js
@@ -24,7 +24,9 @@ TestHelpers.menu = {
 
 	click: function( menu, item ) {
 		lastItem = item;
-		menu.children( ":eq(" + item + ")" ).trigger( "click" );
+		menu.children( ":eq(" + item + ")" )
+			.children( ".ui-menu-item-wrapper" )
+			.trigger( "click" );
 	}
 };
 
diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
index 11e9df6e1..855748d3d 100644
--- a/tests/visual/menu/menu.html
+++ b/tests/visual/menu/menu.html
@@ -28,7 +28,7 @@
 		});
 
 		$( "#menu5" ).menu({
-			menus: "div",
+			menus: ".menuElement",
 			select: logger
 		});
 
@@ -56,241 +56,288 @@
 
 <h2>Default inline menu</h2>
 <ul id="menu1">
-	<li>Aberdeen</li>
-	<li>Ada</li>
-	<li>Adamsville</li>
-	<li>Addyston</li>
-	<li>Delphi</li>
-	<li>Saarland</li>
-	<li>Salzburg</li>
+	<li><div>Aberdeen</div></li>
+	<li><div>Ada</div></li>
+	<li><div>Adamsville</div></li>
+	<li><div>Addyston</div></li>
+	<li><div>Delphi</div></li>
+	<li><div>Saarland</div></li>
+	<li><div>Salzburg</div></li>
 </ul>
 
 <h2>Inline with disabled items and submenus</h2>
 <ul id="menu2">
-	<li class="ui-state-disabled">Aberdeen</li>
-	<li>Ada</li>
-	<li>Adamsville</li>
-	<li>Addyston</li>
-	<li>Delphi
+	<li class="ui-state-disabled"><div>Aberdeen</div></li>
+	<li><div>Ada</div></li>
+	<li><div>Adamsville</div></li>
+	<li><div>Addyston</div></li>
+	<li>
+		<div>Delphi</div>
 		<ul>
-			<li class="ui-state-disabled">Ada</li>
-			<li>Saarland</li>
-			<li>Salzburg</li>
+			<li class="ui-state-disabled"><div>Ada</div></li>
+			<li><div>Saarland</div></li>
+			<li><div>Salzburg</div></li>
 		</ul>
 	</li>
-	<li>Saarland</li>
-	<li>Salzburg
+	<li><div>Saarland</div></li>
+	<li>
+		<div>Salzburg</div>
 		<ul>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li>Ada</li>
-					<li>Saarland</li>
-					<li>Salzburg</li>
+					<li><div>Ada</div></li>
+					<li><div>Saarland</div></li>
+					<li><div>Salzburg</div></li>
 				</ul>
 			</li>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li>Ada</li>
-					<li>Saarland</li>
-					<li>Salzburg</li>
+					<li><div>Ada</div></li>
+					<li><div>Saarland</div></li>
+					<li><div>Salzburg</div></li>
 				</ul>
 			</li>
-			<li class="ui-state-disabled">Perch</li>
+			<li class="ui-state-disabled"><div>Perch</div></li>
 		</ul>
 	</li>
-	<li class="ui-state-disabled">Amesville</li>
+	<li class="ui-state-disabled"><div>Amesville</div></li>
 </ul>
 
 <h2>Menu with icons</h2>
 <ul id="menu3">
-	<li><span class="ui-icon ui-icon-print"></span>Aberdeen</li>
-	<li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li>
-	<li>Adamsville</li>
-	<li><span class="ui-icon ui-icon-wrench"></span>Addyston</li>
-	<li class="ui-state-disabled">Delphi
+	<li>
+		<div><span class="ui-icon ui-icon-print"></span>Aberdeen</div>
+	</li>
+	<li class="ui-state-disabled">
+		<div><span class="ui-icon ui-icon-scissors"></span>Ada</div>
+	</li>
+	<li><div>Adamsville</div></li>
+	<li>
+		<div><span class="ui-icon ui-icon-wrench"></span>Addyston</div>
+	</li>
+	<li class="ui-state-disabled">
+		<div>Delphi</div>
 		<ul>
-			<li>Ada</li>
-			<li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
-			<li>Salzburg</li>
+			<li><div>Ada</div></li>
+			<li>
+				<div><span class="ui-icon ui-icon-wrench"></span>Saarland</div>
+			</li>
+			<li><div>Salzburg</div></li>
 		</ul>
 	</li>
-	<li>Saarland</li>
 	<li>
-		<span class="ui-icon ui-icon-print"></span>Salzburg
+		<div>Saarland</div></li>
+	<li>
+		<div>
+			<span class="ui-icon ui-icon-print"></span>Salzburg
+		</div>
 		<ul>
 			<li>
-				<span class="ui-icon ui-icon-wrench"></span>Delphi
+				<div><span class="ui-icon ui-icon-wrench"></span>Delphi</div>
 				<ul>
-					<li>Ada</li>
-					<li>Saarland</li>
-					<li>Salzburg</li>
+					<li><div>Ada</div></li>
+					<li><div>Saarland</div></li>
+					<li><div>Salzburg</div></li>
 				</ul>
 			</li>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li><span class="ui-icon ui-icon-wrench"></span>Ada</li>
-					<li><span class="ui-icon ui-icon-wrench"></span>Saarland</li>
-					<li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li>
+					<li><div><span class="ui-icon ui-icon-wrench"></span>Ada</div></li>
+					<li><div><span class="ui-icon ui-icon-wrench"></span>Saarland</div></li>
+					<li><div><span class="ui-icon ui-icon-wrench"></span>Salzburg</div></li>
 				</ul>
 			</li>
-			<li>Perch</li>
+			<li><div>Perch</div></li>
 		</ul>
 	</li>
 </ul>
 
 <h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2>
 <ul class="menu4">
-	<li>Aberdeen</li>
-	<li>Ada</li>
-	<li>Adamsville</li>
-	<li>Addyston</li>
-	<li>Adelphi</li>
-	<li>Adena</li>
-	<li>Adrian</li>
-	<li>Akron</li>
-	<li>Albany</li>
-	<li>Alexandria</li>
-	<li>Alger</li>
-	<li>Alledonia</li>
-	<li>Alliance</li>
-	<li>Alpha</li>
-	<li>Alvada</li>
-	<li>Alvordton</li>
-	<li>Amanda</li>
-	<li>Amelia</li>
-	<li>Amesville</li>
-	<li>Aberdeen</li>
-	<li>Ada</li>
-	<li>Adamsville</li>
-	<li>Addyston</li>
-	<li>Adelphi</li>
-	<li>Adena</li>
-	<li>Adrian</li>
-	<li>Akron</li>
-	<li>Albany</li>
-	<li>Alexandria</li>
-	<li>Alger</li>
-	<li>Alledonia</li>
-	<li>Alliance</li>
-	<li>Alpha</li>
-	<li>Alvada</li>
-	<li>Alvordton</li>
-	<li>Amanda</li>
-	<li>Amelia</li>
-	<li>Amesville</li>
+	<li><div>Aberdeen</div></li>
+	<li><div>Ada</div></li>
+	<li><div>Adamsville</div></li>
+	<li><div>Addyston</div></li>
+	<li><div>Adelphi</div></li>
+	<li><div>Adena</div></li>
+	<li><div>Adrian</div></li>
+	<li><div>Akron</div></li>
+	<li><div>Albany</div></li>
+	<li><div>Alexandria</div></li>
+	<li><div>Alger</div></li>
+	<li><div>Alledonia</div></li>
+	<li><div>Alliance</div></li>
+	<li><div>Alpha</div></li>
+	<li><div>Alvada</div></li>
+	<li><div>Alvordton</div></li>
+	<li><div>Amanda</div></li>
+	<li><div>Amelia</div></li>
+	<li><div>Amesville</div></li>
+	<li><div>Aberdeen</div></li>
+	<li><div>Ada</div></li>
+	<li><div>Adamsville</div></li>
+	<li><div>Addyston</div></li>
+	<li><div>Adelphi</div></li>
+	<li><div>Adena</div></li>
+	<li><div>Adrian</div></li>
+	<li><div>Akron</div></li>
+	<li><div>Albany</div></li>
+	<li><div>Alexandria</div></li>
+	<li><div>Alger</div></li>
+	<li><div>Alledonia</div></li>
+	<li><div>Alliance</div></li>
+	<li><div>Alpha</div></li>
+	<li><div>Alvada</div></li>
+	<li><div>Alvordton</div></li>
+	<li><div>Amanda</div></li>
+	<li><div>Amelia</div></li>
+	<li><div>Amesville</div></li>
 </ul>
 
 <h2>Menu with custom markup</h2>
-<div id="menu5">
-	<blockquote>Aberdeen</blockquote>
-	<blockquote>Ada</blockquote>
-	<blockquote class="ui-state-disabled">Adamsville</blockquote>
-	<blockquote>Addyston</blockquote>
-	<blockquote>Delphi
-		<div>
-			<blockquote>Ada</blockquote>
-			<blockquote>Saarland</blockquote>
-			<blockquote>Salzburg</blockquote>
-		</div>
+<div id="menu5" class="menuElement">
+	<blockquote><div>Aberdeen</div></blockquote>
+	<blockquote><div>Ada</div></blockquote>
+	<blockquote class="ui-state-disabled"><div>Adamsville</div></blockquote>
+	<blockquote><div>Addyston</div></blockquote>
+	<blockquote>
+		<div>Delphi</div>
+		<blockquote class="menuElement">
+			<blockquote><div>Ada</div></blockquote>
+			<blockquote><div>Saarland</div></blockquote>
+			<blockquote><div>Salzburg</div></blockquote>
+		</blockquote>
 	</blockquote>
-	<blockquote>Saarland</blockquote>
-	<blockquote>Salzburg
-		<div>
-			<blockquote>Delphi
-				<div>
-					<blockquote>Ada</blockquote>
-					<blockquote>Saarland</blockquote>
-					<blockquote>Salzburg</blockquote>
-				</div>
+	<blockquote><div>Saarland</div></blockquote>
+	<blockquote>
+		<div>Salzburg</div>
+		<blockquote class="menuElement">
+			<blockquote>
+				<div>Delphi</div>
+				<blockquote class="menuElement">
+					<blockquote><div>Ada</div></blockquote>
+					<blockquote><div>Saarland</div></blockquote>
+					<blockquote><div>Salzburg</div></blockquote>
+				</blockquote>
 			</blockquote>
-			<blockquote>Delphi
-				<div>
-					<blockquote>Ada</blockquote>
-					<blockquote>Saarland</blockquote>
-					<blockquote>Salzburg</blockquote>
-				</div>
+			<blockquote>
+				<div>Delphi</div>
+				<blockquote class="menuElement">
+					<blockquote><div>Ada</div></blockquote>
+					<blockquote><div>Saarland</div></blockquote>
+					<blockquote><div>Salzburg</div></blockquote>
+				</blockquote>
 			</blockquote>
-			<blockquote>Perch</blockquote>
-		</div>
+			<blockquote><div>Perch</div></blockquote>
+		</blockquote>
 	</blockquote>
 </div>
 
 <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2>
 <div class="menuElement" id="menu6">
 	<div class="address-item">
-		<span class="address-header">John Doe</span>
-		<span class="address-content">78 West Main St Apt 3A</span>
-		<span class="address-content">Bloomsburg, PA 12345</span>
+		<div>
+			<span class="address-header">John Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</div>
 	</div>
 	<div class="address-item">
-		<span class="address-header">Jane Doe</span>
-		<span class="address-content">78 West Main St Apt 3A</span>
-		<span class="address-content">Bloomsburg, PA 12345</span>
+		<div>
+			<span class="address-header">Jane Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</div>
 	</div>
 	<div class="address-item ui-state-disabled">
-		<span class="address-header">James Doe</span>
-		<span class="address-content">78 West Main St Apt 3A</span>
-		<span class="address-content">Bloomsburg, PA 12345</span>
+		<div>
+			<span class="address-header">James Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</div>
 	</div>
 	<div class="address-item">
-		<span class="address-header">Jenny Doe</span>
-		<span class="address-content">78 West Main St Apt 3A</span>
-		<span class="address-content">Bloomsburg, PA 12345</span>
+		<div>
+			<span class="address-header">Jenny Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</div>
 	</div>
 	<div class="address-item">
-		<span class="address-header">John Doe</span>
-		<span class="address-content">78 West Main St Apt 3A</span>
-		<span class="address-content">Bloomsburg, PA 12345</span>
+		<div>
+			<span class="address-header">John Doe</span>
+			<span class="address-content">78 West Main St Apt 3A</span>
+			<span class="address-content">Bloomsburg, PA 12345</span>
+		</div>
 		<div class="menuElement">
-			<div>Ada</div>
-			<div>Saarland</div>
-			<div>Salzburg</div>
+			<div>
+				<div>Ada</div>
+			</div>
+			<div>
+				<div>Saarland</div>
+			</div>
+			<div>
+				<div>Salzburg</div>
+			</div>
 		</div>
 	</div>
 </div>
 
 <h2>Inline with dividers and group labels</h2>
 <ul id="menu7">
-	<li class="ui-menu-group"><strong>Group 1</strong></li>
-	<li>Aberdeen</li>
-	<li>Ada</li>
-	<li>Adamsville</li>
-	<li>Addyston</li>
+	<li class="ui-menu-group">
+		<div><strong>Group 1</strong></div>
+	</li>
+	<li><div>Aberdeen</div></li>
+	<li><div>Ada</div></li>
+	<li><div>Adamsville</div></li>
+	<li><div>Addyston</div></li>
 	<li></li>
-	<li class="ui-menu-group"><strong>Group 2</strong></li>
-	<li>Delphi
+	<li class="ui-menu-group">
+		<div><strong>Group 2</strong></div>
+	</li>
+	<li>
+		<div>Delphi</div>
 		<ul>
-			<li>Ada</li>
-			<li>Saarland</li>
-			<li>Salzburg</li>
+			<li><div>Ada</div></li>
+			<li><div>Saarland</div></li>
+			<li><div>Salzburg</div></li>
 		</ul>
 	</li>
-	<li>Saarland</li>
+	<li><div>Saarland</div></li>
 	<li>---</li>
-	<li class="ui-menu-group"><strong>Group 3</strong></li>
-	<li>Salzburg
+	<li class="ui-menu-group">
+		<div><strong>Group 3</strong></div>
+	</li>
+	<li>
+		<div>Salzburg</div>
 		<ul>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li>Ada</li>
-					<li> - </li>
-					<li>Saarland</li>
+					<li><div>Ada</div></li>
+					<li>-</li>
+					<li><div>Saarland</div></li>
 					<li>&mdash;</li>
-					<li>Salzburg</li>
+					<li><div>Salzburg</div></li>
 					<li>&ndash;</li>
 				</ul>
 			</li>
-			<li>Delphi
+			<li>
+				<div>Delphi</div>
 				<ul>
-					<li>Ada</li>
-					<li>Saarland</li>
-					<li>Salzburg</li>
+					<li><div>Ada</div></li>
+					<li><div>Saarland</div></li>
+					<li><div>Salzburg</div></li>
 				</ul>
 			</li>
-			<li>Perch</li>
+			<li><div>Perch</div></li>
 		</ul>
 	</li>
-	<li>Amesville</li>
+	<li><div>Amesville</div></li>
 </ul>
 
 <div style="position: absolute; top: 1em; right: 1em;">
-- 
cgit v1.2.3