From 907d67572ad95e1a2df3ab3c64248527409e74d9 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 10 Oct 2016 16:23:23 +0000
Subject: [PATCH] Accessibility: Improve the UI controls to move the Menu
 items.

On the Menus screen, the links to move menu items behave like buttons: they
perform an action so they should be real buttons to be correctly reported to
assistive technologies. Since they're logically grouped controls, they should
also be wrapped in a `<fieldset>` element for better semantics and accessibility.

Props Cheffheid.
Fixes #35578.


git-svn-id: https://develop.svn.wordpress.org/trunk@38770 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/nav-menus.css                | 31 ++++++++++++++++++-
 .../includes/class-walker-nav-menu-edit.php   | 18 +++++------
 src/wp-admin/js/nav-menu.js                   |  7 ++---
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index b2916f2c7d..dd84fc5466 100644
--- a/src/wp-admin/css/nav-menus.css
+++ b/src/wp-admin/css/nav-menus.css
@@ -646,9 +646,38 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	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 {
diff --git a/src/wp-admin/includes/class-walker-nav-menu-edit.php b/src/wp-admin/includes/class-walker-nav-menu-edit.php
index 9a2f3ecb69..1f6857667e 100644
--- a/src/wp-admin/includes/class-walker-nav-menu-edit.php
+++ b/src/wp-admin/includes/class-walker-nav-menu-edit.php
@@ -197,16 +197,14 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu {
 					</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 ) : ?>
diff --git a/src/wp-admin/js/nav-menu.js b/src/wp-admin/js/nav-menu.js
index 2410efe971..fdbc2eda22 100644
--- a/src/wp-admin/js/nav-menu.js
+++ b/src/wp-admin/js/nav-menu.js
@@ -406,14 +406,13 @@ var wpNavMenu;
 			} );
 
 			// Links for moving items
-			menu.on( 'click', '.menus-move', function ( e ) {
+			menu.on( 'click', '.menus-move', function () {
 				var $this = $( this ),
 					dir = $this.data( 'dir' );
 
 				if ( 'undefined' !== typeof dir ) {
 					api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir );
 				}
-				e.preventDefault();
 			});
 		},
 
@@ -515,8 +514,8 @@ var wpNavMenu;
 		 */
 		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 );