Customizer: Improve descriptive text and focus for menu items reorder button.

props afercia.
fixes #32725.
Built from https://develop.svn.wordpress.org/trunk@33074


git-svn-id: http://core.svn.wordpress.org/trunk@33045 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-nav-menus-rtl.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;
 }
 

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;
 }
 

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 ) {