Ticket #35578: 35578.diff

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

@@ -642 +642 @@
         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
-.menu-item-settings .field-move a {
+.menu-item-settings .field-move {
+        margin: 3px 0 5px;
+        line-height: 1.5;
+}
+
+.field-move-visual-label {
+        float: left;
+        margin-right: 4px;
+        font-style: italic;
+}
+
+.menu-item-settings .field-move .button-link {
         display: none;
         margin: 0 2px;
+        color: #0073aa;
+        font-style: italic;
+        text-decoration: underline;
 }
 
+.menu-item-settings .field-move .button-link:hover,
+.menu-item-settings .field-move .button-link:active {
+        color: #00a0d2;
+}
+
+.menu-item-settings .field-move .button-link:focus {
+        color: #124964;
+        -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);
+}
+
 .menu-item-edit-active .menu-item-settings {
         display: block;
 }

src/wp-admin/includes/class-walker-nav-menu-edit.php

@@ -197 +197 @@
                                         </label>
                                 </p>
 
-                                <p class="field-move hide-if-no-js description description-wide">
-                                        <label>
-                                                <span><?php _e( 'Move' ); ?></span>
-                                                <a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a>
-                                                <a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a>
-                                                <a href="#" class="menus-move menus-move-left" data-dir="left"></a>
-                                                <a href="#" class="menus-move menus-move-right" data-dir="right"></a>
-                                                <a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a>
-                                        </label>
-                                </p>
+                                <fieldset class="field-move hide-if-no-js description description-wide">
+                                        <span class="field-move-visual-label" aria-hidden="true"><?php _e( 'Move' ); ?></span>
+                                        <button type="button" class="button-link menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></button>
+                                        <button type="button" class="button-link menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></button>
+                                        <button type="button" class="button-link menus-move menus-move-left" data-dir="left"></button>
+                                        <button type="button" class="button-link menus-move menus-move-right" data-dir="right"></button>
+                                        <button type="button" class="button-link menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></button>
+                                </fieldset>
 
                                 <div class="menu-item-actions description-wide submitbox">
                                         <?php if ( 'custom' != $item->type && $original_title !== false ) : ?>

src/wp-admin/js/nav-menu.js

@@ -406 +406 @@
                         } );
 
                         // Links for moving items
-                        menu.on( 'click', '.menus-move', function ( e ) {
+                        menu.on( 'click', '.menus-move', function () {
                                 var $this = $( this ),
                                         dir = $this.data( 'dir' );
 
@@ -413 +413 @@
                                 if ( 'undefined' !== typeof dir ) {
                                         api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
                                 }
-                                e.preventDefault();
                         });
                 },
 
@@ -515 +514 @@
                  */
                 refreshAdvancedAccessibility : function() {
 
-                        // Hide all links by default
-                        $( '.menu-item-settings .field-move a' ).hide();
+                        // Hide all the move buttons by default.
+                        $( '.menu-item-settings .field-move .menus-move' ).hide();
 
                         // Mark all menu items as unprocessed
                         $( 'a.item-edit' ).data( 'needs_accessibility_refresh', true );