Ticket #14045: 14045.diff

wp-admin/includes/nav-menu.php

@@ -89 +89 @@
                 <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
                         <dl class="menu-item-bar">
                                 <dt class="menu-item-handle">
-                                        <span class="item-title"><?php echo esc_html( $title ); ?> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span>
+                                        <span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span>
                                         <span class="item-controls">
                                                 <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
                                                 <span class="item-order hide-if-js">

wp-admin/js/nav-menu.js

@@ -53 +53 @@
                         this.initAccessibility();
 
                         this.initToggles();
+
+                        this.refreshVerbalAccessibility();
                 },
 
                 jQueryExtensions : function() {
@@ -264 +266 @@
                         });
                 },
 
+                countMenuItems : function( depth ) {
+                        return $( '.menu-item-depth-' + depth ).length;
+                },
+
+                refreshVerbalAccessibility : function() {
+                        $( '.item-edit' ).each( function() {
+                                var $this = $(this),
+                                        movement = [],
+                                        availableMovement = '',
+                                        menuItem = $this.parents( 'li.menu-item' ),
+                                        depth = menuItem.menuItemDepth(),
+                                        isPrimaryMenuItem = ( 0 === depth ),
+                                        itemName = $this.parents( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
+                                        position = parseInt( menuItem.index() ),
+                                        totalMenuItems = $('#menu-to-edit li').length,
+                                        hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length;
+
+                                // Where can they move this menu item?
+                                if ( 0 !== position )
+                                        movement.push( 'up' );
+
+                                if ( position + 1 !== totalMenuItems && 0 !== position )
+                                        movement.push( 'down' );
+
+                                if ( 0 === position && 0 !== hasSameDepthSibling )
+                                        movement.push( 'down' );
+
+                                if ( ! isPrimaryMenuItem )
+                                        movement.push( 'left' );
+
+                                if ( 0 !== position ) {
+                                        if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() )
+                                                movement.push( 'right' );
+                                }
+
+                                for ( i=0; i<movement.length; i++ ) {
+
+                                        if ( 1 !== movement.length && i + 1 === movement.length )
+                                                availableMovement = availableMovement + ' or';
+
+                                        availableMovement = availableMovement + ' ' + movement[i] + ',';
+                                }
+
+                                availableMovement = availableMovement.substring(0, availableMovement.length - 1);
+
+                                if ( isPrimaryMenuItem ) {
+                                        var primaryItems = $( '.menu-item-depth-0' ),
+                                                itemPosition = primaryItems.index( menuItem ) + 1,
+                                                totalMenuItems = primaryItems.length,
+
+                                                // String together help text for primary menu items
+                                                title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' of ' + totalMenuItems + ' primary menu items.  Move this item' + availableMovement + '.';
+                                } else {
+                                        var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(),
+                                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
+                                                parentItemName = parentItem.find( '.menu-item-title' ).text(),
+                                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
+                                                itemPosition = $(subItems.parents('.menu-item').get().reverse()).index( menuItem ) + 1,
+                                                totalMenuItems = subItems.length;
+
+                                                // String together help text for sub menu items
+                                                title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' of ' + totalMenuItems + ' subb menu items under ' + parentItemName + '. Move this item' + availableMovement + '.';
+                                }
+
+                                $this.prop('title', title);
+                        });
+                },
+
+                getGetOrdinal : function(n) {
+                        var s=["th","st","nd","rd"],
+                                v=n%100;
+                        return n+(s[(v-20)%10]||s[v]||s[0]);
+                },
+
                 initAccessibility : function() {
                         $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
                                 $(this).on( 'keydown', function(e){
@@ -320 +396 @@
                                                 if ( thisItemChildren ) {
                                                         var items = thisItem.add( thisItemChildren );
                                                         // Move the entire block
-                                                        items.detach().insertBefore( menuItems.eq( newItemPosition ) );
+                                                        items.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId();
                                                 } else {
-                                                        thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) );
+                                                        thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId();
                                                 }
                                                 break;
                                         case 'down':
@@ -341 +417 @@
                                                         if ( menuItemsCount === thisItemPosition + items.length )
                                                                 break;
 
-                                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) );
+                                                        items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId();
                                                 } else {
                                                         // If next item has sub items, shift depth
                                                         if ( 0 !== nextItemChildren.length )
@@ -350 +426 @@
                                                         // Have we reached the bottom
                                                         if ( menuItemsCount === thisItemPosition + 1 )
                                                                 break;
-                                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) );
+                                                        thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId();
                                                 }
                                                 break;
                                         case 'left':
@@ -358 +434 @@
                                                 if ( 0 === thisItemDepth )
                                                         break;
                                                 thisItem.shiftHorizontally( -1 );
+                                                $( '#menu-name' ).focus();
                                                 break;
                                         case 'right':
                                                 // Can't be sub item at top
@@ -367 +444 @@
                                                 if ( thisItemData['menu-item-parent-id'] === prevItemId )
                                                         break;
                                                 thisItem.shiftHorizontally( 1 );
+                                                $( '#menu-name' ).focus();
                                                 break;
                                         }
                                         api.registerChange();
+                                        api.refreshVerbalAccessibility();
                                         // Put focus back on same menu item
                                         $( '#edit-' + thisItemData['menu-item-db-id'] ).focus();
                                         return false;