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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38981 602fd350-edb4-49c9-b593-d223f7449a82

src/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;

src/wp-admin/includes/nav-menu.php

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

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