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