Skip to content
Permalink
Browse files

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
  • Loading branch information...
jzaefferer committed Jan 19, 2015
1 parent 7137c90 commit 0bbd1569182bc03e8dc4f5f8aa203e8edbe15f99
@@ -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" );
@@ -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" );
@@ -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() );
}
});

@@ -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" );
@@ -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" );
},

@@ -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() );
}

0 comments on commit 0bbd156

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.