Aberdeen

Ada

Adamsville

Addyston

Delphi -

-

Ada

-

Saarland

-

Salzburg

+

Aberdeen

+

Ada

+

Adamsville

+

Addyston

+

+

Delphi

+

+

Ada

+

Saarland

+

Salzburg

-

Saarland

-

Salzburg -

-

Delphi -

-

Ada

+

Saarland

+

+

Salzburg

+

+

+

Delphi

+

+

Ada

Saarland

-

Salzburg

+

Salzburg

-

Delphi -

-

Ada

-

Saarland

-

Salzburg

+

+

Delphi

+

+

Ada

+

Saarland

+

Salzburg

-

Perch

+

Perch

-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
-
• Delphi +
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
+
• +
  Delphi
  -
  • Ada
  -
  • Saarland
  -
  • Salzburg
  +
  • Ada
  +
  • Saarland
  +
  • Salzburg
-
• Saarland
+
• Saarland

-
• Group 1
-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
+
• +
  Group 1
  +
+
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
-
• Group 2
-
• Delphi +
• +
  Group 2
  +
+
• +
  Delphi
  -
  • Ada
  -
  • Saarland
  -
  • Salzburg
  +
  • Ada
  +
  • Saarland
  +
  • Salzburg
-
• Saarland
+
• Saarland
• ---
-
• Group 3
-
• Salzburg +
• +
  Group 3
  +
+
• +
  Salzburg
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    +
    • Ada
    • -
    -
    • Saarland
    +
    • Saarland
    • —
    -
    • Salzburg
    +
    • Salzburg
    • –
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    -
    • Saarland
    -
    • Salzburg
    +
    • Ada
    +
    • Saarland
    +
    • Salzburg
  -
  • Perch
  +
  • Perch
-
• Amesville
+
• Amesville

-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
+
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
• -
-
• -Saarland
+
• -Saarland

diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index 099dd091e03..2404ebe0201 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 df039c9e49d..f02f97fca50 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 02e63bf63a9..f4d494f47af 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 5a633998d82..ef8279018e0 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( "Save" ); + element.find( "li:first .ui-menu-item-wrapper" ) + .html( "Save" ); 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 c7667334583..438b02a32b8 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 77737c39045..ea273c765bf 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/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index e9312d12fc1..0074c6f90ab 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -3,15 +3,15 @@ module( "selectmenu: core" ); asyncTest( "accessibility", function() { - var links, + var wrappers, element = $( "#speed" ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ); button.simulate( "focus" ); - links = menu.find( "li.ui-menu-item" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); - expect( 12 + links.length * 2 ); + expect( 12 + wrappers.length * 2 ); setTimeout(function() { equal( button.attr( "role" ), "combobox", "button role" ); @@ -21,7 +21,7 @@ asyncTest( "accessibility", function() { equal( button.attr( "aria-owns" ), menu.attr( "id" ), "button aria-owns" ); equal( button.attr( "aria-labelledby" ), - links.eq( element[ 0 ].selectedIndex ).attr( "id" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "button link aria-labelledby" ); equal( button.attr( "tabindex" ), 0, "button link tabindex" ); @@ -32,10 +32,10 @@ asyncTest( "accessibility", function() { equal( menu.attr( "tabindex" ), 0, "menu tabindex" ); equal( menu.attr( "aria-activedescendant" ), - links.eq( element[ 0 ].selectedIndex ).attr( "id" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "menu aria-activedescendant" ); - $.each( links, function( index ) { + $.each( wrappers, function( index ) { var link = $( this ); equal( link.attr( "role" ), "option", "menu link #" + index +" role" ); equal( link.attr( "tabindex" ), -1, "menu link #" + index +" tabindex" ); @@ -58,7 +58,7 @@ $.each([ asyncTest( "state synchronization - after keydown on button - " + settings.type, function() { expect( 4 ); - var links, + var wrappers, element = $( settings.selector ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ), @@ -69,17 +69,17 @@ $.each([ button.simulate( "focus" ); setTimeout(function() { - links = menu.find( "li.ui-menu-item" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( menu.attr( "aria-activedescendant" ), - links.eq( element[ 0 ].selectedIndex ).attr( "id" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "menu aria-activedescendant" ); equal( button.attr( "aria-activedescendant" ), - links.eq( element[ 0 ].selectedIndex ).attr( "id" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "button aria-activedescendant" ); equal( @@ -95,7 +95,7 @@ $.each([ asyncTest( "state synchronization - after click on item - " + settings.type, function() { expect( 4 ); - var links, + var wrappers, element = $( settings.selector ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ), @@ -103,18 +103,18 @@ $.each([ button.simulate( "focus" ); setTimeout(function() { - links = menu.find( "li.ui-menu-item" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" ); equal( menu.attr( "aria-activedescendant" ), - links.eq( element[ 0 ].selectedIndex ).attr( "id" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "menu aria-activedescendant" ); equal( button.attr( "aria-activedescendant" ), - links.eq( element[ 0 ].selectedIndex ).attr( "id" ), + wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "button aria-activedescendant" ); equal( @@ -131,7 +131,7 @@ $.each([ "after focus item and keydown on button - " + settings.type, function() { expect( 4 ); - var links, + var wrappers, element = $( settings.selector ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ), @@ -141,15 +141,15 @@ $.each([ button.simulate( "focus" ); setTimeout(function() { - links = menu.find( "li.ui-menu-item" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); // Open menu and click first item button.trigger( "click" ); - links.first().simulate( "mouseover" ).trigger( "click" ); + wrappers.first().simulate( "mouseover" ).trigger( "click" ); // Open menu again and hover item button.trigger( "click" ); - links.eq( 3 ).simulate( "mouseover" ); + wrappers.eq( 3 ).simulate( "mouseover" ); // Close and use keyboard control on button button.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); @@ -157,9 +157,9 @@ $.each([ setTimeout(function() { button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( menu.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ), + equal( menu.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ), "menu aria-activedescendant" ); - equal( button.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ), + equal( button.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ), "button aria-activedescendant" ); equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() , "original select state" ); @@ -172,26 +172,26 @@ $.each([ asyncTest( "item looping - " + settings.type, function() { expect( 4 ); - var links, + var wrappers, element = $( settings.selector ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ); button.simulate( "focus" ); setTimeout(function() { - links = menu.find( "li.ui-menu-item" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); - links.first().simulate( "mouseover" ).trigger( "click" ); + wrappers.first().simulate( "mouseover" ).trigger( "click" ); equal( element[ 0 ].selectedIndex, 0, "First item is selected" ); button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" ); button.trigger( "click" ); - links.last().simulate( "mouseover" ).trigger( "click" ); - equal( element[ 0 ].selectedIndex, links.length - 1, "Last item is selected" ); + wrappers.last().simulate( "mouseover" ).trigger( "click" ); + equal( element[ 0 ].selectedIndex, wrappers.length - 1, "Last item is selected" ); button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( element[ 0 ].selectedIndex, links.length - 1, "No looping behind last item" ); + equal( element[ 0 ].selectedIndex, wrappers.length - 1, "No looping behind last item" ); start(); }); }); @@ -199,27 +199,27 @@ $.each([ asyncTest( "item focus and active state - " + settings.type, function() { expect( 4 ); - var items, focusedItem, + var wrappers, focusedItem, element = $( settings.selector ).selectmenu(), button = element.selectmenu( "widget" ), menu = element.selectmenu( "menuWidget" ); button.simulate( "focus" ); setTimeout(function() { - items = menu.find( "li.ui-menu-item" ); + wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); setTimeout(function() { checkItemClasses(); - items.eq( 3 ).simulate( "mouseover" ).trigger( "click" ); + wrappers.eq( 3 ).simulate( "mouseover" ).trigger( "click" ); button.trigger( "click" ); - items.eq( 2 ).simulate( "mouseover" ); + wrappers.eq( 2 ).simulate( "mouseover" ); $( document ).trigger( "click" ); button.trigger( "click" ); - items.eq( 1 ).simulate( "mouseover" ); + wrappers.eq( 1 ).simulate( "mouseover" ); $( document ).trigger( "click" ); button.trigger( "click" ); @@ -231,9 +231,9 @@ $.each([ }); function checkItemClasses() { - focusedItem = menu.find( "li.ui-state-focus" ); + focusedItem = menu.find( "li .ui-state-focus" ); equal( focusedItem.length, 1, "only one item has ui-state-focus class" ); - equal( focusedItem.attr( "id" ), items.eq( element[ 0 ].selectedIndex ).attr( "id" ), + equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-focus class" ); } }); @@ -241,7 +241,7 @@ $.each([ asyncTest( "empty option - " + settings.type, function() { expect( 7 ); - var button, menu, links, link, + var button, menu, wrappers, wrapper, element = $( settings.selector ); element.find( "option" ).first().text( "" ); @@ -251,20 +251,21 @@ $.each([ button.simulate( "focus" ); setTimeout(function() { - links = menu.find( "li:not(.ui-selectmenu-optgroup)" ); - link = links.first(); + wrappers = menu.find( "li:not(.ui-selectmenu-optgroup) .ui-menu-item-wrapper" ); + wrapper = wrappers.first(); button.trigger( "click" ); - equal( links.length, element.find( "option" ).length, + equal( wrappers.length, element.find( "option" ).length, "correct amount of list elements" ); - ok( link.outerHeight() > 10, "empty item seems to have reasonable height" ); - ok( link.attr( "id" ), "empty item has id attribute" ); - ok( link.hasClass( "ui-menu-item" ), "empty item has ui-menu-item class" ); - ok( !link.hasClass( "ui-menu-divider" ), + ok( wrapper.outerHeight() > 10, "empty item seems to have reasonable height" ); + ok( wrapper.attr( "id" ), "empty item has id attribute" ); + ok( wrapper.parent().hasClass( "ui-menu-item" ), + "empty item has ui-menu-item class" ); + ok( !wrapper.hasClass( "ui-menu-divider" ), "empty item does not have ui-menu-divider class" ); - equal( link.attr( "tabindex" ), -1, "empty item has tabindex" ); - equal( link.attr( "role" ), "option", "empty item has role option" ); + equal( wrapper.attr( "tabindex" ), -1, "empty item has tabindex" ); + equal( wrapper.attr( "role" ), "option", "empty item has role option" ); start(); }); diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 11e9df6e108..855748d3d65 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 @@

Default inline menu

-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
-
• Delphi
-
• Saarland
-
• Salzburg
+
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
+
• Delphi
+
• Saarland
+
• Salzburg

Inline with disabled items and submenus

-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
-
• Delphi +
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
+
• +
  Delphi
  -
  • Ada
  -
  • Saarland
  -
  • Salzburg
  +
  • Ada
  +
  • Saarland
  +
  • Salzburg
-
• Saarland
-
• Salzburg +
• Saarland
+
• +
  Salzburg
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    -
    • Saarland
    -
    • Salzburg
    +
    • Ada
    +
    • Saarland
    +
    • Salzburg
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    -
    • Saarland
    -
    • Salzburg
    +
    • Ada
    +
    • Saarland
    +
    • Salzburg
  -
  • Perch
  +
  • Perch
-
• Amesville
+
• Amesville

Menu with icons

-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
-
• Delphi +
• +
  Aberdeen
  +
+
• +
  Ada
  +
+
• Adamsville
+
• +
  Addyston
  +
+
• +
  Delphi
  -
  • Ada
  -
  • Saarland
  -
  • Salzburg
  +
  • Ada
  +
  • +
    Saarland
    +
  +
  • Salzburg
-
• Saarland
• - Salzburg +
  Saarland
+
• +
  + Salzburg +
  • - Delphi +
    Delphi
    -
    • Ada
    -
    • Saarland
    -
    • Salzburg
    +
    • Ada
    +
    • Saarland
    +
    • Salzburg
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    -
    • Saarland
    -
    • Salzburg
    +
    • Ada
    +
    • Saarland
    +
    • Salzburg
  -
  • Perch
  +
  • Perch

Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour

-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
-
• Adelphi
-
• Adena
-
• Adrian
-
• Akron
-
• Albany
-
• Alexandria
-
• Alger
-
• Alledonia
-
• Alliance
-
• Alpha
-
• Alvada
-
• Alvordton
-
• Amanda
-
• Amelia
-
• Amesville
-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
-
• Adelphi
-
• Adena
-
• Adrian
-
• Akron
-
• Albany
-
• Alexandria
-
• Alger
-
• Alledonia
-
• Alliance
-
• Alpha
-
• Alvada
-
• Alvordton
-
• Amanda
-
• Amelia
-
• Amesville
+
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
+
• Adelphi
+
• Adena
+
• Adrian
+
• Akron
+
• Albany
+
• Alexandria
+
• Alger
+
• Alledonia
+
• Alliance
+
• Alpha
+
• Alvada
+
• Alvordton
+
• Amanda
+
• Amelia
+
• Amesville
+
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
+
• Adelphi
+
• Adena
+
• Adrian
+
• Akron
+
• Albany
+
• Alexandria
+
• Alger
+
• Alledonia
+
• Alliance
+
• Alpha
+
• Alvada
+
• Alvordton
+
• Amanda
+
• Amelia
+
• Amesville

Menu with custom markup

-

-

Aberdeen

-

Ada

-

Adamsville

-

Addyston

-

Delphi -

-

Ada

-

Saarland

-

Salzburg

-

+

+

Aberdeen

+

Ada

+

Adamsville

+

Addyston

+

+

Delphi

+

+

Ada

+

Saarland

+

Salzburg

+

-

Saarland

-

Salzburg -

-

Delphi -

-

Ada

-

Saarland

-

Salzburg

-

+

Saarland

+

+

Salzburg

+

+

+

Delphi

+

+

Ada

+

Saarland

+

Salzburg

+

-

Delphi -

-

Ada

-

Saarland

-

Salzburg

-

+

+

Delphi

+

+

Ada

+

Saarland

+

Salzburg

+

-

Perch

-

+

Perch

+

Menu with custom markup, multi-line items and a custom submenu icon

- John Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +

+ John Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- Jane Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +

+ Jane Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- James Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +

+ James Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- Jenny Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +

+ Jenny Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- John Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +

+ John Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

-

Ada

-

Saarland

-

Salzburg

+

+

Ada

+

+

+

Saarland

+

+

+

Salzburg

+

Inline with dividers and group labels

-
• Group 1
-
• Aberdeen
-
• Ada
-
• Adamsville
-
• Addyston
+
• +
  Group 1
  +
+
• Aberdeen
+
• Ada
+
• Adamsville
+
• Addyston
-
• Group 2
-
• Delphi +
• +
  Group 2
  +
+
• +
  Delphi
  -
  • Ada
  -
  • Saarland
  -
  • Salzburg
  +
  • Ada
  +
  • Saarland
  +
  • Salzburg
-
• Saarland
+
• Saarland
• ---
-
• Group 3
-
• Salzburg +
• +
  Group 3
  +
+
• +
  Salzburg
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    -
    • -
    -
    • Saarland
    +
    • Ada
    +
    • -
    +
    • Saarland
    • —
    -
    • Salzburg
    +
    • Salzburg
    • –
  -
  • Delphi +
  • +
    Delphi
    -
    • Ada
    -
    • Saarland
    -
    • Salzburg
    +
    • Ada
    +
    • Saarland
    +
    • Salzburg
  -
  • Perch
  +
  • Perch
-
• Amesville
+
• Amesville

diff --git a/themes/base/menu.css b/themes/base/menu.css index 58c56134940..dae8288a2aa 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/autocomplete.js b/ui/autocomplete.js index 0132ed7f3a2..aa0e546334e 100644 --- a/ui/autocomplete.js +++ b/ui/autocomplete.js @@ -542,7 +542,9 @@ $.widget( "ui.autocomplete", { }, _renderItem: function( ul, item ) { - return $( "

" ).text( item.label ).appendTo( ul ); + return $( "

" ) + .append( $( "

" ).text( item.label ) ) + .appendTo( ul ); }, _move: function( direction, event ) { diff --git a/ui/menu.js b/ui/menu.js index 31f621d2294..b4909a11655 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 = $( "" ) .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() ) ); }); } }); diff --git a/ui/selectmenu.js b/ui/selectmenu.js index 14c81efee87..fb9428d867b 100644 --- a/ui/selectmenu.js +++ b/ui/selectmenu.js @@ -210,7 +210,9 @@ return $.widget( "ui.selectmenu", { this._renderMenu( this.menu, this.items ); this.menuInstance.refresh(); - this.menuItems = this.menu.find( "li" ).not( ".ui-selectmenu-optgroup" ); + this.menuItems = this.menu.find( "li" ) + .not( ".ui-selectmenu-optgroup" ) + .find( ".ui-menu-item-wrapper" ); item = this._getSelectedItem(); @@ -300,14 +302,15 @@ return $.widget( "ui.selectmenu", { }, _renderItem: function( ul, item ) { - var li = $( "

" ); + var li = $( "

" ), + wrapper = $( "

" ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ); } - this._setText( li, item.label ); + this._setText( wrapper, item.label ); - return li.appendTo( ul ); + return li.append( wrapper ).appendTo( ul ); }, _setText: function( element, value ) { @@ -323,9 +326,9 @@ return $.widget( "ui.selectmenu", { filter = ".ui-menu-item"; if ( this.isOpen ) { - item = this.menuItems.eq( this.focusIndex ); + item = this.menuItems.eq( this.focusIndex ).parent( "li" ); } else { - item = this.menuItems.eq( this.element[ 0 ].selectedIndex ); + item = this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" ); filter += ":not(.ui-state-disabled)"; } @@ -341,7 +344,7 @@ return $.widget( "ui.selectmenu", { }, _getSelectedItem: function() { - return this.menuItems.eq( this.element[ 0 ].selectedIndex ); + return this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" ); }, _toggle: function( event ) { @@ -466,7 +469,7 @@ return $.widget( "ui.selectmenu", { }, _selectFocusedItem: function( event ) { - var item = this.menuItems.eq( this.focusIndex ); + var item = this.menuItems.eq( this.focusIndex ).parent( "li" ); if ( !item.hasClass( "ui-state-disabled" ) ) { this._select( item.data( "ui-selectmenu-item" ), event ); }