aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--demos/menu/default.html44
-rw-r--r--tests/unit/menu/menu.html321
-rw-r--r--tests/unit/menu/menu_events.js16
-rw-r--r--tests/unit/menu/menu_methods.js4
-rw-r--r--tests/unit/menu/menu_options.js27
-rw-r--r--tests/unit/menu/menu_test_helpers.js2
-rw-r--r--themes/base/jquery.ui.menu.css21
-rw-r--r--ui/jquery.ui.menu.js70
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>&ndash;</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" );
},