Changeset 33279

Timestamp:

07/15/2015 06:43:50 PM (9 years ago)

Author:

westonruter

Message:

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

Also restores box shadow on focus.

Props valendesigns.
Fixes #32740.

Location:

trunk/src/wp-admin

Files:

• css/customize-nav-menus.css (modified) (1 diff)
• js/customize-nav-menus.js (modified) (1 diff)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -574 +574 @@
 }
 
+.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;

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -1147 +1147 @@
             $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();
                 }