diff options
| -rw-r--r-- | demos/menu/categories.html | 16 | ||||
| -rw-r--r-- | demos/menu/default.html | 40 | ||||
| -rw-r--r-- | demos/menu/icons.html | 38 | ||||
| -rw-r--r-- | tests/unit/menu/menu.html | 397 | ||||
| -rw-r--r-- | tests/unit/menu/menu_common.js | 2 | ||||
| -rw-r--r-- | tests/unit/menu/menu_core.js | 7 | ||||
| -rw-r--r-- | tests/unit/menu/menu_events.js | 24 | ||||
| -rw-r--r-- | tests/unit/menu/menu_methods.js | 5 | ||||
| -rw-r--r-- | tests/unit/menu/menu_options.js | 18 | ||||
| -rw-r--r-- | tests/unit/menu/menu_test_helpers.js | 4 | ||||
| -rw-r--r-- | tests/visual/menu/menu.html | 357 | ||||
| -rw-r--r-- | themes/base/menu.css | 8 | ||||
| -rw-r--r-- | ui/menu.js | 62 |
13 files changed, 543 insertions, 435 deletions
diff --git a/demos/menu/categories.html b/demos/menu/categories.html index c0e55d05a..213e97a4e 100644 --- a/demos/menu/categories.html +++ b/demos/menu/categories.html @@ -25,14 +25,14 @@ <body> <ul id="menu"> - <li class="ui-widget-header">Category 1</li> - <li>Option 1</li> - <li>Option 2</li> - <li>Option 3</li> - <li class="ui-widget-header">Category 2</li> - <li>Option 4</li> - <li>Option 5</li> - <li>Option 6</li> + <li class="ui-widget-header"><div>Category 1</div></li> + <li><div>Option 1</div></li> + <li><div>Option 2</div></li> + <li><div>Option 3</div></li> + <li class="ui-widget-header"><div>Category 2</div></li> + <li><div>Option 4</div></li> + <li><div>Option 5</div></li> + <li><div>Option 6</div></li> </ul> <div class="demo-description"> diff --git a/demos/menu/default.html b/demos/menu/default.html index 6da41e016..6c23c4e22 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -22,38 +22,38 @@ <body> <ul id="menu"> - <li class="ui-state-disabled">Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> - <li>Delphi + <li class="ui-state-disabled"><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> + <li><div>Delphi</div> <ul> - <li class="ui-state-disabled">Ada</li> - <li>Saarland</li> - <li>Salzburg an der schönen Donau</li> + <li class="ui-state-disabled"><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg an der schönen Donau</div></li> </ul> </li> - <li>Saarland</li> - <li>Salzburg + <li><div>Saarland</div></li> + <li><div>Salzburg</div> <ul> - <li>Delphi + <li><div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Delphi + <li><div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Perch</li> + <li><div>Perch</div></li> </ul> </li> - <li class="ui-state-disabled">Amesville</li> + <li class="ui-state-disabled"><div>Amesville</div></li> </ul> <div class="demo-description"> diff --git a/demos/menu/icons.html b/demos/menu/icons.html index bd1de828e..1afdba5e1 100644 --- a/demos/menu/icons.html +++ b/demos/menu/icons.html @@ -22,20 +22,38 @@ <body> <ul id="menu"> - <li><span class="ui-icon ui-icon-disk"></span>Save</li> - <li><span class="ui-icon ui-icon-zoomin"></span>Zoom In</li> - <li><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</li> - <li class="ui-state-disabled"><span class="ui-icon ui-icon-print"></span>Print...</li> <li> - Playback + <div><span class="ui-icon ui-icon-disk"></span>Save</div> + </li> + <li> + <div><span class="ui-icon ui-icon-zoomin"></span>Zoom In</div> + </li> + <li> + <div><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</div> + </li> + <li class="ui-state-disabled"> + <div><span class="ui-icon ui-icon-print"></span>Print...</div> + </li> + <li> + <div>Playback</div> <ul> - <li><span class="ui-icon ui-icon-seek-start"></span>Prev</li> - <li><span class="ui-icon ui-icon-stop"></span>Stop</li> - <li><span class="ui-icon ui-icon-play"></span>Play</li> - <li><span class="ui-icon ui-icon-seek-end"></span>Next</li> + <li> + <div><span class="ui-icon ui-icon-seek-start"></span>Prev</div> + </li> + <li> + <div><span class="ui-icon ui-icon-stop"></span>Stop</div> + </li> + <li> + <div><span class="ui-icon ui-icon-play"></span>Play</div> + </li> + <li> + <div><span class="ui-icon ui-icon-seek-end"></span>Next</div> + </li> </ul> </li> - <li>Learn more about this menu</li> + <li> + <div>Learn more about this menu</div> + </li> </ul> <div class="demo-description"> diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index cb3df5b00..56115c334 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -33,7 +33,7 @@ font-size: 15px; line-height: 15px; } - .ui-menu .ui-menu-item { + .ui-menu .ui-menu-item-wrapper { padding: 0; } #menu3 { @@ -52,263 +52,284 @@ <div id="qunit-fixture"> <ul class="foo" id="menu1"> - <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> + <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div id="testID1">Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> </ul> <ul id="menu2"> - <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 + <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"> + <div><span class="ui-icon ui-icon-print"></span>Addyston</div> + </li> + <li> + <div>Delphi</div> <ul> - <li class="foo">Ada</li> - <li class="foo">Saarland</li> - <li class="foo">Salzburg</li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Saarland</div></li> + <li class="foo"><div>Salzburg</div></li> </ul> </li> - <li class="foo"> Saarland</li> - <li>Salzburg + <li class="foo"><div> Saarland</div></li> + <li> + <div>Salzburg</div> <ul> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li class="foo">Ada</li> - <li class="foo">Saarland</li> - <li class="foo">Salzburg</li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Saarland</div></li> + <li class="foo"><div>Salzburg</div></li> </ul> </li> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li class="foo">Ada</li> + <li class="foo"><div>Ada</div></li> <li> - </li> - <li class="foo">Saarland</li> + <li class="foo"><div>Saarland</div></li> <li></li> - <li class="foo">Salzburg</li> + <li class="foo"><div>Salzburg</div></li> <li>–</li> </ul> </li> - <li class="foo">Perch</li> + <li class="foo"><div>Perch</div></li> </ul> </li> </ul> <ul class="foo" id="menu3"> - <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> + <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> + <li class="foo"><div>Adena</div></li> + <li class="foo"><div>Adrian</div></li> + <li class="foo"><div>Akron</div></li> + <li class="foo"><div>Albany</div></li> + <li class="foo"><div>Alexandria</div></li> + <li class="foo"><div>Alger</div></li> + <li class="foo"><div>Alledonia</div></li> + <li class="foo"><div>Alliance</div></li> + <li class="foo"><div>Alpha</div></li> + <li class="foo"><div>Alvada</div></li> + <li class="foo"><div>Alvordton</div></li> + <li class="foo"><div>Amanda</div></li> + <li class="foo"><div>Amelia</div></li> + <li class="foo"><div>Amesville</div></li> + <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> + <li class="foo"><div>Adena</div></li> + <li class="foo"><div>Adrian</div></li> + <li class="foo"><div>Akron</div></li> + <li class="foo"><div>Albany</div></li> + <li class="foo"><div>Alexandria</div></li> + <li class="foo"><div>Alger</div></li> + <li class="foo"><div>Alledonia</div></li> + <li class="foo"><div>Alliance</div></li> + <li class="foo"><div>Alpha</div></li> + <li class="foo"><div>Alvada</div></li> + <li class="foo"><div>Alvordton</div></li> + <li class="foo"><div>Amanda</div></li> + <li class="foo"><div>Amelia</div></li> + <li class="foo"><div>Amesville</div></li> </ul> <ul class="foo" id="menu4"> - <li class="foo">Aberdeen</li> + <li class="foo"><div>Aberdeen</div></li> <li class="foo"> - Ada + <div>Ada</div> <ul class="foo"> - <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"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> + <li class="foo"><div>Adena</div></li> + <li class="foo"><div>Adrian</div></li> + <li class="foo"><div>Akron</div></li> + <li class="foo"><div>Albany</div></li> + <li class="foo"><div>Alexandria</div></li> + <li class="foo"><div>Alger</div></li> + <li class="foo"><div>Alledonia</div></li> + <li class="foo"><div>Alliance</div></li> + <li class="foo"><div>Alpha</div></li> + <li class="foo"><div>Alvada</div></li> + <li class="foo"><div>Alvordton</div></li> + <li class="foo"><div>Amanda</div></li> + <li class="foo"><div>Amelia</div></li> + <li class="foo"><div>Amesville</div></li> + <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> + <li class="foo"><div>Adena</div></li> + <li class="foo"><div>Adrian</div></li> + <li class="foo"><div>Akron</div></li> + <li class="foo"><div>Albany</div></li> </ul> </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> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> + <li class="foo"><div>Adena</div></li> + <li class="foo"><div>Adrian</div></li> + <li class="foo"><div>Akron</div></li> + <li class="foo"><div>Albany</div></li> + <li class="foo"><div>Alexandria</div></li> + <li class="foo"><div>Alger</div></li> + <li class="foo"><div>Alledonia</div></li> + <li class="foo"><div>Alliance</div></li> + <li class="foo"><div>Alpha</div></li> + <li class="foo"><div>Alvada</div></li> + <li class="foo"><div>Alvordton</div></li> + <li class="foo"><div>Amanda</div></li> + <li class="foo"><div>Amelia</div></li> + <li class="foo"><div>Amesville</div></li> + <li class="foo"><div>Aberdeen</div></li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li class="foo"><div>Adelphi</div></li> + <li class="foo"><div>Adena</div></li> + <li class="foo"><div>Adrian</div></li> + <li class="foo"><div>Akron</div></li> + <li class="foo"><div>Albany</div></li> + <li class="foo"><div>Alexandria</div></li> + <li class="foo"><div>Alger</div></li> + <li class="foo"><div>Alledonia</div></li> + <li class="foo"><div>Alliance</div></li> + <li class="foo"><div>Alpha</div></li> + <li class="foo"><div>Alvada</div></li> + <li class="foo"><div>Alvordton</div></li> + <li class="foo"><div>Amanda</div></li> + <li class="foo"><div>Amelia</div></li> + <li class="foo"><div>Amesville</div></li> </ul> <div id="menu5"> - <blockquote>Aberdeen</blockquote> - <blockquote>Ada</blockquote> - <blockquote>Adamsville</blockquote> - <blockquote>Addyston</blockquote> - <blockquote>Delphi - <div> - <blockquote>Ada</blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg</blockquote> + <blockquote><div>Aberdeen</div></blockquote> + <blockquote><div>Ada</div></blockquote> + <blockquote><div>Adamsville</div></blockquote> + <blockquote><div>Addyston</div></blockquote> + <blockquote> + <div>Delphi</div> + <div class="menu"> + <blockquote><div>Ada</div></blockquote> + <blockquote><div>Saarland</div></blockquote> + <blockquote><div>Salzburg</div></blockquote> </div> </blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg - <div> - <blockquote>Delphi - <div> - <blockquote>Ada</blockquote> + <blockquote><div>Saarland</div></blockquote> + <blockquote> + <div>Salzburg</div> + <div class="menu"> + <blockquote> + <div>Delphi</div> + <div class="menu"> + <blockquote><div>Ada</div></blockquote> <blockquote id="testID2">Saarland</blockquote> - <blockquote>Salzburg</blockquote> + <blockquote><div>Salzburg</div></blockquote> </div> </blockquote> - <blockquote>Delphi - <div> - <blockquote>Ada</blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg</blockquote> + <blockquote> + <div>Delphi</div> + <div class="menu"> + <blockquote><div>Ada</div></blockquote> + <blockquote><div>Saarland</div></blockquote> + <blockquote><div>Salzburg</div></blockquote> </div> </blockquote> - <blockquote>Perch</blockquote> + <blockquote><div>Perch</div></blockquote> </div> </blockquote> </div> <ul id="menu6"> - <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 + <li class="foo"><div>Aberdeen</div></li> + <li class="foo ui-state-disabled"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> + <li id="testID3" class="ui-state-disabled"> + <div>Delphi</div> <ul> - <li class="foo">Ada</li> - <li class="foo">Saarland</li> - <li class="foo">Salzburg</li> + <li class="foo"><div>Ada</div></li> + <li class="foo"><div>Saarland</div></li> + <li class="foo"><div>Salzburg</div></li> </ul> </li> - <li class="foo">Saarland</li> + <li class="foo"><div>Saarland</div></li> </ul> <ul id="menu7"> - <li class="ui-menu-group"><strong>Group 1</strong></li> - <li>Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> + <li class="ui-menu-group"> + <div><strong>Group 1</strong></div> + </li> + <li><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> <li></li> - <li class="ui-menu-group"><strong>Group 2</strong></li> - <li>Delphi + <li class="ui-menu-group"> + <div><strong>Group 2</strong></div> + </li> + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Saarland</li> + <li><div>Saarland</div></li> <li>---</li> - <li class="ui-menu-group"><strong>Group 3</strong></li> - <li>Salzburg + <li class="ui-menu-group"> + <div><strong>Group 3</strong></div> + </li> + <li> + <div>Salzburg</div> <ul> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li>Ada</li> + <li><div>Ada</div></li> <li> - </li> - <li>Saarland</li> + <li><div>Saarland</div></li> <li>—</li> - <li>Salzburg</li> + <li><div>Salzburg</div></li> <li>–</li> </ul> </li> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Perch</li> + <li><div>Perch</div></li> </ul> </li> - <li>Amesville</li> + <li><div>Amesville</div></li> </ul> <ul id="menu8"> - <li class="foo">Aberdeen</li> - <li class="foo ui-state-disabled">Ada</li> - <li class="foo">Adamsville</li> - <li class="foo">Addyston</li> + <li class="foo"><div>Aberdeen</div></li> + <li class="foo ui-state-disabled"><div>Ada</div></li> + <li class="foo"><div>Adamsville</div></li> + <li class="foo"><div>Addyston</div></li> <li class="foo">-</li> - <li class="foo">-Saarland</li> + <li class="foo"><div>-Saarland</div></li> </ul> </div> diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index 099dd091e..2404ebe02 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", { items: "> *", menus: "ul", position: { - my: "left-1 top", + my: "left top", at: "right top" }, role: "menu", diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index df039c9e4..f02f97fca 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -48,12 +48,13 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function() { expect( 1 ); var element = $( "#menu1" ).menu(), - firstChild = element.children().eq( 0 ); + firstChild = element.children().eq( 0 ), + wrapper = firstChild.children( ".ui-menu-item-wrapper" ); element.menu( "focus", null, firstChild ); - firstChild.addClass( "ui-state-active" ); + wrapper.addClass( "ui-state-active" ); setTimeout( function() { - ok( firstChild.is( ".ui-state-active" ), "ui-state-active improperly removed" ); + ok( wrapper.is( ".ui-state-active" ), "ui-state-active improperly removed" ); start(); }, 500 ); }); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 02e63bf63..f4d494f47 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -32,7 +32,7 @@ test( "handle click on custom item menu", function() { select: function() { log(); }, - menus: "div" + menus: ".menu" }); log( "click", true ); click( element, "1" ); @@ -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" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -142,12 +142,12 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() { asyncTest( "handle submenu auto collapse: mouseleave", function() { expect( 4 ); - var element = $( "#menu5" ).menu({ menus: "div" }), + var element = $( "#menu5" ).menu({ menus: ".menu" }), event = $.Event( "mouseenter" ); function menumouseleave1() { equal( element.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" ); - element.menu( "focus", event, element.find( ":nth-child(7)" ).find( "div" ).eq( 0 ).children().eq( 0 ) ); + element.menu( "focus", event, element.find( ":nth-child(7)" ).find( ".menu" ).eq( 0 ).children().eq( 0 ) ); setTimeout( menumouseleave2, 350 ); } function menumouseleave2() { @@ -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" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().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" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -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" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().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" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().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" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().index()); } }); @@ -585,7 +585,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -612,7 +612,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function() expect( 3 ); var element = $( "#menu2" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -635,7 +635,7 @@ asyncTest( "Keep focus on selected item (see #10644)", function() { expect( 1 ); var element = $( "#menu2" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js index 5a633998d..ef8279018 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/menu_methods.js @@ -73,11 +73,12 @@ test( "refresh icons (see #9377)", function() { expect( 3 ); var element = $( "#menu1" ).menu(); ok( !element.hasClass( "ui-menu-icons") ); - element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); + element.find( "li:first .ui-menu-item-wrapper" ) + .html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); element.menu( "refresh" ); ok( element.hasClass( "ui-menu-icons" ) ); - element.find( "li:first" ).html( "Save" ); + element.find( "li:first .ui-menu-item-wrapper" ).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 c76673345..438b02a32 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -71,8 +71,10 @@ test( "{ role: 'menu' } ", function() { 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" ), "menuitem", "menu item ("+ item + ") role" ); - equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), + "menuitem", "menu item ("+ item + ") role" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", + "tabindex for menu item ("+ item + ")" ); }); }); @@ -86,8 +88,10 @@ test( "{ role: 'listbox' } ", function() { 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" ), "option", "menu item ("+ item + ") role" ); - equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option", + "menu item ("+ item + ") role" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", + "tabindex for menu item ("+ item + ")" ); }); }); @@ -101,8 +105,10 @@ test( "{ role: null }", function() { 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" ), undefined, "menu item ("+ item + ") role" ); - equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), undefined, + "menu item ("+ item + ") role" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).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 77737c390..ea273c765 100644 --- a/tests/unit/menu/menu_test_helpers.js +++ b/tests/unit/menu/menu_test_helpers.js @@ -24,7 +24,9 @@ TestHelpers.menu = { click: function( menu, item ) { lastItem = item; - menu.children( ":eq(" + item + ")" ).trigger( "click" ); + menu.children( ":eq(" + item + ")" ) + .children( ".ui-menu-item-wrapper" ) + .trigger( "click" ); } }; diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 11e9df6e1..855748d3d 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -28,7 +28,7 @@ }); $( "#menu5" ).menu({ - menus: "div", + menus: ".menuElement", select: logger }); @@ -56,241 +56,288 @@ <h2>Default inline menu</h2> <ul id="menu1"> - <li>Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> - <li>Delphi</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> + <li><div>Delphi</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> <h2>Inline with disabled items and submenus</h2> <ul id="menu2"> - <li class="ui-state-disabled">Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> - <li>Delphi + <li class="ui-state-disabled"><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> + <li> + <div>Delphi</div> <ul> - <li class="ui-state-disabled">Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li class="ui-state-disabled"><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Saarland</li> - <li>Salzburg + <li><div>Saarland</div></li> + <li> + <div>Salzburg</div> <ul> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li class="ui-state-disabled">Perch</li> + <li class="ui-state-disabled"><div>Perch</div></li> </ul> </li> - <li class="ui-state-disabled">Amesville</li> + <li class="ui-state-disabled"><div>Amesville</div></li> </ul> <h2>Menu with icons</h2> <ul id="menu3"> - <li><span class="ui-icon ui-icon-print"></span>Aberdeen</li> - <li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li> - <li>Adamsville</li> - <li><span class="ui-icon ui-icon-wrench"></span>Addyston</li> - <li class="ui-state-disabled">Delphi + <li> + <div><span class="ui-icon ui-icon-print"></span>Aberdeen</div> + </li> + <li class="ui-state-disabled"> + <div><span class="ui-icon ui-icon-scissors"></span>Ada</div> + </li> + <li><div>Adamsville</div></li> + <li> + <div><span class="ui-icon ui-icon-wrench"></span>Addyston</div> + </li> + <li class="ui-state-disabled"> + <div>Delphi</div> <ul> - <li>Ada</li> - <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li> + <div><span class="ui-icon ui-icon-wrench"></span>Saarland</div> + </li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Saarland</li> <li> - <span class="ui-icon ui-icon-print"></span>Salzburg + <div>Saarland</div></li> + <li> + <div> + <span class="ui-icon ui-icon-print"></span>Salzburg + </div> <ul> <li> - <span class="ui-icon ui-icon-wrench"></span>Delphi + <div><span class="ui-icon ui-icon-wrench"></span>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li><span class="ui-icon ui-icon-wrench"></span>Ada</li> - <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li> - <li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li> + <li><div><span class="ui-icon ui-icon-wrench"></span>Ada</div></li> + <li><div><span class="ui-icon ui-icon-wrench"></span>Saarland</div></li> + <li><div><span class="ui-icon ui-icon-wrench"></span>Salzburg</div></li> </ul> </li> - <li>Perch</li> + <li><div>Perch</div></li> </ul> </li> </ul> <h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> <ul class="menu4"> - <li>Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> - <li>Adelphi</li> - <li>Adena</li> - <li>Adrian</li> - <li>Akron</li> - <li>Albany</li> - <li>Alexandria</li> - <li>Alger</li> - <li>Alledonia</li> - <li>Alliance</li> - <li>Alpha</li> - <li>Alvada</li> - <li>Alvordton</li> - <li>Amanda</li> - <li>Amelia</li> - <li>Amesville</li> - <li>Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> - <li>Adelphi</li> - <li>Adena</li> - <li>Adrian</li> - <li>Akron</li> - <li>Albany</li> - <li>Alexandria</li> - <li>Alger</li> - <li>Alledonia</li> - <li>Alliance</li> - <li>Alpha</li> - <li>Alvada</li> - <li>Alvordton</li> - <li>Amanda</li> - <li>Amelia</li> - <li>Amesville</li> + <li><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> + <li><div>Adelphi</div></li> + <li><div>Adena</div></li> + <li><div>Adrian</div></li> + <li><div>Akron</div></li> + <li><div>Albany</div></li> + <li><div>Alexandria</div></li> + <li><div>Alger</div></li> + <li><div>Alledonia</div></li> + <li><div>Alliance</div></li> + <li><div>Alpha</div></li> + <li><div>Alvada</div></li> + <li><div>Alvordton</div></li> + <li><div>Amanda</div></li> + <li><div>Amelia</div></li> + <li><div>Amesville</div></li> + <li><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> + <li><div>Adelphi</div></li> + <li><div>Adena</div></li> + <li><div>Adrian</div></li> + <li><div>Akron</div></li> + <li><div>Albany</div></li> + <li><div>Alexandria</div></li> + <li><div>Alger</div></li> + <li><div>Alledonia</div></li> + <li><div>Alliance</div></li> + <li><div>Alpha</div></li> + <li><div>Alvada</div></li> + <li><div>Alvordton</div></li> + <li><div>Amanda</div></li> + <li><div>Amelia</div></li> + <li><div>Amesville</div></li> </ul> <h2>Menu with custom markup</h2> -<div id="menu5"> - <blockquote>Aberdeen</blockquote> - <blockquote>Ada</blockquote> - <blockquote class="ui-state-disabled">Adamsville</blockquote> - <blockquote>Addyston</blockquote> - <blockquote>Delphi - <div> - <blockquote>Ada</blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg</blockquote> - </div> +<div id="menu5" class="menuElement"> + <blockquote><div>Aberdeen</div></blockquote> + <blockquote><div>Ada</div></blockquote> + <blockquote class="ui-state-disabled"><div>Adamsville</div></blockquote> + <blockquote><div>Addyston</div></blockquote> + <blockquote> + <div>Delphi</div> + <blockquote class="menuElement"> + <blockquote><div>Ada</div></blockquote> + <blockquote><div>Saarland</div></blockquote> + <blockquote><div>Salzburg</div></blockquote> + </blockquote> </blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg - <div> - <blockquote>Delphi - <div> - <blockquote>Ada</blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg</blockquote> - </div> + <blockquote><div>Saarland</div></blockquote> + <blockquote> + <div>Salzburg</div> + <blockquote class="menuElement"> + <blockquote> + <div>Delphi</div> + <blockquote class="menuElement"> + <blockquote><div>Ada</div></blockquote> + <blockquote><div>Saarland</div></blockquote> + <blockquote><div>Salzburg</div></blockquote> + </blockquote> </blockquote> - <blockquote>Delphi - <div> - <blockquote>Ada</blockquote> - <blockquote>Saarland</blockquote> - <blockquote>Salzburg</blockquote> - </div> + <blockquote> + <div>Delphi</div> + <blockquote class="menuElement"> + <blockquote><div>Ada</div></blockquote> + <blockquote><div>Saarland</div></blockquote> + <blockquote><div>Salzburg</div></blockquote> + </blockquote> </blockquote> - <blockquote>Perch</blockquote> - </div> + <blockquote><div>Perch</div></blockquote> + </blockquote> </blockquote> </div> <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2> <div class="menuElement" id="menu6"> <div class="address-item"> - <span class="address-header">John Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> + <div> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </div> </div> <div class="address-item"> - <span class="address-header">Jane Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> + <div> + <span class="address-header">Jane Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </div> </div> <div class="address-item ui-state-disabled"> - <span class="address-header">James Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> + <div> + <span class="address-header">James Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </div> </div> <div class="address-item"> - <span class="address-header">Jenny Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> + <div> + <span class="address-header">Jenny Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </div> </div> <div class="address-item"> - <span class="address-header">John Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> + <div> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> + </div> <div class="menuElement"> - <div>Ada</div> - <div>Saarland</div> - <div>Salzburg</div> + <div> + <div>Ada</div> + </div> + <div> + <div>Saarland</div> + </div> + <div> + <div>Salzburg</div> + </div> </div> </div> </div> <h2>Inline with dividers and group labels</h2> <ul id="menu7"> - <li class="ui-menu-group"><strong>Group 1</strong></li> - <li>Aberdeen</li> - <li>Ada</li> - <li>Adamsville</li> - <li>Addyston</li> + <li class="ui-menu-group"> + <div><strong>Group 1</strong></div> + </li> + <li><div>Aberdeen</div></li> + <li><div>Ada</div></li> + <li><div>Adamsville</div></li> + <li><div>Addyston</div></li> <li></li> - <li class="ui-menu-group"><strong>Group 2</strong></li> - <li>Delphi + <li class="ui-menu-group"> + <div><strong>Group 2</strong></div> + </li> + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Saarland</li> + <li><div>Saarland</div></li> <li>---</li> - <li class="ui-menu-group"><strong>Group 3</strong></li> - <li>Salzburg + <li class="ui-menu-group"> + <div><strong>Group 3</strong></div> + </li> + <li> + <div>Salzburg</div> <ul> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li> - </li> - <li>Saarland</li> + <li><div>Ada</div></li> + <li>-</li> + <li><div>Saarland</div></li> <li>—</li> - <li>Salzburg</li> + <li><div>Salzburg</div></li> <li>–</li> </ul> </li> - <li>Delphi + <li> + <div>Delphi</div> <ul> - <li>Ada</li> - <li>Saarland</li> - <li>Salzburg</li> + <li><div>Ada</div></li> + <li><div>Saarland</div></li> + <li><div>Salzburg</div></li> </ul> </li> - <li>Perch</li> + <li><div>Perch</div></li> </ul> </li> - <li>Amesville</li> + <li><div>Amesville</div></li> </ul> <div style="position: absolute; top: 1em; right: 1em;"> diff --git a/themes/base/menu.css b/themes/base/menu.css index 58c561349..dae8288a2 100644 --- a/themes/base/menu.css +++ b/themes/base/menu.css @@ -19,13 +19,15 @@ position: absolute; } .ui-menu .ui-menu-item { - position: relative; margin: 0; - padding: 3px 1em 3px .4em; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } +.ui-menu .ui-menu-item-wrapper { + position: relative; + padding: 3px 1em 3px .4em; +} .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; @@ -42,7 +44,7 @@ .ui-menu-icons { position: relative; } -.ui-menu-icons .ui-menu-item { +.ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } diff --git a/ui/menu.js b/ui/menu.js index 31f621d22..b4909a116 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -36,7 +36,7 @@ return $.widget( "ui.menu", { items: "> *", menus: "ul", position: { - my: "left-1 top", + my: "left top", at: "right top" }, role: "menu", @@ -110,7 +110,8 @@ return $.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( ".ui-state-active" ).removeClass( "ui-state-active" ); + target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); + this.focus( event, target ); }, mouseleave: "collapseAll", @@ -169,17 +170,18 @@ return $.widget( "ui.menu", { .removeClass( "ui-menu-item" ) .removeAttr( "role" ) .removeAttr( "aria-disabled" ) - .removeUniqueId() - .removeClass( "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(); - } - }); + .children( ".ui-menu-item-wrapper" ) + .removeUniqueId() + .removeClass( "ui-menu-item-wrapper 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" ); @@ -267,7 +269,7 @@ return $.widget( "ui.menu", { _activate: function( event ) { if ( !this.active.is( ".ui-state-disabled" ) ) { - if ( this.active.is( "[aria-haspopup='true']" ) ) { + if ( this.active.children( "[aria-haspopup='true']" ).length ) { this.expand( event ); } else { this.select( event ); @@ -294,7 +296,7 @@ return $.widget( "ui.menu", { }) .each(function() { var menu = $( this ), - item = menu.parent(), + item = menu.prev(), submenuCarat = $( "<span>" ) .addClass( "ui-menu-icon ui-icon " + icon ) .data( "ui-menu-submenu-carat", true ); @@ -319,11 +321,14 @@ return $.widget( "ui.menu", { // Don't refresh list items that are already adapted items.not( ".ui-menu-item, .ui-menu-divider" ) .addClass( "ui-menu-item" ) - .uniqueId() - .attr({ - tabIndex: -1, - role: this._itemRole() - }); + .children() + .not( ".ui-menu" ) + .addClass( "ui-menu-item-wrapper" ) + .uniqueId() + .attr({ + tabIndex: -1, + role: this._itemRole() + }); // Add aria-disabled attribute to any disabled menu item items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" ); @@ -362,7 +367,10 @@ return $.widget( "ui.menu", { this._scrollIntoView( item ); this.active = item.first(); - focused = this.active.addClass( "ui-state-focus" ).removeClass( "ui-state-active" ); + focused = this.active.children( ".ui-menu-item-wrapper" ) + .addClass( "ui-state-focus" ) + .removeClass( "ui-state-active" ); + // Only update aria-activedescendant if there's a role // otherwise we assume focus is managed elsewhere if ( this.options.role ) { @@ -372,8 +380,9 @@ return $.widget( "ui.menu", { // Highlight active parent menu item, if any this.active .parent() - .closest( ".ui-menu-item" ) - .addClass( "ui-state-active" ); + .closest( ".ui-menu-item" ) + .children( ".ui-menu-item-wrapper" ) + .addClass( "ui-state-active" ); if ( event && event.type === "keydown" ) { this._close(); @@ -419,7 +428,7 @@ return $.widget( "ui.menu", { return; } - this.active.removeClass( "ui-state-focus" ); + this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" ); this.active = null; this._trigger( "blur", event, { item: this.active } ); @@ -628,7 +637,7 @@ return $.widget( "ui.menu", { this._trigger( "select", event, ui ); }, - _filterMenuItems: function(character) { + _filterMenuItems: function( character ) { var escapedCharacter = character.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" ), regex = new RegExp( "^" + escapedCharacter, "i" ); @@ -638,7 +647,8 @@ return $.widget( "ui.menu", { // Only match on items, not dividers or other content (#10571) .filter( ".ui-menu-item" ) .filter(function() { - return regex.test( $.trim( $( this ).text() ) ); + return regex.test( + $.trim( $( this ).children( ".ui-menu-item-wrapper" ).text() ) ); }); } }); |