Changeset 46240

Timestamp:

09/23/2019 12:41:14 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Menus: Improve the menu items "Select All".

• changes "Select All" from a link to a checkbox
• the new checkbox is available only when JavaScript support is on
• semantically and for accessibility, a checkbox is a better user interface control because the available action is clear to all users and the selected state is communicated natively
• it's consistent with the existing pattern for the admin tables

Props birgire, audrasjb, afercia.
Fixes #47048.

Location:

trunk/src

Files:

• js/_enqueues/lib/nav-menu.js (modified) (6 diffs)
• wp-admin/includes/nav-menu.php (modified) (3 diffs)

trunk/src/js/_enqueues/lib/nav-menu.js

@@ -209 +209 @@
                         api.addItemToMenu(menuItems, processMethod, function(){
                             // Deselect the items and hide the ajax spinner
-                            checkboxes.removeAttr('checked');
+                            checkboxes.prop( 'checked', false );
+                            t.find( '.button-controls .select-all' ).prop( 'checked', false );
                             t.find( '.button-controls .spinner' ).removeClass( 'is-active' );
                         });
@@ -1062 +1063 @@
         attachTabsPanelListeners : function() {
             $('#menu-settings-column').bind('click', function(e) {
-                var selectAreaMatch, panelId, wrapper, items,
+                var selectAreaMatch, selectAll, panelId, wrapper, items,
                     target = $(e.target);
 
@@ -1072 +1073 @@
 
                     // upon changing tabs, we want to uncheck all checkboxes
-                    $('input', wrapper).removeAttr('checked');
+                    $( 'input', wrapper ).prop( 'checked', false );
 
                     $('.tabs-panel-active', wrapper).removeClass('tabs-panel-active').addClass('tabs-panel-inactive');
@@ -1091 +1092 @@
 
                     e.preventDefault();
-                } else if ( target.hasClass('select-all') ) {
-                    selectAreaMatch = /#(.*)$/.exec(e.target.href);
-                    if ( selectAreaMatch && selectAreaMatch[1] ) {
-                        items = $('#' + selectAreaMatch[1] + ' .tabs-panel-active .menu-item-title input');
-                        if( items.length === items.filter(':checked').length )
-                            items.removeAttr('checked');
-                        else
-                            items.prop('checked', true);
-                        return false;
+                } else if ( target.hasClass( 'select-all' ) ) {
+                    selectAreaMatch = target.closest( '.button-controls' ).data( 'items-type' );
+                    if ( selectAreaMatch ) {
+                        items = $( '#' + selectAreaMatch + ' .tabs-panel-active .menu-item-title input' );
+
+                        if ( items.length === items.filter( ':checked' ).length && ! target.is( ':checked' ) ) {
+                            items.prop( 'checked', false );
+                        } else if ( target.is( ':checked' ) ) {
+                            items.prop( 'checked', true );
+                        }
+                    }
+                } else if ( target.hasClass( 'menu-item-checkbox' ) ) {
+                    selectAreaMatch = target.closest( '.tabs-panel-active' ).parent().attr( 'id' );
+                    if ( selectAreaMatch ) {
+                        items     = $( '#' + selectAreaMatch + ' .tabs-panel-active .menu-item-title input' );
+                        selectAll = $( '.button-controls[data-items-type="' + selectAreaMatch + '"] .select-all' );
+
+                        if ( items.length === items.filter( ':checked' ).length && ! selectAll.is( ':checked' ) ) {
+                            selectAll.prop( 'checked', true );
+                        } else if ( selectAll.is( ':checked' ) ) {
+                            selectAll.prop( 'checked', false );
+                        }
                     }
                 } else if ( target.hasClass('submit-add-to-menu') ) {
@@ -1227 +1241 @@
             $items = $('<div>').html(resp).find('li'),
             wrapper = panel.closest( '.accordion-section-content' ),
+            selectAll = wrapper.find( '.button-controls .select-all' ),
             $item;
 
@@ -1261 +1276 @@
             $( '.spinner', panel ).removeClass( 'is-active' );
             wrapper.removeClass( 'has-no-menu-item' );
+
+            if ( selectAll.is( ':checked' ) ) {
+                selectAll.prop( 'checked', false );
+            }
         },
 

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

@@ -594 +594 @@
                 $checkbox_items = walk_nav_menu_tree( array_map( 'wp_setup_nav_menu_item', $posts ), 0, (object) $args );
 
-                if ( 'all' == $current_tab && ! empty( $_REQUEST['selectall'] ) ) {
-                    $checkbox_items = preg_replace( '/(type=(.)checkbox(\2))/', '$1 checked=$2checked$2', $checkbox_items );
-
-                }
-
                 echo $checkbox_items;
                 ?>
@@ -609 +604 @@
         </div><!-- /.tabs-panel -->
 
-        <p class="button-controls wp-clearfix">
-            <span class="list-controls">
-                <a href="
-                <?php
-                    echo esc_url(
-                        add_query_arg(
-                            array(
-                                $post_type_name . '-tab' => 'all',
-                                'selectall'              => 1,
-                            ),
-                            remove_query_arg( $removed_args )
-                        )
-                    );
-                ?>
-                #posttype-<?php echo $post_type_name; ?>" class="select-all aria-button-if-js"><?php _e( 'Select All' ); ?></a>
+        <p class="button-controls wp-clearfix" data-items-type="posttype-<?php echo esc_attr( $post_type_name ); ?>">
+            <span class="list-controls hide-if-no-js">
+                <input type="checkbox" id="<?php echo esc_attr( $post_type_name . '-tab' ); ?>" class="select-all" />
+                <label for="<?php echo esc_attr( $post_type_name . '-tab' ); ?>"><?php _e( 'Select All' ); ?></label>
             </span>
 
@@ -849 +833 @@
         </div><!-- /.tabs-panel -->
 
-        <p class="button-controls wp-clearfix">
-            <span class="list-controls">
-                <a href="
-                <?php
-                    echo esc_url(
-                        add_query_arg(
-                            array(
-                                $taxonomy_name . '-tab' => 'all',
-                                'selectall'             => 1,
-                            ),
-                            remove_query_arg( $removed_args )
-                        )
-                    );
-                ?>
-                #taxonomy-<?php echo $taxonomy_name; ?>" class="select-all aria-button-if-js"><?php _e( 'Select All' ); ?></a>
+        <p class="button-controls wp-clearfix" data-items-type="taxonomy-<?php echo esc_attr( $taxonomy_name ); ?>">
+            <span class="list-controls hide-if-no-js">
+                <input type="checkbox" id="<?php echo esc_attr( $taxonomy_name . '-tab' ); ?>" class="select-all" />
+                <label for="<?php echo esc_attr( $taxonomy_name . '-tab' ); ?>"><?php _e( 'Select All' ); ?></label>
             </span>