Skip to content
Permalink
Browse files

Accordion: Style updates

Ref #14246
Ref gh-1588
  • Loading branch information
arschmitz committed Aug 21, 2015
1 parent 8029cc9 commit 009850abbfb78e2334aaf9265abf5a7705a2abf0
@@ -22,11 +22,11 @@ common.testWidget( "accordion", {
"header": "ui-icon-triangle-1-e"
},

// callbacks
// Callbacks
activate: null,
beforeActivate: null,
create: null
}
});
} );

} );
@@ -32,33 +32,33 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ
deepEqual( element.find( ".ui-accordion-header" ).next().get(),
element.find( ".ui-accordion-content" ).get(),
"content panels come immediately after headers" );
});
});
} );
} );

test( "handle click on header-descendant", function() {
expect( 1 );
var element = $( "#navigation" ).accordion();
$( "#navigation h2:eq(1) a" ).trigger( "click" );
state( element, 0, 1, 0 );
});
} );

test( "accessibility", function () {
test( "accessibility", function() {
expect( 61 );
var element = $( "#list1" ).accordion({
var element = $( "#list1" ).accordion( {
active: 1,
collapsible: true
}),
} ),
headers = element.find( ".ui-accordion-header" );

equal( element.attr( "role" ), "tablist", "element role" );
headers.each(function( i ) {
headers.each( function( i ) {
var header = headers.eq( i ),
panel = header.next();
equal( header.attr( "role" ), "tab", "header " + i + " role" );
equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" );
equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" );
equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" );
});
} );

equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
@@ -115,7 +115,7 @@ test( "accessibility", function () {
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );

});
} );

asyncTest( "keyboard support", function( assert ) {
expect( 13 );
@@ -180,7 +180,7 @@ asyncTest( "keyboard support", function( assert ) {
}

function step9() {
equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" );
equal( element.accordion( "option", "active" ), 2, "ENTER activates panel" );
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
setTimeout( step10 );
}
@@ -202,6 +202,6 @@ asyncTest( "keyboard support", function( assert ) {
assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "CTRL+UP moves focus to header" );
start();
}
});
} );

} );
@@ -16,44 +16,44 @@ test( "create", function() {
headers = element.children( "h3" ),
contents = headers.next();

element.accordion({
element.accordion( {
create: function( event, ui ) {
equal( ui.header.length, 1, "header length" );
strictEqual( ui.header[ 0 ], headers[ 0 ], "header" );
equal( ui.panel.length, 1, "panel length" );
strictEqual( ui.panel[ 0 ], contents[ 0 ], "panel" );
}
});
} );
element.accordion( "destroy" );

element.accordion({
element.accordion( {
active: 2,
create: function( event, ui ) {
equal( ui.header.length, 1, "header length" );
strictEqual( ui.header[ 0 ], headers[ 2 ], "header" );
equal( ui.panel.length, 1, "panel length" );
strictEqual( ui.panel[ 0 ], contents[ 2 ], "panel" );
}
});
} );
element.accordion( "destroy" );

element.accordion({
element.accordion( {
active: false,
collapsible: true,
create: function( event, ui ) {
equal( ui.header.length, 0, "header length" );
equal( ui.panel.length, 0, "panel length" );
}
});
} );
element.accordion( "destroy" );
});
} );

test( "beforeActivate", function() {
expect( 38 );
var element = $( "#list1" ).accordion({
var element = $( "#list1" ).accordion( {
active: false,
collapsible: true
}),
} ),
headers = element.find( ".ui-accordion-header" ),
content = element.find( ".ui-accordion-content" );

@@ -66,7 +66,7 @@ test( "beforeActivate", function() {
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
state( element, 0, 0, 0 );
});
} );
element.accordion( "option", "active", 0 );
state( element, 1, 0, 0 );

