WordPress.org

Make WordPress Core

Changeset 33279


Ignore:
Timestamp:
07/15/2015 06:43:50 PM (5 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r33157 r33279  
    574574}
    575575
     576.menu-item-bar .item-delete:focus {
     577    -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
     578    box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
     579}
     580
    576581.adding-menu-items .menu-item-bar .item-edit {
    577582    display: none;
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r33189 r33279  
    11471147            $removeBtn.on( 'click', function() {
    11481148                // Find an adjacent element to add focus to when this menu item goes away
    1149                 var $adjacentFocusTarget;
    1150                 if ( control.container.next().is( '.customize-control-nav_menu_item' ) ) {
    1151                     if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
    1152                         $adjacentFocusTarget = control.container.next().find( '.item-edit:first' );
    1153                     } else {
    1154                         $adjacentFocusTarget = control.container.next().find( '.item-delete:first' );
    1155                     }
    1156                 } else if ( control.container.prev().is( '.customize-control-nav_menu_item' ) ) {
    1157                     if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
    1158                         $adjacentFocusTarget = control.container.prev().find( '.item-edit:first' );
    1159                     } else {
    1160                         $adjacentFocusTarget = control.container.prev().find( '.item-delete:first' );
    1161                     }
     1149                var addingItems = true, $adjacentFocusTarget, $next, $prev;
     1150
     1151                if ( ! $( 'body' ).hasClass( 'adding-menu-items' ) ) {
     1152                    addingItems = false;
     1153                }
     1154
     1155                $next = control.container.nextAll( '.customize-control-nav_menu_item:visible' ).first();
     1156                $prev = control.container.prevAll( '.customize-control-nav_menu_item:visible' ).first();
     1157
     1158                if ( $next.length ) {
     1159                    $adjacentFocusTarget = $next.find( false === addingItems ? '.item-edit' : '.item-delete' ).first();
     1160                } else if ( $prev.length ) {
     1161                    $adjacentFocusTarget = $prev.find( false === addingItems ? '.item-edit' : '.item-delete' ).first();
    11621162                } else {
    1163                     $adjacentFocusTarget = control.container.next( '.customize-control-nav_menu' ).find( '.add-new-menu-item' );
     1163                    $adjacentFocusTarget = control.container.nextAll( '.customize-control-nav_menu' ).find( '.add-new-menu-item' ).first();
    11641164                }
    11651165
Note: See TracChangeset for help on using the changeset viewer.