Changeset 38981

Timestamp:

10/27/2016 03:22:52 PM (10 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;
                         });
                 },