Customizer: Fix element focus after menu item is deleted for keyboard accessibility.

Also restores box shadow on focus.

Props valendesigns.
Fixes #32740.


git-svn-id: https://develop.svn.wordpress.org/trunk@33279 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2015-07-15 18:43:50 +00:00
parent 140ff5cb9b
commit 87b556a77a
2 changed files with 19 additions and 14 deletions

View File

@ -573,6 +573,11 @@
color: #f00; color: #f00;
} }
.menu-item-bar .item-delete:focus {
-webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
}
.adding-menu-items .menu-item-bar .item-edit { .adding-menu-items .menu-item-bar .item-edit {
display: none; display: none;
} }

View File

@ -1146,21 +1146,21 @@
$removeBtn.on( 'click', function() { $removeBtn.on( 'click', function() {
// Find an adjacent element to add focus to when this menu item goes away // Find an adjacent element to add focus to when this menu item goes away
var $adjacentFocusTarget; var addingItems = true, $adjacentFocusTarget, $next, $prev;
if ( control.container.next().is( '.customize-control-nav_menu_item' ) ) {
if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) { if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
$adjacentFocusTarget = control.container.next().find( '.item-edit:first' ); addingItems = false;
} else { }
$adjacentFocusTarget = control.container.next().find( '.item-delete:first' );
} $next = control.container.nextAll( '.customize-control-nav_menu_item:visible' ).first();
} else if ( control.container.prev().is( '.customize-control-nav_menu_item' ) ) { $prev = control.container.prevAll( '.customize-control-nav_menu_item:visible' ).first();
if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
$adjacentFocusTarget = control.container.prev().find( '.item-edit:first' ); if ( $next.length ) {
} else { $adjacentFocusTarget = $next.find( false === addingItems ? '.item-edit' : '.item-delete' ).first();
$adjacentFocusTarget = control.container.prev().find( '.item-delete:first' ); } else if ( $prev.length ) {
} $adjacentFocusTarget = $prev.find( false === addingItems ? '.item-edit' : '.item-delete' ).first();
} else { } else {
$adjacentFocusTarget = control.container.next( '.customize-control-nav_menu' ).find( '.add-new-menu-item' ); $adjacentFocusTarget = control.container.nextAll( '.customize-control-nav_menu' ).find( '.add-new-menu-item' ).first();
} }
control.container.slideUp( function() { control.container.slideUp( function() {