@@ -81,7 +81,7 @@ test( "beforeActivate", function() {
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
state( element, 1, 0, 0 );
});
} );
headers.eq( 1 ).trigger( "click" );
state( element, 0, 1, 0 );

@@ -94,7 +94,7 @@ test( "beforeActivate", function() {
equal( ui.newHeader.length, 0 );
equal( ui.newPanel.length, 0 );
state( element, 0, 1, 0 );
});
} );
element.accordion( "option", "active", false );
state( element, 0, 0, 0 );

@@ -108,17 +108,17 @@ test( "beforeActivate", function() {
strictEqual( ui.newPanel[ 0 ], content[ 2 ] );
event.preventDefault();
state( element, 0, 0, 0 );
});
} );
element.accordion( "option", "active", 2 );
state( element, 0, 0, 0 );
});
} );

test( "activate", function() {
expect( 21 );
var element = $( "#list1" ).accordion({
var element = $( "#list1" ).accordion( {
active: false,
collapsible: true
}),
} ),
headers = element.find( ".ui-accordion-header" ),
content = element.find( ".ui-accordion-content" );

@@ -129,7 +129,7 @@ test( "activate", function() {
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 0 ] );
});
} );
element.accordion( "option", "active", 0 );

element.one( "accordionactivate", function( event, ui ) {
@@ -141,7 +141,7 @@ test( "activate", function() {
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equal( ui.newPanel.length, 1 );
strictEqual( ui.newPanel[ 0 ], content[ 1 ] );
});
} );
headers.eq( 1 ).trigger( "click" );

element.one( "accordionactivate", function( event, ui ) {
@@ -151,18 +151,18 @@ test( "activate", function() {
strictEqual( ui.oldPanel[ 0 ], content[ 1 ] );
equal( ui.newHeader.length, 0 );
equal( ui.newPanel.length, 0 );
});
} );
element.accordion( "option", "active", false );

// prevent activation
// Prevent activation
element.one( "accordionbeforeactivate", function( event ) {
ok( true );
event.preventDefault();
});
} );
element.one( "accordionactivate", function() {
ok( false );
});
} );
element.accordion( "option", "active", 1 );
});
} );

} );
@@ -6,9 +6,9 @@ define( [

return $.extend( helper, {
equalHeight: function( accordion, height ) {
accordion.find( ".ui-accordion-content" ).each(function() {
accordion.find( ".ui-accordion-content" ).each( function() {
equal( $( this ).outerHeight(), height );
});
} );
},

setupTeardown: function() {
@@ -25,10 +25,10 @@ return $.extend( helper, {

state: function( accordion ) {
var expected = $.makeArray( arguments ).slice( 1 ),
actual = accordion.find( ".ui-accordion-content" ).map(function() {
actual = accordion.find( ".ui-accordion-content" ).map( function() {
return $( this ).css( "display" ) === "none" ? 0 : 1;
}).get();
QUnit.push( QUnit.equiv(actual, expected), actual, expected );
} ).get();
QUnit.push( QUnit.equiv( actual, expected ), actual, expected );
}
} );

@@ -14,8 +14,8 @@ test( "destroy", function( assert ) {
expect( 1 );
assert.domEqual( "#list1", function() {
$( "#list1" ).accordion().accordion( "destroy" );
});
});
} );
} );

test( "enable/disable", function( assert ) {
expect( 7 );
@@ -28,26 +28,27 @@ test( "enable/disable", function( assert ) {
equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" );
assert.hasClasses( element, "ui-accordion-disabled" );

// event does nothing
// Event does nothing
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
state( element, 1, 0, 0 );
// option still works

// Option still works
element.accordion( "option", "active", 1 );
state( element, 0, 1, 0 );
element.accordion( "enable" );
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1 );
});
} );

