Skip to content

Commit 5c9d9f9

Browse files
scottgonzalezscottgonzalez
committed
Tabs: Pass the list item instead of the anchor in events; move aria-controls from the anchor to the list item.
1 parent 098dd14 commit 5c9d9f9

File tree

9 files changed

+136
-107
lines changed

9 files changed

+136
-107
lines changed

‎tests/unit/tabs/tabs.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h2 id="qunit-userAgent"></h2>
5757
<li><a href="#colon:test"><span>1</span></a></li>
5858
<li><a href="#inline-style"><span>2</span></a></li>
5959
<li><a href="data/test.html#test"><span>3</span></a></li>
60-
<li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li>
60+
<li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li>
6161
<li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li>
6262
</ul>
6363
<div id="colon:test"></div>

‎tests/unit/tabs/tabs_core.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,15 @@ test( "disconnected from DOM", function() {
4747
test( "aria-controls", function() {
4848
expect( 7 );
4949
var element = $( "#tabs1" ).tabs(),
50-
tabs = element.find( ".ui-tabs-nav a" );
50+
tabs = element.find( ".ui-tabs-nav li" );
5151
tabs.each(function() {
52-
var tab = $( this );
53-
equal( tab.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) );
52+
var tab = $( this ),
53+
anchor = tab.find( ".ui-tabs-anchor" );
54+
equal( anchor.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) );
5455
});
5556

5657
element = $( "#tabs2" ).tabs();
57-
tabs = element.find( ".ui-tabs-nav a" );
58+
tabs = element.find( ".ui-tabs-nav li" );
5859
equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" );
5960
equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" );
6061
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
8687
element.tabs({
8788
beforeLoad: function( event, ui ) {
8889
event.preventDefault();
89-
ok( false, 'should not be an ajax tab');
90+
ok( false, "should not be an ajax tab" );
9091
}
9192
});
9293

93-
equal( element.find( ".ui-tabs-nav a" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" );
94+
equal( element.find( ".ui-tabs-nav li" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" );
9495
state( element, 1 );
9596
});
9697

‎tests/unit/tabs/tabs_deprecated.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h2 id="qunit-userAgent"></h2>
5656
<li><a href="#colon:test"><span>1</span></a></li>
5757
<li><a href="#inline-style"><span>2</span></a></li>
5858
<li><a href="data/test.html#test"><span>3</span></a></li>
59-
<li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li>
59+
<li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li>
6060
<li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li>
6161
</ul>
6262
<div id="colon:test"></div>

‎tests/unit/tabs/tabs_deprecated.js

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,11 @@ test( "tabTemplate + panelTemplate", function() {
107107
});
108108
element.tabs( "add", "#new", "New" );
109109
tab = element.find( ".ui-tabs-nav li" ).last();
110-
anchor = tab.find( "a" );
110+
anchor = tab.find( ".ui-tabs-anchor" );
111111
equal( tab.text(), "New", "label" );
112112
ok( tab.hasClass( "customTab" ), "tab custom class" );
113113
equal( anchor.attr( "href" ), "http://example.com/#new", "href" );
114-
equal( anchor.attr( "aria-controls" ), "new", "aria-controls" );
114+
equal( tab.attr( "aria-controls" ), "new", "aria-controls" );
115115
ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" );
116116
});
117117

@@ -210,7 +210,7 @@ test( "selected", function() {
210210
equal( element.tabs( "option", "selected" ), 0 );
211211
state( element, 1, 0, 0 );
212212

213-
element.find( ".ui-tabs-nav a" ).eq( 1 ).click();
213+
element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click();
214214
equal( element.tabs( "option", "selected" ), 1 );
215215
state( element, 0, 1, 0 );
216216

@@ -226,17 +226,18 @@ module( "tabs (deprecated): events" );
226226
asyncTest( "load", function() {
227227
expect( 15 );
228228

229-
var tab, panelId, panel,
229+
var tab, anchor, panelId, panel,
230230
element = $( "#tabs2" );
231231

232232
// init
233233
element.one( "tabsload", function( event, ui ) {
234-
tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
234+
tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
235+
anchor = tab.find( ".ui-tabs-anchor" );
235236
panelId = tab.attr( "aria-controls" );
236237
panel = $( "#" + panelId );
237238

238239
ok( !( "originalEvent" in event ), "originalEvent" );
239-
strictEqual( ui.tab, tab[ 0 ], "tab" );
240+
strictEqual( ui.tab, anchor[ 0 ], "tab" );
240241
strictEqual( ui.panel, panel[ 0 ], "panel" );
241242
equal( $( ui.panel ).find( "p" ).length, 1, "panel html" );
242243
state( element, 0, 0, 1, 0, 0 );
@@ -247,12 +248,13 @@ asyncTest( "load", function() {
247248
function tabsload1() {
248249
// .option()
249250
element.one( "tabsload", function( event, ui ) {
250-
tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
251+
tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
252+
anchor = tab.find( ".ui-tabs-anchor" );
251253
panelId = tab.attr( "aria-controls" );
252254
panel = $( "#" + panelId );
253255

254256
ok( !( "originalEvent" in event ), "originalEvent" );
255-
strictEqual( ui.tab, tab[ 0 ], "tab" );
257+
strictEqual( ui.tab, anchor[ 0 ], "tab" );
256258
strictEqual( ui.panel, panel[ 0 ], "panel" );
257259
equal( $( ui.panel ).find( "p" ).length, 1, "panel html" );
258260
state( element, 0, 0, 0, 1, 0 );
@@ -264,18 +266,19 @@ asyncTest( "load", function() {
264266
function tabsload2() {
265267
// click, change panel content
266268
element.one( "tabsload", function( event, ui ) {
267-
tab = element.find( ".ui-tabs-nav a" ).eq( 4 );
269+
tab = element.find( ".ui-tabs-nav li" ).eq( 4 );
270+
anchor = tab.find( ".ui-tabs-anchor" );
268271
panelId = tab.attr( "aria-controls" );
269272
panel = $( "#" + panelId );
270273

271274
equal( event.originalEvent.type, "click", "originalEvent" );
272-
strictEqual( ui.tab, tab[ 0 ], "tab" );
275+
strictEqual( ui.tab, anchor[ 0 ], "tab" );
273276
strictEqual( ui.panel, panel[ 0 ], "panel" );
274277
equal( $( ui.panel ).find( "p" ).length, 1, "panel html" );
275278
state( element, 0, 0, 0, 0, 1 );
276279
start();
277280
});
278-
element.find( ".ui-tabs-nav a" ).eq( 4 ).click();
281+
element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click();
279282
}
280283
});
281284

@@ -285,7 +288,7 @@ test( "enable", function() {
285288
var element = $( "#tabs1" ).tabs({
286289
disabled: [ 0, 1 ],
287290
enable: function( event, ui ) {
288-
equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" );
291+
equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" );
289292
equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" );
290293
equal( ui.index, 1, "ui.index" );
291294
}
@@ -300,7 +303,7 @@ test( "disable", function() {
300303

301304
var element = $( "#tabs1" ).tabs({
302305
disable: function( event, ui ) {
303-
equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" );
306+
equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" );
304307
equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" );
305308
equal( ui.index, 1, "ui.index" );
306309
}
@@ -318,13 +321,13 @@ test( "show", function() {
318321
active: false,
319322
collapsible: true
320323
}),
321-
tabs = element.find( ".ui-tabs-nav a" ),
324+
anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ),
322325
panels = element.find( ".ui-tabs-panel" );
323326

324327
// from collapsed
325328
element.one( "tabsshow", function( event, ui ) {
326329
ok( !( "originalEvent" in event ), "originalEvent" );
327-
strictEqual( ui.tab, tabs[ 0 ], "ui.tab" );
330+
strictEqual( ui.tab, anchors[ 0 ], "ui.tab" );
328331
strictEqual( ui.panel, panels[ 0 ], "ui.panel" );
329332
equal( ui.index, 0, "ui.index" );
330333
state( element, 1, 0, 0 );
@@ -335,12 +338,12 @@ test( "show", function() {
335338
// switching tabs
336339
element.one( "tabsshow", function( event, ui ) {
337340
equal( event.originalEvent.type, "click", "originalEvent" );
338-
strictEqual( ui.tab, tabs[ 1 ], "ui.tab" );
341+
strictEqual( ui.tab, anchors[ 1 ], "ui.tab" );
339342
strictEqual( ui.panel, panels[ 1 ], "ui.panel" );
340343
equal( ui.index, 1, "ui.index" );
341344
state( element, 0, 1, 0 );
342345
});
343-
tabs.eq( 1 ).click();
346+
anchors.eq( 1 ).click();
344347
state( element, 0, 1, 0 );
345348

346349
// collapsing
@@ -358,13 +361,13 @@ test( "select", function() {
358361
active: false,
359362
collapsible: true
360363
}),
361-
tabs = element.find( ".ui-tabs-nav a" ),
364+
anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ),
362365
panels = element.find( ".ui-tabs-panel" );
363366

364367
// from collapsed
365368
element.one( "tabsselect", function( event, ui ) {
366369
ok( !( "originalEvent" in event ), "originalEvent" );
367-
strictEqual( ui.tab, tabs[ 0 ], "ui.tab" );
370+
strictEqual( ui.tab, anchors[ 0 ], "ui.tab" );
368371
strictEqual( ui.panel, panels[ 0 ], "ui.panel" );
369372
equal( ui.index, 0, "ui.index" );
370373
state( element, 0, 0, 0 );
@@ -375,12 +378,12 @@ test( "select", function() {
375378
// switching tabs
376379
element.one( "tabsselect", function( event, ui ) {
377380
equal( event.originalEvent.type, "click", "originalEvent" );
378-
strictEqual( ui.tab, tabs[ 1 ], "ui.tab" );
381+
strictEqual( ui.tab, anchors[ 1 ], "ui.tab" );
379382
strictEqual( ui.panel, panels[ 1 ], "ui.panel" );
380383
equal( ui.index, 1, "ui.index" );
381384
state( element, 1, 0, 0 );
382385
});
383-
tabs.eq( 1 ).click();
386+
anchors.eq( 1 ).click();
384387
state( element, 0, 1, 0 );
385388

386389
// collapsing
@@ -414,11 +417,11 @@ test( "add", function() {
414417
element.tabs( "add", "#new", "New" );
415418
state( element, 1, 0, 0, 0 );
416419
tab = element.find( ".ui-tabs-nav li" ).last();
417-
anchor = tab.find( "a" );
420+
anchor = tab.find( ".ui-tabs-anchor" );
418421
equal( tab.text(), "New", "label" );
419422
equal( stripLeadingSlash( anchor[0].pathname ), stripLeadingSlash( location.pathname ), "href pathname" );
420423
equal( anchor[0].hash, "#new", "href hash" );
421-
equal( anchor.attr( "aria-controls" ), "new", "aria-controls" );
424+
equal( tab.attr( "aria-controls" ), "new", "aria-controls" );
422425
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
423426
anchor.simulate( "mouseover" );
424427
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
@@ -429,17 +432,17 @@ test( "add", function() {
429432
element.one( "tabsadd", function( event, ui ) {
430433
equal( ui.index, 1, "ui.index" );
431434
equal( $( ui.tab ).text(), "New Remote", "ui.tab" );
432-
equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" );
435+
equal( ui.panel.id, $( ui.tab ).closest( "li" ).attr( "aria-controls" ), "ui.panel" );
433436
});
434437
element.tabs( "add", "data/test.html", "New Remote", 1 );
435438
state( element, 0, 0, 0, 0, 1 );
436439
tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
437-
anchor = tab.find( "a" );
440+
anchor = tab.find( ".ui-tabs-anchor" );
438441
equal( tab.text(), "New Remote", "label" );
439442
equal( stripLeadingSlash( stripLeadingSlash(
440443
anchor[0].pathname.replace( stripLeadingSlash( location.pathname ).split( "/" ).slice( 0, -1 ).join( "/" ), "" )
441444
) ), "data/test.html", "href" );
442-
ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" );
445+
ok( /^ui-tabs-\d+$/.test( tab.attr( "aria-controls" ) ), "aria controls" );
443446
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
444447
anchor.simulate( "mouseover" );
445448
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
@@ -560,10 +563,10 @@ test( "url", function() {
560563
expect( 2 );
561564

562565
var element = $( "#tabs2" ).tabs(),
563-
tab = element.find( "a" ).eq( 3 );
566+
anchor = element.find( ".ui-tabs-anchor" ).eq( 3 );
564567

565568
element.tabs( "url", 3, "data/test2.html" );
566-
equal( tab.attr( "href" ), "data/test2.html", "href was updated" );
569+
equal( anchor.attr( "href" ), "data/test2.html", "href was updated" );
567570
element.one( "tabsbeforeload", function( event, ui ) {
568571
equal( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" );
569572
event.preventDefault();
@@ -582,7 +585,7 @@ asyncTest( "abort", function() {
582585
});
583586
});
584587
// prevent IE from caching the request, so that it won't resolve before we call abort
585-
element.find( ".ui-tabs-nav li:eq(2) a" ).attr( "href", function( href ) {
588+
element.find( ".ui-tabs-nav li:eq(2) .ui-tabs-anchor" ).attr( "href", function( href ) {
586589
return href + "?" + (+ new Date());
587590
});
588591
element.tabs( "option", "active", 2 );

‎tests/unit/tabs/tabs_events.js

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ test( "create", function() {
88
expect( 10 );
99

1010
var element = $( "#tabs1" ),
11-
tabs = element.find( "ul a" ),
11+
tabs = element.find( "ul li" ),
1212
panels = element.children( "div" );
1313

1414
element.tabs({
@@ -50,7 +50,8 @@ test( "beforeActivate", function() {
5050
active: false,
5151
collapsible: true
5252
}),
53-
tabs = element.find( ".ui-tabs-nav a" ),
53+
tabs = element.find( ".ui-tabs-nav li" ),
54+
anchors = tabs.find( ".ui-tabs-anchor" ),
5455
panels = element.find( ".ui-tabs-panel" );
5556

5657
// from collapsed
@@ -80,7 +81,7 @@ test( "beforeActivate", function() {
8081
strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
8182
state( element, 1, 0, 0 );
8283
});
83-
tabs.eq( 1 ).click();
84+
anchors.eq( 1 ).click();
8485
state( element, 0, 1, 0 );
8586

8687
// collapsing
@@ -120,7 +121,8 @@ test( "activate", function() {
120121
active: false,
121122
collapsible: true
122123
}),
123-
tabs = element.find( ".ui-tabs-nav a" ),
124+
tabs = element.find( ".ui-tabs-nav li" ),
125+
anchors = element.find( ".ui-tabs-anchor" ),
124126
panels = element.find( ".ui-tabs-panel" );
125127

126128
// from collapsed
@@ -150,7 +152,7 @@ test( "activate", function() {
150152
strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" );
151153
state( element, 0, 1, 0 );
152154
});
153-
tabs.eq( 1 ).click();
155+
anchors.eq( 1 ).click();
154156
state( element, 0, 1, 0 );
155157

156158
// collapsing
@@ -186,7 +188,7 @@ test( "beforeLoad", function() {
186188

187189
// init
188190
element.one( "tabsbeforeload", function( event, ui ) {
189-
tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
191+
tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
190192
panelId = tab.attr( "aria-controls" );
191193
panel = $( "#" + panelId );
192194

@@ -208,7 +210,7 @@ test( "beforeLoad", function() {
208210

209211
// .option()
210212
element.one( "tabsbeforeload", function( event, ui ) {
211-
tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
213+
tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
212214
panelId = tab.attr( "aria-controls" );
213215
panel = $( "#" + panelId );
214216

@@ -230,7 +232,7 @@ test( "beforeLoad", function() {
230232

231233
// click, change panel content
232234
element.one( "tabsbeforeload", function( event, ui ) {
233-
tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
235+
tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
234236
panelId = tab.attr( "aria-controls" );
235237
panel = $( "#" + panelId );
236238

@@ -245,7 +247,7 @@ test( "beforeLoad", function() {
245247
event.preventDefault();
246248
state( element, 0, 0, 1, 0, 0 );
247249
});
248-
element.find( ".ui-tabs-nav a" ).eq( 3 ).click();
250+
element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).click();
249251
state( element, 0, 0, 0, 1, 0 );
250252
// .toLowerCase() is needed to convert <P> to <p> in old IEs
251253
equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" );
@@ -260,7 +262,7 @@ if ( $.uiBackCompat === false ) {
260262

261263
// init
262264
element.one( "tabsload", function( event, ui ) {
263-
tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
265+
tab = element.find( ".ui-tabs-nav li" ).eq( 2 );
264266
panelId = tab.attr( "aria-controls" );
265267
panel = $( "#" + panelId );
266268

@@ -278,7 +280,7 @@ if ( $.uiBackCompat === false ) {
278280
function tabsload1() {
279281
// .option()
280282
element.one( "tabsload", function( event, ui ) {
281-
tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
283+
tab = element.find( ".ui-tabs-nav li" ).eq( 3 );
282284
panelId = tab.attr( "aria-controls" );
283285
panel = $( "#" + panelId );
284286

@@ -297,7 +299,7 @@ if ( $.uiBackCompat === false ) {
297299
function tabsload2() {
298300
// click, change panel content
299301
element.one( "tabsload", function( event, ui ) {
300-
tab = element.find( ".ui-tabs-nav a" ).eq( 4 );
302+
tab = element.find( ".ui-tabs-nav li" ).eq( 4 );
301303
panelId = tab.attr( "aria-controls" );
302304
panel = $( "#" + panelId );
303305

@@ -310,7 +312,7 @@ if ( $.uiBackCompat === false ) {
310312
state( element, 0, 0, 0, 0, 1 );
311313
start();
312314
});
313-
element.find( ".ui-tabs-nav a" ).eq( 4 ).click();
315+
element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click();
314316
}
315317
});
316318
}

0 commit comments

Comments
 (0)