Changeset 38981

Timestamp:

10/27/2016 03:22:52 PM (8 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/nav-menus.css (modified) (1 diff)
• includes/nav-menu.php (modified) (2 diffs)
• js/nav-menu.js (modified) (1 diff)

trunk/src/wp-admin/css/nav-menus.css

@@ -694 +694 @@
 
 .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;
 }
 

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

@@ -359 +359 @@
         ),
         '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
     ));
@@ -643 +644 @@
         ),
         '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
     ));

trunk/src/wp-admin/js/nav-menu.js

@@ -1090 +1090 @@
                         $('#' + 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 );
-
+                }
+            });
+
+            /*
+             * 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;
                         }
-                    );
-
-                    return false;
-                }
+
+                        // 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;
             });
         },