Tabs: Pass the list item instead of the anchor in events; move aria-controls from the anchor to the list item.

8 files changed, 81 insertions, 67 deletions

diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html
index b961c60f3..b9fa507d8 100644
--- a/tests/unit/tabs/tabs.html
+++ b/tests/unit/tabs/tabs.html
@@ -57,7 +57,7 @@
 		<li><a href="#colon:test"><span>1</span></a></li>
 		<li><a href="#inline-style"><span>2</span></a></li>
 		<li><a href="data/test.html#test"><span>3</span></a></li>
-		<li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li>
+		<li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li>
 		<li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li>
 	</ul>
 	<div id="colon:test"></div>
diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js
index b9bd81987..fb3c306e6 100644
--- a/tests/unit/tabs/tabs_core.js
+++ b/tests/unit/tabs/tabs_core.js
@@ -47,14 +47,15 @@ test( "disconnected from DOM", function() {
 test( "aria-controls", function() {
 	expect( 7 );
 	var element = $( "#tabs1" ).tabs(),
-		tabs = element.find( ".ui-tabs-nav a" );
+		tabs = element.find( ".ui-tabs-nav li" );
 	tabs.each(function() {
-		var tab = $( this );
-		equal( tab.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) );
+		var tab = $( this ),
+			anchor = tab.find( ".ui-tabs-anchor" );
+		equal( anchor.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) );
 	});
 
 	element = $( "#tabs2" ).tabs();
-	tabs = element.find( ".ui-tabs-nav a" );
+	tabs = element.find( ".ui-tabs-nav li" );
 	equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" );
 	equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" );
 	ok( /^ui-tabs-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" );
@@ -86,11 +87,11 @@ test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", funct
 	element.tabs({
 		beforeLoad: function( event, ui ) {
 			event.preventDefault();
-			ok( false, 'should not be an ajax tab');
+			ok( false, "should not be an ajax tab" );
 		}
 	});
 
-	equal( element.find( ".ui-tabs-nav a" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" );
+	equal( element.find( ".ui-tabs-nav li" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" );
 	state( element, 1 );
 });
 
diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html
index 09afc91b4..e58382efb 100644
--- a/tests/unit/tabs/tabs_deprecated.html
+++ b/tests/unit/tabs/tabs_deprecated.html
@@ -56,7 +56,7 @@
 		<li><a href="#colon:test"><span>1</span></a></li>
 		<li><a href="#inline-style"><span>2</span></a></li>
 		<li><a href="data/test.html#test"><span>3</span></a></li>
-		<li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li>
+		<li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li>
 		<li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li>
 	</ul>
 	<div id="colon:test"></div>
diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js
index 66768b866..351433348 100644
--- a/tests/unit/tabs/tabs_deprecated.js
+++ b/tests/unit/tabs/tabs_deprecated.js
@@ -107,11 +107,11 @@ test( "tabTemplate + panelTemplate", function() {
 	});
 	element.tabs( "add", "#new", "New" );
 	tab = element.find( ".ui-tabs-nav li" ).last();
-	anchor = tab.find( "a" );
+	anchor = tab.find( ".ui-tabs-anchor" );
 	equal( tab.text(), "New", "label" );
 	ok( tab.hasClass( "customTab" ), "tab custom class" );
 	equal( anchor.attr( "href" ), "http://example.com/#new", "href" );
-	equal( anchor.attr( "aria-controls" ), "new", "aria-controls" );
+	equal( tab.attr( "aria-controls" ), "new", "aria-controls" );
 	ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" );
 });
 
@@ -210,7 +210,7 @@ test( "selected", function() {
 	equal( element.tabs( "option", "selected" ), 0 );
 	state( element, 1, 0, 0 );
 
-	element.find( ".ui-tabs-nav a" ).eq( 1 ).click();
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click();
 	equal( element.tabs( "option", "selected" ), 1 );
 	state( element, 0, 1, 0 );
 
@@ -226,17 +226,18 @@ module( "tabs (deprecated): events" );
 asyncTest( "load", function() {
 	expect( 15 );
 
-	var tab, panelId, panel,
+	var tab, anchor, panelId, panel,
 		element = $( "#tabs2" );
 
 	// init
 	element.one( "tabsload", function( event, ui ) {
-		tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
+		tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
+		anchor = tab.find( ".ui-tabs-anchor" );
 		panelId = tab.attr( "aria-controls" );
 		panel = $( "#" + panelId );
 
 		ok( !( "originalEvent" in event ), "originalEvent" );
-		strictEqual( ui.tab, tab[ 0 ], "tab" );
+		strictEqual( ui.tab, anchor[ 0 ], "tab" );
 		strictEqual( ui.panel, panel[ 0 ], "panel" );
 		equal( $( ui.panel ).find( "p" ).length, 1, "panel html" );
 		state( element, 0, 0, 1, 0, 0 );
@@ -247,12 +248,13 @@ asyncTest( "load", function() {
 	function tabsload1() {
 		// .option()
 		element.one( "tabsload", function( event, ui ) {
-			tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
+			tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
+			anchor = tab.find( ".ui-tabs-anchor" );
 			panelId = tab.attr( "aria-controls" );
 			panel = $( "#" + panelId );
 
 			ok( !( "originalEvent" in event ), "originalEvent" );
-			strictEqual( ui.tab, tab[ 0 ], "tab" );
+			strictEqual( ui.tab, anchor[ 0 ], "tab" );
 			strictEqual( ui.panel, panel[ 0 ], "panel" );
 			equal( $( ui.panel ).find( "p" ).length, 1, "panel html" );
 			state( element, 0, 0, 0, 1, 0 );
@@ -264,18 +266,19 @@ asyncTest( "load", function() {
 	function tabsload2() {
 		// click, change panel content
 		element.one( "tabsload", function( event, ui ) {
-			tab = element.find( ".ui-tabs-nav a" ).eq( 4 );
+			tab = element.find( ".ui-tabs-nav li" ).eq( 4 );
+			anchor = tab.find( ".ui-tabs-anchor" );
 			panelId = tab.attr( "aria-controls" );
 			panel = $( "#" + panelId );
 
 			equal( event.originalEvent.type, "click", "originalEvent" );
-			strictEqual( ui.tab, tab[ 0 ], "tab" );
+			strictEqual( ui.tab, anchor[ 0 ], "tab" );
 			strictEqual( ui.panel, panel[ 0 ], "panel" );
 			equal( $( ui.panel ).find( "p" ).length, 1, "panel html" );
 			state( element, 0, 0, 0, 0, 1 );
 			start();
 		});
-		element.find( ".ui-tabs-nav a" ).eq( 4 ).click();
+		element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click();
 	}
 });
 
@@ -285,7 +288,7 @@ test( "enable", function() {
 	var element = $( "#tabs1" ).tabs({
 		disabled: [ 0, 1 ],
 		enable: function( event, ui ) {
-			equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" );
+			equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" );
 			equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" );
 			equal( ui.index, 1, "ui.index" );
 		}
@@ -300,7 +303,7 @@ test( "disable", function() {
 
 	var element = $( "#tabs1" ).tabs({
 		disable: function( event, ui ) {
-			equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" );
+			equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" );
 			equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" );
 			equal( ui.index, 1, "ui.index" );
 		}
@@ -318,13 +321,13 @@ test( "show", function() {
 			active: false,
 			collapsible: true
 		}),
-		tabs = element.find( ".ui-tabs-nav a" ),
+		anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ),
 		panels = element.find( ".ui-tabs-panel" );
 
 	// from collapsed
 	element.one( "tabsshow", function( event, ui ) {
 		ok( !( "originalEvent" in event ), "originalEvent" );
-		strictEqual( ui.tab, tabs[ 0 ], "ui.tab" );
+		strictEqual( ui.tab, anchors[ 0 ], "ui.tab" );
 		strictEqual( ui.panel, panels[ 0 ], "ui.panel" );
 		equal( ui.index, 0, "ui.index" );
 		state( element, 1, 0, 0 );
@@ -335,12 +338,12 @@ test( "show", function() {
 	// switching tabs
 	element.one( "tabsshow", function( event, ui ) {
 		equal( event.originalEvent.type, "click", "originalEvent" );
-		strictEqual( ui.tab, tabs[ 1 ], "ui.tab" );
+		strictEqual( ui.tab, anchors[ 1 ], "ui.tab" );
 		strictEqual( ui.panel, panels[ 1 ], "ui.panel" );
 		equal( ui.index, 1, "ui.index" );
 		state( element, 0, 1, 0 );
 	});
-	tabs.eq( 1 ).click();
+	anchors.eq( 1 ).click();
 	state( element, 0, 1, 0 );
 
 	// collapsing
@@ -358,13 +361,13 @@ test( "select", function() {
 			active: false,
 			collapsible: true
 		}),
-		tabs = element.find( ".ui-tabs-nav a" ),
+		anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ),
 		panels = element.find( ".ui-tabs-panel" );
 
 	// from collapsed
 	element.one( "tabsselect", function( event, ui ) {
 		ok( !( "originalEvent" in event ), "originalEvent" );
-		strictEqual( ui.tab, tabs[ 0 ], "ui.tab" );
+		strictEqual( ui.tab, anchors[ 0 ], "ui.tab" );
 		strictEqual( ui.panel, panels[ 0 ], "ui.panel" );
 		equal( ui.index, 0, "ui.index" );
 		state( element, 0, 0, 0 );
@@ -375,12 +378,12 @@ test( "select", function() {
 	// switching tabs
 	element.one( "tabsselect", function( event, ui ) {
 		equal( event.originalEvent.type, "click", "originalEvent" );
-		strictEqual( ui.tab, tabs[ 1 ], "ui.tab" );
+		strictEqual( ui.tab, anchors[ 1 ], "ui.tab" );
 		strictEqual( ui.panel, panels[ 1 ], "ui.panel" );
 		equal( ui.index, 1, "ui.index" );
 		state( element, 1, 0, 0 );
 	});
-	tabs.eq( 1 ).click();
+	anchors.eq( 1 ).click();
 	state( element, 0, 1, 0 );
 
 	// collapsing
@@ -414,11 +417,11 @@ test( "add", function() {
 	element.tabs( "add", "#new", "New" );
 	state( element, 1, 0, 0, 0 );
 	tab = element.find( ".ui-tabs-nav li" ).last();
-	anchor = tab.find( "a" );
+	anchor = tab.find( ".ui-tabs-anchor" );
 	equal( tab.text(), "New", "label" );
 	equal( stripLeadingSlash( anchor[0].pathname ), stripLeadingSlash( location.pathname ), "href pathname" );
 	equal( anchor[0].hash, "#new", "href hash" );
-	equal( anchor.attr( "aria-controls" ), "new", "aria-controls" );
+	equal( tab.attr( "aria-controls" ), "new", "aria-controls" );
 	ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
 	anchor.simulate( "mouseover" );
 	ok( tab.hasClass( "ui-state-hover" ), "hovered" );
@@ -429,17 +432,17 @@ test( "add", function() {
 	element.one( "tabsadd", function( event, ui ) {
 		equal( ui.index, 1, "ui.index" );
 		equal( $( ui.tab ).text(), "New Remote", "ui.tab" );
-		equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" );
+		equal( ui.panel.id, $( ui.tab ).closest( "li" ).attr( "aria-controls" ), "ui.panel" );
 	});
 	element.tabs( "add", "data/test.html", "New Remote", 1 );
 	state( element, 0, 0, 0, 0, 1 );
 	tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
-	anchor = tab.find( "a" );
+	anchor = tab.find( ".ui-tabs-anchor" );
 	equal( tab.text(), "New Remote", "label" );
 	equal( stripLeadingSlash( stripLeadingSlash(
 		anchor[0].pathname.replace( stripLeadingSlash( location.pathname ).split( "/" ).slice( 0, -1 ).join( "/" ), "" )
 	) ), "data/test.html", "href" );
-	ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" );
+	ok( /^ui-tabs-\d+$/.test( tab.attr( "aria-controls" ) ), "aria controls" );
 	ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
 	anchor.simulate( "mouseover" );
 	ok( tab.hasClass( "ui-state-hover" ), "hovered" );
@@ -560,10 +563,10 @@ test( "url", function() {
 	expect( 2 );
 
 	var element = $( "#tabs2" ).tabs(),
-		tab = element.find( "a" ).eq( 3 );
+		anchor = element.find( ".ui-tabs-anchor" ).eq( 3 );
 
 	element.tabs( "url", 3, "data/test2.html" );
-	equal( tab.attr( "href" ), "data/test2.html", "href was updated" );
+	equal( anchor.attr( "href" ), "data/test2.html", "href was updated" );
 	element.one( "tabsbeforeload", function( event, ui ) {
 		equal( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" );
 		event.preventDefault();
@@ -582,7 +585,7 @@ asyncTest( "abort", function() {
 		});
 	});
 	// prevent IE from caching the request, so that it won't resolve before we call abort
-	element.find( ".ui-tabs-nav li:eq(2) a" ).attr( "href", function( href ) {
+	element.find( ".ui-tabs-nav li:eq(2) .ui-tabs-anchor" ).attr( "href", function( href ) {
 		return href + "?" + (+ new Date());
 	});
 	element.tabs( "option", "active", 2 );
diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js
index f33686581..57011bdad 100644
--- a/tests/unit/tabs/tabs_events.js
+++ b/tests/unit/tabs/tabs_events.js
@@ -8,7 +8,7 @@ test( "create", function() {
 	expect( 10 );
 
 	var element = $( "#tabs1" ),
-		tabs = element.find( "ul a" ),
+		tabs = element.find( "ul li" ),
 		panels = element.children( "div" );
 
 	element.tabs({
@@ -50,7 +50,8 @@ test( "beforeActivate", function() {
 			active: false,
 			collapsible: true
 		}),
-		tabs = element.find( ".ui-tabs-nav a" ),
+		tabs = element.find( ".ui-tabs-nav li" ),
+		anchors = tabs.find( ".ui-tabs-anchor" ),
 		panels = element.find( ".ui-tabs-panel" );
 
 	// from collapsed
@@ -80,7 +81,7 @@ test( "beforeActivate", function() {
 		strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
 		state( element, 1, 0, 0 );
 	});
-	tabs.eq( 1 ).click();
+	anchors.eq( 1 ).click();
 	state( element, 0, 1, 0 );
 
 	// collapsing
@@ -120,7 +121,8 @@ test( "activate", function() {
 			active: false,
 			collapsible: true
 		}),
-		tabs = element.find( ".ui-tabs-nav a" ),
+		tabs = element.find( ".ui-tabs-nav li" ),
+		anchors = element.find( ".ui-tabs-anchor" ),
 		panels = element.find( ".ui-tabs-panel" );
 
 	// from collapsed
@@ -150,7 +152,7 @@ test( "activate", function() {
 		strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
 		state( element, 0, 1, 0 );
 	});
-	tabs.eq( 1 ).click();
+	anchors.eq( 1 ).click();
 	state( element, 0, 1, 0 );
 
 	// collapsing
@@ -186,7 +188,7 @@ test( "beforeLoad", function() {
 
 	// init
 	element.one( "tabsbeforeload", function( event, ui ) {
-		tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
+		tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
 		panelId = tab.attr( "aria-controls" );
 		panel = $( "#" + panelId );
 
@@ -208,7 +210,7 @@ test( "beforeLoad", function() {
 
 	// .option()
 	element.one( "tabsbeforeload", function( event, ui ) {
-		tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
+		tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
 		panelId = tab.attr( "aria-controls" );
 		panel = $( "#" + panelId );
 
@@ -230,7 +232,7 @@ test( "beforeLoad", function() {
 
 	// click, change panel content
 	element.one( "tabsbeforeload", function( event, ui ) {
-		tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
+		tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
 		panelId = tab.attr( "aria-controls" );
 		panel = $( "#" + panelId );
 
@@ -245,7 +247,7 @@ test( "beforeLoad", function() {
 		event.preventDefault();
 		state( element, 0, 0, 1, 0, 0 );
 	});
-	element.find( ".ui-tabs-nav a" ).eq( 3 ).click();
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).click();
 	state( element, 0, 0, 0, 1, 0 );
 	// .toLowerCase() is needed to convert <P> to <p> in old IEs
 	equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" );
@@ -260,7 +262,7 @@ if ( $.uiBackCompat === false ) {
 
 		// init
 		element.one( "tabsload", function( event, ui ) {
-			tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
+			tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
 			panelId = tab.attr( "aria-controls" );
 			panel = $( "#" + panelId );
 
@@ -278,7 +280,7 @@ if ( $.uiBackCompat === false ) {
 		function tabsload1() {
 			// .option()
 			element.one( "tabsload", function( event, ui ) {
-				tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
+				tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
 				panelId = tab.attr( "aria-controls" );
 				panel = $( "#" + panelId );
 
@@ -297,7 +299,7 @@ if ( $.uiBackCompat === false ) {
 		function tabsload2() {
 			// click, change panel content
 			element.one( "tabsload", function( event, ui ) {
-				tab = element.find( ".ui-tabs-nav a" ).eq( 4 );
+				tab = element.find( ".ui-tabs-nav li" ).eq( 4 );
 				panelId = tab.attr( "aria-controls" );
 				panel = $( "#" + panelId );
 
@@ -310,7 +312,7 @@ if ( $.uiBackCompat === false ) {
 				state( element, 0, 0, 0, 0, 1 );
 				start();
 			});
-			element.find( ".ui-tabs-nav a" ).eq( 4 ).click();
+			element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click();
 		}
 	});
 }
diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js
index 0837995e6..ed3e73745 100644
--- a/tests/unit/tabs/tabs_methods.js
+++ b/tests/unit/tabs/tabs_methods.js
@@ -97,7 +97,7 @@ test( "refresh", function() {
 	element.tabs( "refresh" );
 	state( element, 1, 0, 0, 0 );
 	disabled( element, [ 1 ] );
-	equal( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1,
+	equal( element.find( "#" + $( "#newTab" ).attr( "aria-controls" ) ).length, 1,
 		"panel added for remote tab" );
 
 	// remove all tabs
@@ -156,7 +156,7 @@ asyncTest( "load", function() {
 	// load content of inactive tab
 	// useful for preloading content with custom caching
 	element.one( "tabsbeforeload", function( event, ui ) {
-		var tab = element.find( ".ui-tabs-nav a" ).eq( 3 ),
+		var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 			panelId = tab.attr( "aria-controls" ),
 			panel = $( "#" + panelId );
 
@@ -171,13 +171,17 @@ asyncTest( "load", function() {
 		// TODO: remove wrapping in 2.0
 		var uiTab = $( ui.tab ),
 			uiPanel = $( ui.panel ),
-			tab = element.find( ".ui-tabs-nav a" ).eq( 3 ),
+			tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 			panelId = tab.attr( "aria-controls" ),
 			panel = $( "#" + panelId );
 
 		ok( !( "originalEvent" in event ), "originalEvent" );
 		equal( uiTab.length, 1, "tab length" );
-		strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" );
+		if ( $.uiBackCompat === false ) {
+			strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" );
+		} else {
+			strictEqual( uiTab[ 0 ], tab.find( ".ui-tabs-anchor" )[ 0 ], "tab" );
+		}
 		equal( uiPanel.length, 1, "panel length" );
 		strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" );
 		equal( uiPanel.find( "p" ).length, 1, "panel html" );
@@ -203,7 +207,7 @@ asyncTest( "load", function() {
 	function tabsload2() {
 		// reload content of active tab
 		element.one( "tabsbeforeload", function( event, ui ) {
-			var tab = element.find( ".ui-tabs-nav a" ).eq( 3 ),
+			var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 				panelId = tab.attr( "aria-controls" ),
 				panel = $( "#" + panelId );
 
@@ -218,13 +222,17 @@ asyncTest( "load", function() {
 			// TODO: remove wrapping in 2.0
 			var uiTab = $( ui.tab ),
 				uiPanel = $( ui.panel ),
-				tab = element.find( ".ui-tabs-nav a" ).eq( 3 ),
+				tab = element.find( ".ui-tabs-nav li" ).eq( 3 ),
 				panelId = tab.attr( "aria-controls" ),
 				panel = $( "#" + panelId );
 
 			ok( !( "originalEvent" in event ), "originalEvent" );
 			equal( uiTab.length, 1, "tab length" );
-			strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" );
+			if ( $.uiBackCompat === false ) {
+				strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" );
+			} else {
+				strictEqual( uiTab[ 0 ], tab.find( ".ui-tabs-anchor" )[ 0 ], "tab" );
+			}
 			equal( uiPanel.length, 1, "panel length" );
 			strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" );
 			state( element, 0, 0, 0, 1, 0 );
diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js
index ae9e7bdc6..df6827c57 100644
--- a/tests/unit/tabs/tabs_options.js
+++ b/tests/unit/tabs/tabs_options.js
@@ -57,7 +57,7 @@ test( "{ active: Number }", function() {
 	equal( element.tabs( "option", "active" ), 0 );
 	state( element, 1, 0, 0 );
 
-	element.find( ".ui-tabs-nav a" ).eq( 1 ).click();
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click();
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 
@@ -110,7 +110,7 @@ test( "{ collapsible: false }", function() {
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 
-	element.find( ".ui-state-active a" ).eq( 1 ).click();
+	element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click();
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 });
@@ -131,7 +131,7 @@ test( "{ collapsible: true }", function() {
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 
-	element.find( ".ui-state-active a" ).click();
+	element.find( ".ui-state-active .ui-tabs-anchor" ).click();
 	equal( element.tabs( "option", "active" ), false );
 	state( element, 0, 0, 0 );
 });
@@ -173,7 +173,7 @@ test( "{ event: null }", function() {
 	state( element, 0, 1, 0 );
 
 	// ensure default click handler isn't bound
-	element.find( ".ui-tabs-nav a" ).eq( 2 ).click();
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).click();
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 });
@@ -186,27 +186,27 @@ test( "{ event: custom }", function() {
 	});
 	state( element, 1, 0, 0 );
 
-	element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" );
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 
 	// ensure default click handler isn't bound
-	element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "click" );
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" );
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 
-	element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "custom2" );
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "custom2" );
 	equal( element.tabs( "option", "active" ), 2 );
 	state( element, 0, 0, 1 );
 
 	element.tabs( "option", "event", "custom3" );
 
 	// ensure old event handlers are unbound
-	element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" );
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
 	equal( element.tabs( "option", "active" ), 2 );
 	state( element, 0, 0, 1 );
 
-	element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom3" );
+	element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" );
 	equal( element.tabs( "option", "active" ), 1 );
 	state( element, 0, 1, 0 );
 });
diff --git a/tests/unit/tabs/tabs_test_helpers.js b/tests/unit/tabs/tabs_test_helpers.js
index 9f592c074..508043943 100644
--- a/tests/unit/tabs/tabs_test_helpers.js
+++ b/tests/unit/tabs/tabs_test_helpers.js
@@ -43,7 +43,7 @@ TestHelpers.tabs = {
 			actual = tabs.find( ".ui-tabs-nav li" ).map(function() {
 				var tab = $( this ),
 					panel = $( $.ui.tabs.prototype._sanitizeSelector(
-						"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
+						"#" + tab.attr( "aria-controls" ) ) ),
 					tabIsActive = tab.hasClass( "ui-state-active" ),
 					panelIsActive = panel.css( "display" ) !== "none";