test( "refresh", function() {
expect( 19 );
var element = $( "#navigation" )
.parent()
.height( 300 )
.end()
.accordion({
.accordion( {
heightStyle: "fill"
});
} );
equalHeight( element, 255 );

element.parent().height( 500 );
@@ -58,79 +59,79 @@ test( "refresh", function() {
element.accordion();
state( element, 1, 0, 0 );

// disable panel via markup
// Disable panel via markup
element.find( "h3.bar" ).eq( 1 ).addClass( "ui-state-disabled" );
element.accordion( "refresh" );
state( element, 1, 0, 0 );

// don't add multiple icons
// Don't add multiple icons
element.accordion( "refresh" );
equal( element.find( ".ui-accordion-header-icon" ).length, 3 );

// add a panel
// Add a panel
element
.append("<h3 class='bar' id='new_1'>new 1</h3>")
.append("<div class='foo' id='new_1_panel'>new 1</div>");
.append( "<h3 class='bar' id='new_1'>new 1</h3>" )
.append( "<div class='foo' id='new_1_panel'>new 1</div>" );
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );

// remove all tabs
// Remove all tabs
element.find( "h3.bar, div.foo" ).remove();
element.accordion( "refresh" );
state( element );
equal( element.accordion( "option", "active" ), false, "no active accordion panel" );

// add panels
// Add panels
element
.append("<h3 class='bar' id='new_2'>new 2</h3>")
.append("<div class='foo' id='new_2_panel'>new 2</div>")
.append("<h3 class='bar' id='new_3'>new 3</h3>")
.append("<div class='foo' id='new_3_panel'>new 3</div>")
.append("<h3 class='bar' id='new_4'>new 4</h3>")
.append("<div class='foo' id='new_4_panel'>new 4</div>")
.append("<h3 class='bar' id='new_5'>new 5</h3>")
.append("<div class='foo' id='new_5_panel'>new 5</div>");
.append( "<h3 class='bar' id='new_2'>new 2</h3>" )
.append( "<div class='foo' id='new_2_panel'>new 2</div>" )
.append( "<h3 class='bar' id='new_3'>new 3</h3>" )
.append( "<div class='foo' id='new_3_panel'>new 3</div>" )
.append( "<h3 class='bar' id='new_4'>new 4</h3>" )
.append( "<div class='foo' id='new_4_panel'>new 4</div>" )
.append( "<h3 class='bar' id='new_5'>new 5</h3>" )
.append( "<div class='foo' id='new_5_panel'>new 5</div>" );
element.accordion( "refresh" );
state( element, 1, 0, 0, 0 );

// activate third tab
// Activate third tab
element.accordion( "option", "active", 2 );
state( element, 0, 0, 1, 0 );

// remove fourth panel, third panel should stay active
// Remove fourth panel, third panel should stay active
element.find( "h3.bar" ).eq( 3 ).remove();
element.find( "div.foo" ).eq( 3 ).remove();
element.accordion( "refresh" );
state( element, 0, 0, 1 );

// remove third (active) panel, second panel should become active
// Remove third (active) panel, second panel should become active
element.find( "h3.bar" ).eq( 2 ).remove();
element.find( "div.foo" ).eq( 2 ).remove();
element.accordion( "refresh" );
state( element, 0, 1 );

// remove first panel, previously active panel (now first) should stay active
// Remove first panel, previously active panel (now first) should stay active
element.find( "h3.bar" ).eq( 0 ).remove();
element.find( "div.foo" ).eq( 0 ).remove();
element.accordion( "refresh" );
state( element, 1 );

// collapse all panels
// Collapse all panels
element.accordion( "option", {
collapsible: true,
active: false
});
} );
state( element, 0 );
element.accordion( "refresh" );
state( element, 0 );
});
} );

test( "widget", function() {
expect( 2 );
var element = $( "#list1" ).accordion(),
widgetElement = element.accordion( "widget" );
equal( widgetElement.length, 1, "one element" );
strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" );
});
} );

} );

0 comments on commit 009850a

Please sign in to comment.
You can’t perform that action at this time.