Accessibility: Improve the Menus post type meta boxes pagination links.

- adds hidden text to the pagination links
- slightly increases the links clickable area
- fixes a JS error when clicking on the current page number
- avoids to generate nested `<div>` elements at each click 

Props xavortm, cwpnolen, afercia.

Fixes #35577.

Built from https://develop.svn.wordpress.org/trunk@38981


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

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

@@ -693,10 +693,19 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 }
 
 .add-menu-item-pagelinks {
-	margin: .5em auto;
+	margin: .5em -10px;
 	text-align: center;
 }
 
+.add-menu-item-pagelinks .page-numbers {
+	display: inline-block;
+	min-width: 20px;
+}
+
+.add-menu-item-pagelinks .page-numbers.dots {
+	min-width: 0;
+}
+
 .link-to-original {
 	display: block;
 	margin: 0 0 15px;

wp-admin/css/nav-menus.css

@@ -693,10 +693,19 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 }
 
 .add-menu-item-pagelinks {
-	margin: .5em auto;
+	margin: .5em -10px;
 	text-align: center;
 }
 
+.add-menu-item-pagelinks .page-numbers {
+	display: inline-block;
+	min-width: 20px;
+}
+
+.add-menu-item-pagelinks .page-numbers.dots {
+	min-width: 0;
+}
+
 .link-to-original {
 	display: block;
 	margin: 0 0 15px;

wp-admin/includes/nav-menu.php

@@ -358,9 +358,10 @@ function wp_nav_menu_item_post_type_meta_box( $object, $box ) {
 			)
 		),
 		'format' => '',
-		'prev_text' => __('«'),
+		'prev_text'          => '<span aria-label="' . esc_attr__( 'Previous page' ) . '">' . __( '&laquo;' ) . '</span>',
-		'next_text' => __('&raquo;'),
+		'next_text'          => '<span aria-label="' . esc_attr__( 'Next page' ) . '">' . __( '&raquo;' ) . '</span>',
-		'total' => $num_pages,
+		'before_page_number' => '<span class="screen-reader-text">' . __( 'Page' ) . '</span> ',
+		'total'   => $num_pages,
 		'current' => $pagenum
 	));
 
@@ -642,9 +643,10 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $box ) {
 			)
 		),
 		'format' => '',
-		'prev_text' => __('&laquo;'),
+		'prev_text'          => '<span aria-label="' . esc_attr__( 'Previous page' ) . '">' . __( '&laquo;' ) . '</span>',
-		'next_text' => __('&raquo;'),
+		'next_text'          => '<span aria-label="' . esc_attr__( 'Next page' ) . '">' . __( '&raquo;' ) . '</span>',
-		'total' => $num_pages,
+		'before_page_number' => '<span class="screen-reader-text">' . __( 'Page' ) . '</span> ',
+		'total'   => $num_pages,
 		'current' => $pagenum
 	));
 

wp-admin/js/nav-menu.js

@@ -1089,35 +1089,39 @@ var wpNavMenu;
 					else if ( e.target.id && -1 != e.target.id.indexOf('submit-') )
 						$('#' + e.target.id.replace(/submit-/, '')).addSelectedToMenu( api.addMenuItemToBottom );
 					return false;
-				} else if ( target.hasClass('page-numbers') ) {
-					$.post( ajaxurl, e.target.href.replace(/.*\?/, '').replace(/action=([^&]*)/, '') + '&action=menu-get-metabox',
-						function( resp ) {
-							if ( -1 == resp.indexOf('replace-id') )
-								return;
-
-							var metaBoxData = $.parseJSON(resp),
-							toReplace = document.getElementById(metaBoxData['replace-id']),
-							placeholder = document.createElement('div'),
-							wrap = document.createElement('div');
-
-							if ( ! metaBoxData.markup || ! toReplace )
-								return;
-
-							wrap.innerHTML = metaBoxData.markup ? metaBoxData.markup : '';
-
-							toReplace.parentNode.insertBefore( placeholder, toReplace );
-							placeholder.parentNode.removeChild( toReplace );
-
-							placeholder.parentNode.insertBefore( wrap, placeholder );
-
-							placeholder.parentNode.removeChild( placeholder );
-
-						}
-					);
-
-					return false;
 				}
 			});
+
+			/*
+			 * Delegate the `click` event and attach it just to the pagination
+			 * links thus excluding the current page `<span>`. See ticket #35577.
+			 */
+			$( '#nav-menu-meta' ).on( 'click', 'a.page-numbers', function() {
+				var $container = $( this ).closest( '.inside' );
+
+				$.post( ajaxurl, this.href.replace( /.*\?/, '' ).replace( /action=([^&]*)/, '' ) + '&action=menu-get-metabox',
+					function( resp ) {
+						var metaBoxData = $.parseJSON( resp ),
+							toReplace;
+
+						if ( -1 === resp.indexOf( 'replace-id' ) ) {
+							return;
+						}
+
+						// Get the post type menu meta box to update.
+						toReplace = document.getElementById( metaBoxData['replace-id'] );
+
+						if ( ! metaBoxData.markup || ! toReplace ) {
+							return;
+						}
+
+						// Update the post type menu meta box with new content from the response.
+						$container.html( metaBoxData.markup );
+					}
+				);
+
+				return false;
+			});
 		},
 
 		eventOnClickEditLink : function(clickedEl) {

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-alpha-38980';
+$wp_version = '4.7-alpha-38981';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.