third-party/jquery-ui-1.10.2/tests/unit/accordion/accordion_core.js

   1 (function( $ ) {
   2
   3 var setupTeardown = TestHelpers.accordion.setupTeardown,
   4         state = TestHelpers.accordion.state;
   5
   6 module( "accordion: core", setupTeardown() );
   7
   8 $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
   9         test( "markup structure: " + type, function() {
  10                 expect( 4 );
  11                 var element = $( selector ).accordion();
  12                 ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
  13                 equal( element.find( ".ui-accordion-header" ).length, 3,
  14                         ".ui-accordion-header elements exist, correct number" );
  15                 equal( element.find( ".ui-accordion-content" ).length, 3,
  16                         ".ui-accordion-content elements exist, correct number" );
  17                 deepEqual( element.find( ".ui-accordion-header" ).next().get(),
  18                         element.find( ".ui-accordion-content" ).get(),
  19                         "content panels come immediately after headers" );
  20         });
  21 });
  22
  23 test( "handle click on header-descendant", function() {
  24         expect( 1 );
  25         var element = $( "#navigation" ).accordion();
  26         $( "#navigation h2:eq(1) a" ).click();
  27         state( element, 0, 1, 0 );
  28 });
  29
  30 test( "accessibility", function () {
  31         expect( 37 );
  32         var element = $( "#list1" ).accordion({
  33                         active: 1
  34                 }),
  35                 headers = element.find( ".ui-accordion-header" );
  36
  37         equal( element.attr( "role" ), "tablist", "element role" );
  38         headers.each(function( i ) {
  39                 var header = headers.eq( i ),
  40                         panel = header.next();
  41                 equal( header.attr( "role" ), "tab", "header " + i + " role" );
  42                 equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" );
  43                 equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" );
  44                 equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" );
  45         });
  46
  47         equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
  48         equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
  49         equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "true", "active tabpanel has aria-expanded=true" );
  50         equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" );
  51         equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
  52         equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
  53         equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
  54         equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
  55         equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
  56         equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
  57         equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
  58         equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
  59
  60         element.accordion( "option", "active", 0 );
  61         equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
  62         equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
  63         equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "true", "active tabpanel has aria-expanded=true" );
  64         equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" );
  65         equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
  66         equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
  67         equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
  68         equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
  69         equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
  70         equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
  71         equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
  72         equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
  73 });
  74
  75 asyncTest( "keyboard support", function() {
  76         expect( 13 );
  77         var element = $( "#list1" ).accordion(),
  78                 headers = element.find( ".ui-accordion-header" ),
  79                 anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ),
  80                 keyCode = $.ui.keyCode;
  81         equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" );
  82         headers.eq( 0 ).simulate( "focus" );
  83         setTimeout(function() {
  84                 ok( headers.eq( 0 ).is( ".ui-state-focus" ), "first header has focus" );
  85                 headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
  86                 ok( headers.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next header" );
  87                 headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
  88                 ok( headers.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next header" );
  89                 headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
  90                 ok( headers.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first header" );
  91
  92                 headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
  93                 ok( headers.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last header" );
  94                 headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
  95                 ok( headers.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous header" );
  96
  97                 headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
  98                 ok( headers.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first header" );
  99                 headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
 100                 ok( headers.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last header" );
 101
 102                 headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
 103                 equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" );
 104                 headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
 105                 equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" );
 106
 107                 anchor.simulate( "focus" );
 108                 setTimeout(function() {
 109                         ok( !headers.eq( 1 ).is( ".ui-state-focus" ), "header loses focus when focusing inside the panel" );
 110                         anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
 111                         ok( headers.eq( 1 ).is( ".ui-state-focus" ), "CTRL+UP moves focus to header" );
 112                         start();
 113                 }, 1 );
 114         }, 1 );
 115 });
 116
 117 }( jQuery ) );