WordPress.org

Make WordPress Core

Changeset 46240


Ignore:
Timestamp:
09/23/2019 12:41:14 PM (2 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/lib/nav-menu.js

    r45869 r46240  
    209209                        api.addItemToMenu(menuItems, processMethod, function(){
    210210                            // Deselect the items and hide the ajax spinner
    211                             checkboxes.removeAttr('checked');
     211                            checkboxes.prop( 'checked', false );
     212                            t.find( '.button-controls .select-all' ).prop( 'checked', false );
    212213                            t.find( '.button-controls .spinner' ).removeClass( 'is-active' );
    213214                        });
     
    10621063        attachTabsPanelListeners : function() {
    10631064            $('#menu-settings-column').bind('click', function(e) {
    1064                 var selectAreaMatch, panelId, wrapper, items,
     1065                var selectAreaMatch, selectAll, panelId, wrapper, items,
    10651066                    target = $(e.target);
    10661067
     
    10721073
    10731074                    // upon changing tabs, we want to uncheck all checkboxes
    1074                     $('input', wrapper).removeAttr('checked');
     1075                    $( 'input', wrapper ).prop( 'checked', false );
    10751076
    10761077                    $('.tabs-panel-active', wrapper).removeClass('tabs-panel-active').addClass('tabs-panel-inactive');
     
    10911092
    10921093                    e.preventDefault();
    1093                 } else if ( target.hasClass('select-all') ) {
    1094                     selectAreaMatch = /#(.*)$/.exec(e.target.href);
    1095                     if ( selectAreaMatch && selectAreaMatch[1] ) {
    1096                         items = $('#' + selectAreaMatch[1] + ' .tabs-panel-active .menu-item-title input');
    1097                         if( items.length === items.filter(':checked').length )
    1098                             items.removeAttr('checked');
    1099                         else
    1100                             items.prop('checked', true);
    1101                         return false;
     1094                } else if ( target.hasClass( 'select-all' ) ) {
     1095                    selectAreaMatch = target.closest( '.button-controls' ).data( 'items-type' );
     1096                    if ( selectAreaMatch ) {
     1097                        items = $( '#' + selectAreaMatch + ' .tabs-panel-active .menu-item-title input' );
     1098
     1099                        if ( items.length === items.filter( ':checked' ).length && ! target.is( ':checked' ) ) {
     1100                            items.prop( 'checked', false );
     1101                        } else if ( target.is( ':checked' ) ) {
     1102                            items.prop( 'checked', true );
     1103                        }
     1104                    }
     1105                } else if ( target.hasClass( 'menu-item-checkbox' ) ) {
     1106                    selectAreaMatch = target.closest( '.tabs-panel-active' ).parent().attr( 'id' );
     1107                    if ( selectAreaMatch ) {
     1108                        items     = $( '#' + selectAreaMatch + ' .tabs-panel-active .menu-item-title input' );
     1109                        selectAll = $( '.button-controls[data-items-type="' + selectAreaMatch + '"] .select-all' );
     1110
     1111                        if ( items.length === items.filter( ':checked' ).length && ! selectAll.is( ':checked' ) ) {
     1112                            selectAll.prop( 'checked', true );
     1113                        } else if ( selectAll.is( ':checked' ) ) {
     1114                            selectAll.prop( 'checked', false );
     1115                        }
    11021116                    }
    11031117                } else if ( target.hasClass('submit-add-to-menu') ) {
     
    12271241            $items = $('<div>').html(resp).find('li'),
    12281242            wrapper = panel.closest( '.accordion-section-content' ),
     1243            selectAll = wrapper.find( '.button-controls .select-all' ),
    12291244            $item;
    12301245
     
    12611276            $( '.spinner', panel ).removeClass( 'is-active' );
    12621277            wrapper.removeClass( 'has-no-menu-item' );
     1278
     1279            if ( selectAll.is( ':checked' ) ) {
     1280                selectAll.prop( 'checked', false );
     1281            }
    12631282        },
    12641283
  • trunk/src/wp-admin/includes/nav-menu.php

    r45932 r46240  
    594594                $checkbox_items = walk_nav_menu_tree( array_map( 'wp_setup_nav_menu_item', $posts ), 0, (object) $args );
    595595
    596                 if ( 'all' == $current_tab && ! empty( $_REQUEST['selectall'] ) ) {
    597                     $checkbox_items = preg_replace( '/(type=(.)checkbox(\2))/', '$1 checked=$2checked$2', $checkbox_items );
    598 
    599                 }
    600 
    601596                echo $checkbox_items;
    602597                ?>
     
    609604        </div><!-- /.tabs-panel -->
    610605
    611         <p class="button-controls wp-clearfix">
    612             <span class="list-controls">
    613                 <a href="
    614                 <?php
    615                     echo esc_url(
    616                         add_query_arg(
    617                             array(
    618                                 $post_type_name . '-tab' => 'all',
    619                                 'selectall'              => 1,
    620                             ),
    621                             remove_query_arg( $removed_args )
    622                         )
    623                     );
    624                 ?>
    625                 #posttype-<?php echo $post_type_name; ?>" class="select-all aria-button-if-js"><?php _e( 'Select All' ); ?></a>
     606        <p class="button-controls wp-clearfix" data-items-type="posttype-<?php echo esc_attr( $post_type_name ); ?>">
     607            <span class="list-controls hide-if-no-js">
     608                <input type="checkbox" id="<?php echo esc_attr( $post_type_name . '-tab' ); ?>" class="select-all" />
     609                <label for="<?php echo esc_attr( $post_type_name . '-tab' ); ?>"><?php _e( 'Select All' ); ?></label>
    626610            </span>
    627611
     
    849833        </div><!-- /.tabs-panel -->
    850834
    851         <p class="button-controls wp-clearfix">
    852             <span class="list-controls">
    853                 <a href="
    854                 <?php
    855                     echo esc_url(
    856                         add_query_arg(
    857                             array(
    858                                 $taxonomy_name . '-tab' => 'all',
    859                                 'selectall'             => 1,
    860                             ),
    861                             remove_query_arg( $removed_args )
    862                         )
    863                     );
    864                 ?>
    865                 #taxonomy-<?php echo $taxonomy_name; ?>" class="select-all aria-button-if-js"><?php _e( 'Select All' ); ?></a>
     835        <p class="button-controls wp-clearfix" data-items-type="taxonomy-<?php echo esc_attr( $taxonomy_name ); ?>">
     836            <span class="list-controls hide-if-no-js">
     837                <input type="checkbox" id="<?php echo esc_attr( $taxonomy_name . '-tab' ); ?>" class="select-all" />
     838                <label for="<?php echo esc_attr( $taxonomy_name . '-tab' ); ?>"><?php _e( 'Select All' ); ?></label>
    866839            </span>
    867840
Note: See TracChangeset for help on using the changeset viewer.