Skip to content

Commit 0bbd156

Browse files
committed
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
1 parent 7137c90 commit 0bbd156

File tree

6 files changed

+16
-18
lines changed

6 files changed

+16
-18
lines changed

tests/unit/autocomplete/autocomplete_core.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ test( "prevent form submit on enter when menu is active", function() {
1616
event = $.Event( "keydown" );
1717
event.keyCode = $.ui.keyCode.DOWN;
1818
element.trigger( event );
19-
equal( menu.find( ".ui-menu-item-wrapper.ui-state-focus" ).length, 1,
19+
equal( menu.find( ".ui-menu-item-wrapper.ui-state-active" ).length, 1,
2020
"menu item is active" );
2121

2222
event = $.Event( "keydown" );

tests/unit/autocomplete/autocomplete_options.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function autoFocusTest( afValue, focusedLength ) {
7777
open: function() {
7878
equal(
7979
element.autocomplete( "widget" )
80-
.find( ".ui-menu-item-wrapper.ui-state-focus" )
80+
.find( ".ui-menu-item-wrapper.ui-state-active" )
8181
.length,
8282
focusedLength,
8383
"first item is " + (afValue ? "" : "not") + " auto focused" );

tests/unit/menu/menu_events.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() {
9191
expect( 1 );
9292
var element = $( "#menu1" ).menu({
9393
focus: function( event ) {
94-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
94+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
9595
}
9696
});
9797

@@ -177,7 +177,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen
177177
log( $( ui.item[ 0 ] ).text() );
178178
},
179179
focus: function( event ) {
180-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
180+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
181181
}
182182
});
183183

@@ -243,7 +243,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus"
243243
log( $( ui.item[0] ).text() );
244244
},
245245
focus: function( event ) {
246-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
246+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() );
247247
}
248248
});
249249

@@ -363,7 +363,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus"
363363
log( $( ui.item[ 0 ] ).text() );
364364
},
365365
focus: function( event ) {
366-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
366+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() );
367367
}
368368
});
369369

@@ -438,7 +438,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f
438438
log( $( ui.item[ 0 ] ).text() );
439439
},
440440
focus: function( event ) {
441-
log( $( event.target ).find( ".ui-state-focus" ).parent().index());
441+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index());
442442
}
443443
});
444444

@@ -533,7 +533,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite
533533
log( $( ui.item[0] ).text() );
534534
},
535535
focus: function( event ) {
536-
log( $( event.target ).find( ".ui-state-focus" ).parent().index());
536+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index());
537537
}
538538
});
539539

@@ -585,7 +585,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and
585585
log( $( ui.item[0] ).text() );
586586
},
587587
focus: function( event ) {
588-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
588+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
589589
}
590590
});
591591

@@ -612,7 +612,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function()
612612
expect( 3 );
613613
var element = $( "#menu2" ).menu({
614614
focus: function( event ) {
615-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
615+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
616616
}
617617
});
618618

@@ -635,7 +635,7 @@ asyncTest( "Keep focus on selected item (see #10644)", function() {
635635
expect( 1 );
636636
var element = $( "#menu2" ).menu({
637637
focus: function( event ) {
638-
log( $( event.target ).find( ".ui-state-focus" ).parent().index() );
638+
log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() );
639639
}
640640
});
641641

tests/unit/selectmenu/selectmenu_core.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ $.each([
273273
});
274274

275275
function checkItemClasses() {
276-
focusedItem = menu.find( "li .ui-state-focus" );
276+
focusedItem = menu.find( ".ui-menu-item-wrapper.ui-state-active" );
277277
equal( focusedItem.length, 1, "only one item has ui-state-focus class" );
278278
equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
279279
"selected item has ui-state-focus class" );

ui/menu.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -372,9 +372,7 @@ return $.widget( "ui.menu", {
372372
this._scrollIntoView( item );
373373

374374
this.active = item.first();
375-
focused = this.active.children( ".ui-menu-item-wrapper" )
376-
.addClass( "ui-state-focus" )
377-
.removeClass( "ui-state-active" );
375+
focused = this.active.children( ".ui-menu-item-wrapper" ).addClass( "ui-state-active" );
378376

379377
// Only update aria-activedescendant if there's a role
380378
// otherwise we assume focus is managed elsewhere
@@ -433,7 +431,7 @@ return $.widget( "ui.menu", {
433431
return;
434432
}
435433

436-
this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" );
434+
this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-active" );
437435
this.active = null;
438436

439437
this._trigger( "blur", event, { item: this.active } );
@@ -503,7 +501,7 @@ return $.widget( "ui.menu", {
503501
.attr( "aria-hidden", "true" )
504502
.attr( "aria-expanded", "false" )
505503
.end()
506-
.find( ".ui-state-active" ).not( ".ui-state-focus" )
504+
.find( ".ui-state-active" ).not( ".ui-menu-item-wrapper" )
507505
.removeClass( "ui-state-active" );
508506
},
509507

ui/selectmenu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ return $.widget( "ui.selectmenu", {
253253
} else {
254254

255255
// Menu clears focus on close, reset focus to selected item
256-
this.menu.find( ".ui-state-focus" ).removeClass( "ui-state-focus" );
256+
this.menu.find( ".ui-state-active" ).removeClass( "ui-state-active" );
257257
this.menuInstance.focus( null, this._getSelectedItem() );
258258
}
259259

0 commit comments

Comments
 (0)