From 787016376accf36fe67dd6041870ef4e0f010661 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Fri, 3 Jul 2015 21:23:12 +0000
Subject: [PATCH] Customizer: Improve descriptive text and focus for menu items
 reorder button.

props afercia.
fixes #32725.

git-svn-id: https://develop.svn.wordpress.org/trunk@33074 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-nav-menus.css         |  9 ++++++++-
 src/wp-admin/js/customize-nav-menus.js           | 12 ++++++++++++
 src/wp-includes/class-wp-customize-control.php   |  7 ++++---
 src/wp-includes/class-wp-customize-nav-menus.php |  2 ++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index fc14598fd7..45331aed1a 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -91,7 +91,14 @@
 }
 
 /* Menu-item reordering nav. */
-#customize-theme-controls button.reorder-toggle {
+#customize-theme-controls .reordering .reorder,
+#customize-theme-controls .reorder-done {
+	display: none;
+}
+
+#customize-theme-controls .reorder,
+#customize-theme-controls .reordering .reorder-done {
+	display: inline-block;
 	padding: 5px 8px;
 }
 
diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index 42e362c46b..6a2a449dd6 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/wp-admin/js/customize-nav-menus.js
@@ -1932,6 +1932,9 @@
 		 * @param {Boolean} showOrHide to enable/disable reordering
 		 */
 		toggleReordering: function( showOrHide ) {
+			var addNewItemBtn = this.container.find( '.add-new-menu-item' ),
+				reorderBtn = this.container.find( '.reorder-toggle' );
+
 			showOrHide = Boolean( showOrHide );
 
 			if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
@@ -1941,6 +1944,15 @@
 			this.isReordering = showOrHide;
 			this.$sectionContent.toggleClass( 'reordering', showOrHide );
 			this.$sectionContent.sortable( this.isReordering ? 'disable' : 'enable' );
+			if ( this.isReordering ) {
+				addNewItemBtn.attr( 'tabindex', '-1' );
+				reorderBtn.find( '.reorder-done' ).focus();
+				wp.a11y.speak( api.Menus.data.l10n.reorderModeOn );
+			} else {
+				addNewItemBtn.removeAttr( 'tabindex' );
+				reorderBtn.find( '.reorder' ).focus();
+				wp.a11y.speak( api.Menus.data.l10n.reorderModeOff );
+			}
 
 			if ( showOrHide ) {
 				_( this.getMenuItemControls() ).each( function( formControl ) {
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index 600fe158f4..ae7e3f30b0 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -1450,10 +1450,11 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 		<button type="button" class="button-secondary add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
 			<?php _e( 'Add Items' ); ?>
 		</button>
-		<button type="button" class="not-a-button reorder-toggle">
-			<span class="reorder"><?php _ex( 'Reorder', 'Reorder menu items in Customizer' ); ?></span>
-			<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering menu items in Customizer' ); ?></span>
+		<button type="button" role="presentation" class="not-a-button reorder-toggle" tabindex="-1">
+			<span class="reorder" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc"><?php _ex( 'Reorder', 'Reorder menu items in Customizer' ); ?></span>
+			<span class="reorder-done" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Close reorder mode' ); ?>"><?php _ex( 'Done', 'Cancel reordering menu items in Customizer' ); ?></span>
 		</button>
+		<p class="screen-reader-text" id="reorder-items-desc"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
 		<span class="add-menu-item-loading spinner"></span>
 		<span class="menu-delete-item">
 			<button type="button" class="not-a-button menu-delete">
diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php
index fa496fda64..3d9e60f565 100644
--- a/src/wp-includes/class-wp-customize-nav-menus.php
+++ b/src/wp-includes/class-wp-customize-nav-menus.php
@@ -305,6 +305,8 @@ final class WP_Customize_Nav_Menus {
 				'itemsFound'        => __( 'Number of items found: %d' ),
 				'itemsFoundMore'    => __( 'Additional items found: %d' ),
 				'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
+				'reorderModeOn'     => __( 'Reorder mode enabled' ),
+				'reorderModeOff'    => __( 'Reorder mode closed' ),
 			),
 			'menuItemTransport'    => 'postMessage',
 			'phpIntMax'            => PHP_INT_MAX,