Tabs: Use `CSS.escape` for sanitizing selectors

The previous private `_sanitizeSelector` API was not correctly escaping
backslashes and is now removed. The native API should always be correct.

Closes gh-2307

2 files changed, 32 insertions, 2 deletions

diff --git a/tests/unit/tabs/core.js b/tests/unit/tabs/core.js
index ae670ff43..c2fd89048 100644
--- a/tests/unit/tabs/core.js
+++ b/tests/unit/tabs/core.js
@@ -84,6 +84,37 @@ QUnit.test( "non-tab list items", function( assert ) {
 		"first actual tab is active" );
 } );
 
+QUnit.test( "ID escaping backslashes", function( assert ) {
+	assert.expect( 5 );
+
+	location.hash = "#fragment\b-2";
+
+	var element = $( "#tabs1" )
+		.find( "a[href='#fragment-2']" )
+			.attr( "href", "#fragment\b-2" )
+		.end()
+		.find( "#fragment-2" )
+			.attr( "id", "fragment\b-2" )
+		.end()
+		.tabs();
+	var tabs = element.find( ".ui-tabs-nav li" );
+	var anchors = tabs.find( ".ui-tabs-anchor" );
+	var panels = element.find( ".ui-tabs-panel" );
+
+	assert.strictEqual( element.tabs( "option", "active" ), 1,
+		"should set the active option" );
+
+	assert.strictEqual( anchors.length, 3, "should decorate all anchors" );
+	assert.strictEqual( panels.length, 3, "should decorate all panels" );
+
+	assert.strictEqual( panels.eq( 1 ).attr( "aria-labelledby" ), anchors.eq( 1 ).attr( "id" ),
+		"panel 2 aria-labelledby equals anchor 2 id" );
+	assert.strictEqual( tabs.eq( 1 ).attr( "aria-controls" ), "fragment\b-2",
+		"tab 2 aria-controls" );
+
+	location.hash = "";
+} );
+
 QUnit.test( "aria-controls", function( assert ) {
 	assert.expect( 7 );
 	var element = $( "#tabs1" ).tabs(),
diff --git a/tests/unit/tabs/helper.js b/tests/unit/tabs/helper.js
index b3fb1d6fd..4043d86d8 100644
--- a/tests/unit/tabs/helper.js
+++ b/tests/unit/tabs/helper.js
@@ -58,8 +58,7 @@ return $.extend( helper, {
 		var expected = $.makeArray( arguments ).slice( 2 ),
 			actual = tabs.find( ".ui-tabs-nav li" ).map( function() {
 				var tab = $( this ),
-					panel = $( $.ui.tabs.prototype._sanitizeSelector(
-						"#" + tab.attr( "aria-controls" ) ) ),
+					panel = $( "#" + CSS.escape( tab.attr( "aria-controls" ) ) ),
 					tabIsActive = tab.hasClass( "ui-state-active" ),
 					panelIsActive = panel.css( "display" ) !== "none";