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

diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js
index fa3f9abb072c30a15bb687bbf83efd4ffa6a32d1..1208d89f18e252ede0433d63908085453aa6941e 100644 (file)
--- 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 226db29edce3b6cf177249b6c733e9057e85556e..8215dbe61465527c0ba4178bc2dc6d1a6d4309d9 100644 (file)
--- 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 f4d494f47af70fb0ff63035cef054b1e2797d040..8156abbcd7f736a4dc487f9964152c10932e6762 100644 (file)
--- 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 b4efb80f2fbd95d63530e0154dd15e049988c951..3b5472996eae9306e5566d57594dea1f2617b97b 100644 (file)
--- 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 9c0954bea8aa15a0e9b405a23c5e784cdadee3de..bf698c9f975c27db1302ebf2636cf48645bec8fe 100644 (file)
--- 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 19f27e809251c7bef4b5c87709360583a12ad3bb..55da2b55216a7b88b55db5381c80bff88b1a6bd3 100644 (file)
--- 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() );
                }