diff options
-rw-r--r-- | demos/menu/default.html | 44 | ||||
-rw-r--r-- | tests/unit/menu/menu.html | 321 | ||||
-rw-r--r-- | tests/unit/menu/menu_events.js | 16 | ||||
-rw-r--r-- | tests/unit/menu/menu_methods.js | 4 | ||||
-rw-r--r-- | tests/unit/menu/menu_options.js | 27 | ||||
-rw-r--r-- | tests/unit/menu/menu_test_helpers.js | 2 | ||||
-rw-r--r-- | themes/base/jquery.ui.menu.css | 21 | ||||
-rw-r--r-- | ui/jquery.ui.menu.js | 70 |
8 files changed, 240 insertions, 265 deletions
diff --git a/demos/menu/default.html b/demos/menu/default.html index d44b18b35..5fc0971d9 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -22,42 +22,38 @@ <body> <ul id="menu"> - <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li> - <a href="#">Delphi</a> + <li class="ui-state-disabled">Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Delphi <ul> - <li class="ui-state-disabled"><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li class="ui-state-disabled">Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> - <li> - <a href="#">Salzburg</a> + <li>Saarland</li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> - <li class="ui-state-disabled"><a href="#">Amesville</a></li> + <li class="ui-state-disabled">Amesville</li> </ul> <div class="demo-description"> diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index ed376232e..7de175b3c 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -48,220 +48,211 @@ <div id="qunit-fixture"> <ul class="foo" id="menu1"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a id="testID1" class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li id="testID1" class="foo">Addyston</li> + <li class="foo">Adelphi</li> </ul> <ul id="menu2"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#"><span class="ui-icon ui-icon-print"></span>Addyston</a></li> - <li> - <a href="#">Delphi</a> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo"><span class="ui-icon ui-icon-print"></span>Addyston</li> + <li>Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Ada</li> + <li class="foo">Saarland</li> + <li class="foo">Salzburg</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li> - <a href="#">Salzburg</a> + <li class="foo">Saarland</li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Ada</li> + <li class="foo">Saarland</li> + <li class="foo">Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> + <li class="foo">Ada</li> <li> - </li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> + <li class="foo">Saarland</li> <li></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Salzburg</li> <li>–</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Perch</a></li> + <li class="foo">Perch</li> </ul> </li> </ul> <ul class="foo" id="menu3"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> </ul> <ul class="foo" id="menu4"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> + <li class="foo">Aberdeen</li> <li class="foo"> - <a class="foo" href="#">Ada</a> + Ada <ul class="foo"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> </ul> <div id="menu5"> - <blockquote><a href="#">Aberdeen</a></blockquote> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Adamsville</a></blockquote> - <blockquote><a href="#">Addyston</a></blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Aberdeen</blockquote> + <blockquote>Ada</blockquote> + <blockquote>Adamsville</blockquote> + <blockquote>Addyston</blockquote> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote> - <a href="#">Salzburg</a> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg <div> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a id="testID2" href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote id="testID2">Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Perch</a></blockquote> + <blockquote>Perch</blockquote> </div> </blockquote> </div> <ul id="menu6"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo ui-state-disabled"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="ui-state-disabled"> - <a id="testID3" href="#">Delphi</a> + <li class="foo">Aberdeen</li> + <li class="foo ui-state-disabled">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li id="testID3" class="ui-state-disabled">Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Ada</li> + <li class="foo">Saarland</li> + <li class="foo">Salzburg</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> + <li class="foo">Saarland</li> </ul> </div> diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 405300c46..12bd5b703 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() { expect( 1 ); var element = $( "#menu1" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); @@ -177,7 +177,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); @@ -243,7 +243,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); @@ -341,7 +341,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers and items without anchors" ); + equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); @@ -363,7 +363,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus" log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index()); + log( $( event.target ).find( ".ui-state-focus" ).index()); } }); @@ -438,7 +438,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index()); + log( $( event.target ).find( ".ui-state-focus" ).index()); } }); @@ -533,7 +533,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index()); + log( $( event.target ).find( ".ui-state-focus" ).index()); } }); @@ -581,7 +581,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function() expect( 2 ); var element = $( "#menu2" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js index 51d772972..5a633998d 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/menu_methods.js @@ -73,11 +73,11 @@ test( "refresh icons (see #9377)", function() { expect( 3 ); var element = $( "#menu1" ).menu(); ok( !element.hasClass( "ui-menu-icons") ); - element.find( "li:first a" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); + element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); element.menu( "refresh" ); ok( element.hasClass( "ui-menu-icons" ) ); - element.find( "li:first a" ).html( "Save" ); + element.find( "li:first" ).html( "Save" ); element.menu( "refresh" ); ok( !element.hasClass( "ui-menu-icons" ) ); }); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js index 27cea67a4..527cc4784 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -66,15 +66,14 @@ test( "{ icons: { submenu: 'custom' } }", function() { test( "{ role: 'menu' } ", function() { var element = $( "#menu1" ).menu(), items = element.find( "li" ); - expect( 2 + 5 * items.length ); + expect( 2 + 4 * items.length ); equal( element.attr( "role" ), "menu" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "presentation", "menu item ("+ item + ") role" ); - equal( $( "a", this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); - ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" ); - equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" ); + equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); + ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); + equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); @@ -83,15 +82,14 @@ test( "{ role: 'listbox' } ", function() { role: "listbox" }), items = element.find( "li" ); - expect( 2 + 5 * items.length ); + expect( 2 + 4 * items.length ); equal( element.attr( "role" ), "listbox" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "presentation", "menu item ("+ item + ") role" ); - equal( $( "a", this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); - ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" ); - equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" ); + equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); + ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); + equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); @@ -100,15 +98,14 @@ test( "{ role: null }", function() { role: null }), items = element.find( "li" ); - expect( 2 + 5 * items.length ); + expect( 2 + 4 * items.length ); strictEqual( element.attr( "role" ), undefined ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "presentation", "menu item ("+ item + ") role" ); - equal( $( "a", this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); - ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" ); - equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" ); + equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); + ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); + equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); diff --git a/tests/unit/menu/menu_test_helpers.js b/tests/unit/menu/menu_test_helpers.js index b6c09ad7a..77737c390 100644 --- a/tests/unit/menu/menu_test_helpers.js +++ b/tests/unit/menu/menu_test_helpers.js @@ -24,7 +24,7 @@ TestHelpers.menu = { click: function( menu, item ) { lastItem = item; - menu.children( ":eq(" + item + ")" ).find( "a:first" ).trigger( "click" ); + menu.children( ":eq(" + item + ")" ).trigger( "click" ); } }; diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css index 8a61d1b69..cc390cec4 100644 --- a/themes/base/jquery.ui.menu.css +++ b/themes/base/jquery.ui.menu.css @@ -21,8 +21,11 @@ } .ui-menu .ui-menu-item { margin: 0; - padding: 0; - width: 100%; + display: block; + padding: 2px .4em; + line-height: 1.5; + min-height: 0; /* support: IE7 */ + font-weight: normal; /* support: IE10, see #8844 */ list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); } @@ -33,16 +36,8 @@ line-height: 0; border-width: 1px 0 0 0; } -.ui-menu .ui-menu-item a { - text-decoration: none; - display: block; - padding: 2px .4em; - line-height: 1.5; - min-height: 0; /* support: IE7 */ - font-weight: normal; -} -.ui-menu .ui-menu-item a.ui-state-focus, -.ui-menu .ui-menu-item a.ui-state-active { +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { font-weight: normal; margin: -1px; } @@ -60,7 +55,7 @@ .ui-menu-icons { position: relative; } -.ui-menu-icons .ui-menu-item a { +.ui-menu-icons .ui-menu-item { position: relative; padding-left: 2em; } diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 272ab7bf4..0acba14bc 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -66,14 +66,14 @@ $.widget( "ui.menu", { this._on({ // Prevent focus from sticking to links inside menu after clicking // them (focus should always stay on UL during navigation). - "mousedown .ui-menu-item > a": function( event ) { + "mousedown .ui-menu-item": function( event ) { event.preventDefault(); }, - "click .ui-state-disabled > a": function( event ) { + "click .ui-state-disabled": function( event ) { event.preventDefault(); }, - "click .ui-menu-item:has(a)": function( event ) { - var target = $( event.target ).closest( ".ui-menu-item" ); + "click .ui-menu-item": function( event ) { + var target = $( event.target ); if ( !this.mouseHandled && target.not( ".ui-state-disabled" ).length ) { this.select( event ); @@ -102,7 +102,7 @@ $.widget( "ui.menu", { var target = $( event.currentTarget ); // Remove ui-state-active class from siblings of the newly focused menu item // to avoid a jump caused by adjacent elements both having a class with a border - target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); + target.siblings( ".ui-state-active" ).removeClass( "ui-state-active" ); this.focus( event, target ); }, mouseleave: "collapseAll", @@ -161,18 +161,17 @@ $.widget( "ui.menu", { .removeClass( "ui-menu-item" ) .removeAttr( "role" ) .removeAttr( "aria-disabled" ) - .children( "a" ) - .removeUniqueId() - .removeClass( "ui-corner-all ui-state-hover" ) - .removeAttr( "tabIndex" ) - .removeAttr( "role" ) - .removeAttr( "aria-haspopup" ) - .children().each( function() { - var elem = $( this ); - if ( elem.data( "ui-menu-submenu-carat" ) ) { - elem.remove(); - } - }); + .removeUniqueId() + .removeClass( "ui-corner-all ui-state-hover" ) + .removeAttr( "tabIndex" ) + .removeAttr( "role" ) + .removeAttr( "aria-haspopup" ) + .children().each( function() { + var elem = $( this ); + if ( elem.data( "ui-menu-submenu-carat" ) ) { + elem.remove(); + } + }); // Destroy menu dividers this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" ); @@ -236,7 +235,7 @@ $.widget( "ui.menu", { regex = new RegExp( "^" + escape( character ), "i" ); match = this.activeMenu.children( ".ui-menu-item" ).filter(function() { - return regex.test( $( this ).children( "a" ).text() ); + return regex.test( $( this ).text() ); }); match = skip && match.index( this.active.next() ) !== -1 ? this.active.nextAll( ".ui-menu-item" ) : @@ -248,7 +247,7 @@ $.widget( "ui.menu", { character = String.fromCharCode( event.keyCode ); regex = new RegExp( "^" + escape( character ), "i" ); match = this.activeMenu.children( ".ui-menu-item" ).filter(function() { - return regex.test( $( this ).children( "a" ).text() ); + return regex.test( $( this ).text() ); }); } @@ -274,7 +273,7 @@ $.widget( "ui.menu", { _activate: function( event ) { if ( !this.active.is( ".ui-state-disabled" ) ) { - if ( this.active.children( "a[aria-haspopup='true']" ).length ) { + if ( this.active.is( "[aria-haspopup='true']" ) ) { this.expand( event ); } else { this.select( event ); @@ -300,7 +299,7 @@ $.widget( "ui.menu", { }) .each(function() { var menu = $( this ), - item = menu.prev( "a" ), + item = menu.parent(), submenuCarat = $( "<span>" ) .addClass( "ui-menu-icon ui-icon " + icon ) .data( "ui-menu-submenu-carat", true ); @@ -313,18 +312,6 @@ $.widget( "ui.menu", { menus = submenus.add( this.element ); - // Don't refresh list items that are already adapted - menus.children( ":not(.ui-menu-item):has(a)" ) - .addClass( "ui-menu-item" ) - .attr( "role", "presentation" ) - .children( "a" ) - .uniqueId() - .addClass( "ui-corner-all" ) - .attr({ - tabIndex: -1, - role: this._itemRole() - }); - // Initialize unlinked menu-items containing spaces and/or dashes only as dividers menus.children( ":not(.ui-menu-item)" ).each(function() { var item = $( this ); @@ -334,6 +321,16 @@ $.widget( "ui.menu", { } }); + // Don't refresh list items that are already adapted + menus.children( ":not(.ui-menu-item,.ui-menu-divider)" ) + .addClass( "ui-menu-item" ) + .uniqueId() + .addClass( "ui-corner-all" ) + .attr({ + tabIndex: -1, + role: this._itemRole() + }); + // Add aria-disabled attribute to any disabled menu item menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" ); @@ -371,7 +368,7 @@ $.widget( "ui.menu", { this._scrollIntoView( item ); this.active = item.first(); - focused = this.active.children( "a" ).addClass( "ui-state-focus" ); + focused = this.active.addClass( "ui-state-focus" ); // Only update aria-activedescendant if there's a role // otherwise we assume focus is managed elsewhere if ( this.options.role ) { @@ -382,7 +379,6 @@ $.widget( "ui.menu", { this.active .parent() .closest( ".ui-menu-item" ) - .children( "a:first" ) .addClass( "ui-state-active" ); if ( event && event.type === "keydown" ) { @@ -429,7 +425,7 @@ $.widget( "ui.menu", { return; } - this.active.children( "a" ).removeClass( "ui-state-focus" ); + this.active.removeClass( "ui-state-focus" ); this.active = null; this._trigger( "blur", event, { item: this.active } ); @@ -499,7 +495,7 @@ $.widget( "ui.menu", { .attr( "aria-hidden", "true" ) .attr( "aria-expanded", "false" ) .end() - .find( "a.ui-state-active" ) + .find( ".ui-state-active" ) .removeClass( "ui-state-active" ); }, |