Make WordPress Core


Ignore:
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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.