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;
}
.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 {
display: none;
}

View File

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