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
This commit is contained in:
Jörn Zaefferer 2015-01-19 17:00:57 +01:00
parent 7137c90b18
commit 0bbd156918
6 changed files with 16 additions and 18 deletions

View File

@ -16,7 +16,7 @@ test( "prevent form submit on enter when menu is active", function() {
event = $.Event( "keydown" ); event = $.Event( "keydown" );
event.keyCode = $.ui.keyCode.DOWN; event.keyCode = $.ui.keyCode.DOWN;
element.trigger( event ); 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" ); "menu item is active" );
event = $.Event( "keydown" ); event = $.Event( "keydown" );

View File

@ -77,7 +77,7 @@ function autoFocusTest( afValue, focusedLength ) {
open: function() { open: function() {
equal( equal(
element.autocomplete( "widget" ) element.autocomplete( "widget" )
.find( ".ui-menu-item-wrapper.ui-state-focus" ) .find( ".ui-menu-item-wrapper.ui-state-active" )
.length, .length,
focusedLength, focusedLength,
"first item is " + (afValue ? "" : "not") + " auto focused" ); "first item is " + (afValue ? "" : "not") + " auto focused" );

View File

@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() {
expect( 1 ); expect( 1 );
var element = $( "#menu1" ).menu({ var element = $( "#menu1" ).menu({
focus: function( event ) { 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() ); log( $( ui.item[ 0 ] ).text() );
}, },
focus: function( event ) { 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() ); log( $( ui.item[0] ).text() );
}, },
focus: function( event ) { 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() ); log( $( ui.item[ 0 ] ).text() );
}, },
focus: function( event ) { 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() ); log( $( ui.item[ 0 ] ).text() );
}, },
focus: function( event ) { 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() ); log( $( ui.item[0] ).text() );
}, },
focus: function( event ) { 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() ); log( $( ui.item[0] ).text() );
}, },
focus: function( event ) { 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 ); expect( 3 );
var element = $( "#menu2" ).menu({ var element = $( "#menu2" ).menu({
focus: function( event ) { 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 ); expect( 1 );
var element = $( "#menu2" ).menu({ var element = $( "#menu2" ).menu({
focus: function( event ) { 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() );
} }
}); });

View File

@ -273,7 +273,7 @@ $.each([
}); });
function checkItemClasses() { 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.length, 1, "only one item has ui-state-focus class" );
equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
"selected item has ui-state-focus class" ); "selected item has ui-state-focus class" );

View File

@ -372,9 +372,7 @@ return $.widget( "ui.menu", {
this._scrollIntoView( item ); this._scrollIntoView( item );
this.active = item.first(); this.active = item.first();
focused = this.active.children( ".ui-menu-item-wrapper" ) focused = this.active.children( ".ui-menu-item-wrapper" ).addClass( "ui-state-active" );
.addClass( "ui-state-focus" )
.removeClass( "ui-state-active" );
// Only update aria-activedescendant if there's a role // Only update aria-activedescendant if there's a role
// otherwise we assume focus is managed elsewhere // otherwise we assume focus is managed elsewhere
@ -433,7 +431,7 @@ return $.widget( "ui.menu", {
return; 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.active = null;
this._trigger( "blur", event, { item: this.active } ); this._trigger( "blur", event, { item: this.active } );
@ -503,7 +501,7 @@ return $.widget( "ui.menu", {
.attr( "aria-hidden", "true" ) .attr( "aria-hidden", "true" )
.attr( "aria-expanded", "false" ) .attr( "aria-expanded", "false" )
.end() .end()
.find( ".ui-state-active" ).not( ".ui-state-focus" ) .find( ".ui-state-active" ).not( ".ui-menu-item-wrapper" )
.removeClass( "ui-state-active" ); .removeClass( "ui-state-active" );
}, },

View File

@ -253,7 +253,7 @@ return $.widget( "ui.selectmenu", {
} else { } else {
// Menu clears focus on close, reset focus to selected item // 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() ); this.menuInstance.focus( null, this._getSelectedItem() );
} }