From 0bbd1569182bc03e8dc4f5f8aa203e8edbe15f99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Zaefferer?= Date: Mon, 19 Jan 2015 17:00:57 +0100 Subject: [PATCH] Menu: Use ui-state-active consistently So far we were using ui-state-active on active parent items, ui-state-focus on active child items. The theme update highlighted the visual inconsistency. With this change, only ui-state-active is used. Fixes #10692 --- tests/unit/autocomplete/autocomplete_core.js | 2 +- .../unit/autocomplete/autocomplete_options.js | 2 +- tests/unit/menu/menu_events.js | 18 +++++++++--------- tests/unit/selectmenu/selectmenu_core.js | 2 +- ui/menu.js | 8 +++----- ui/selectmenu.js | 2 +- 6 files changed, 16 insertions(+), 18 deletions(-) diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index fa3f9abb0..1208d89f1 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -16,7 +16,7 @@ test( "prevent form submit on enter when menu is active", function() { event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.DOWN; element.trigger( event ); - equal( menu.find( ".ui-menu-item-wrapper.ui-state-focus" ).length, 1, + equal( menu.find( ".ui-menu-item-wrapper.ui-state-active" ).length, 1, "menu item is active" ); event = $.Event( "keydown" ); diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js index 226db29ed..8215dbe61 100644 --- a/tests/unit/autocomplete/autocomplete_options.js +++ b/tests/unit/autocomplete/autocomplete_options.js @@ -77,7 +77,7 @@ function autoFocusTest( afValue, focusedLength ) { open: function() { equal( element.autocomplete( "widget" ) - .find( ".ui-menu-item-wrapper.ui-state-focus" ) + .find( ".ui-menu-item-wrapper.ui-state-active" ) .length, focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" ); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index f4d494f47..8156abbcd 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-menu-item-wrapper.ui-state-active" ).parent().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-menu-item-wrapper.ui-state-active" ).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" ).parent().index() ); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).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" ).parent().index() ); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).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" ).parent().index()); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).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" ).parent().index()); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).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" ).parent().index() ); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).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" ).parent().index() ); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).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" ).parent().index() ); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } }); diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index b4efb80f2..3b5472996 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -273,7 +273,7 @@ $.each([ }); function checkItemClasses() { - focusedItem = menu.find( "li .ui-state-focus" ); + focusedItem = menu.find( ".ui-menu-item-wrapper.ui-state-active" ); equal( focusedItem.length, 1, "only one item has ui-state-focus class" ); equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-focus class" ); diff --git a/ui/menu.js b/ui/menu.js index 9c0954bea..bf698c9f9 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -372,9 +372,7 @@ return $.widget( "ui.menu", { this._scrollIntoView( item ); this.active = item.first(); - focused = this.active.children( ".ui-menu-item-wrapper" ) - .addClass( "ui-state-focus" ) - .removeClass( "ui-state-active" ); + focused = this.active.children( ".ui-menu-item-wrapper" ).addClass( "ui-state-active" ); // Only update aria-activedescendant if there's a role // otherwise we assume focus is managed elsewhere @@ -433,7 +431,7 @@ return $.widget( "ui.menu", { return; } - this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" ); + this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-active" ); this.active = null; this._trigger( "blur", event, { item: this.active } ); @@ -503,7 +501,7 @@ return $.widget( "ui.menu", { .attr( "aria-hidden", "true" ) .attr( "aria-expanded", "false" ) .end() - .find( ".ui-state-active" ).not( ".ui-state-focus" ) + .find( ".ui-state-active" ).not( ".ui-menu-item-wrapper" ) .removeClass( "ui-state-active" ); }, diff --git a/ui/selectmenu.js b/ui/selectmenu.js index 19f27e809..55da2b552 100644 --- a/ui/selectmenu.js +++ b/ui/selectmenu.js @@ -253,7 +253,7 @@ return $.widget( "ui.selectmenu", { } else { // Menu clears focus on close, reset focus to selected item - this.menu.find( ".ui-state-focus" ).removeClass( "ui-state-focus" ); + this.menu.find( ".ui-state-active" ).removeClass( "ui-state-active" ); this.menuInstance.focus( null, this._getSelectedItem() ); }