mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
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:
parent
7137c90b18
commit
0bbd156918
@ -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" );
|
||||||
|
@ -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" );
|
||||||
|
@ -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() );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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" );
|
||||||
|
@ -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" );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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() );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user