WordPress.org
Get WordPress

Make WordPress Core

Changeset 55954


Ignore:
Timestamp:
06/21/2023 01:52:16 AM (3 years ago)
Author:
joedolson
Message:

Administration: Make checkbox column clickable.

Change the label for .check-column inside list tables to a block filling the entire cell. Improves accessibility by increasing the target area for the control.

Props mitchoyoshitaka, lessbloat, sabernhardt, ogleker, tacoverdo, joostdevalk, karmatosed.

Fixes #21516.

Location:
trunk/src/wp-admin
Files:
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/list-tables.css

    r54871 r55954  
    553553}
    554554
     555.check-column {
     556        position: relative;
     557}
     558
     559.check-column .label-covers-full-cell {
     560        width: 100%;
     561        height: 100%;
     562        display: block;
     563        position: absolute;
     564        top: 0;
     565        left: 0;
     566}
     567
     568.check-column .label-covers-full-cell input {
     569        position: relative;
     570        z-index: 1;
     571}
     572
     573.check-column .label-covers-full-cell:hover + input {
     574        box-shadow: 0 0 0 1px #2271b1;
     575}
     576
    555577.locked-indicator {
    556578        display: none;

  • trunk/src/wp-admin/includes/class-wp-comments-list-table.php

    r55749 r55954  
    885885                if ( $this->user_can ) {
    886886                        ?>
    887                 <label class="screen-reader-text" for="cb-select-<?php echo $comment->comment_ID; ?>">
     887                <label class="label-covers-full-cell" for="cb-select-<?php echo $comment->comment_ID; ?>">
     888                        <span class="screen-reader-text">
    888889                        <?php
    889890                        /* translators: Hidden accessibility text. */
    890891                        _e( 'Select comment' );
    891892                        ?>
     893                        </span>
    892894                </label>
    893895                <input id="cb-select-<?php echo $comment->comment_ID; ?>" type="checkbox" name="delete_comments[]" value="<?php echo $comment->comment_ID; ?>" />

  • trunk/src/wp-admin/includes/class-wp-links-list-table.php

    r55911 r55954  
    175175
    176176                ?>
    177                 <label class="screen-reader-text" for="cb-select-<?php echo $link->link_id; ?>">
     177                <label class="label-covers-full-cell" for="cb-select-<?php echo $link->link_id; ?>">
     178                        <span class="screen-reader-text">
    178179                        <?php
    179180                        /* translators: Hidden accessibility text. %s: Link name. */
    180181                        printf( __( 'Select %s' ), $link->link_name );
    181182                        ?>
     183                        </span>
    182184                </label>
    183185                <input type="checkbox" name="linkcheck[]" id="cb-select-<?php echo $link->link_id; ?>" value="<?php echo esc_attr( $link->link_id ); ?>" />

  • trunk/src/wp-admin/includes/class-wp-list-table.php

    r55911 r55954  
    13071307                if ( ! empty( $columns['cb'] ) ) {
    13081308                        static $cb_counter = 1;
    1309                         $columns['cb']     = '<label class="screen-reader-text" for="cb-select-all-' . $cb_counter . '">' .
     1309                        $columns['cb']     = '<label class="label-covers-full-cell" for="cb-select-all-' . $cb_counter . '">' .
     1310                                '<span class="screen-reader-text">' .
    13101311                                        /* translators: Hidden accessibility text. */
    13111312                                        __( 'Select All' ) .
     1313                                '</span>' .
    13121314                                '</label>' .
    13131315                                '<input id="cb-select-all-' . $cb_counter . '" type="checkbox" />';

  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r55949 r55954  
    412412                if ( current_user_can( 'edit_post', $post->ID ) ) {
    413413                        ?>
    414                         <label class="screen-reader-text" for="cb-select-<?php echo $post->ID; ?>">
     414                        <label class="label-covers-full-cell" for="cb-select-<?php echo $post->ID; ?>">
     415                                <span class="screen-reader-text">
    415416                                <?php
    416417                                /* translators: Hidden accessibility text. %s: Attachment title. */
    417418                                printf( __( 'Select %s' ), _draft_or_post_title() );
    418419                                ?>
     420                                </span>
    419421                        </label>
    420422                        <input type="checkbox" name="media[]" id="cb-select-<?php echo $post->ID; ?>" value="<?php echo $post->ID; ?>" />

  • trunk/src/wp-admin/includes/class-wp-ms-sites-list-table.php

    r55911 r55954  
    412412                        $blogname = untrailingslashit( $blog['domain'] . $blog['path'] );
    413413                        ?>
    414                         <label class="screen-reader-text" for="blog_<?php echo $blog['blog_id']; ?>">
     414                        <label class="label-covers-full-cell" for="blog_<?php echo $blog['blog_id']; ?>">
     415                                <span class="screen-reader-text">
    415416                                <?php
    416417                                /* translators: %s: Site URL. */
    417418                                printf( __( 'Select %s' ), $blogname );
    418419                                ?>
     420                                </span>
    419421                        </label>
    420422                        <input type="checkbox" id="blog_<?php echo $blog['blog_id']; ?>" name="allblogs[]"

  • trunk/src/wp-admin/includes/class-wp-ms-themes-list-table.php

    r55732 r55954  
    513513                $checkbox_id = 'checkbox_' . md5( $theme->get( 'Name' ) );
    514514                ?>
    515                 <input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
    516                 <label class="screen-reader-text" for="<?php echo $checkbox_id; ?>" >
     515                <label class="label-covers-full-cell" for="<?php echo $checkbox_id; ?>" >
     516                        <span class="screen-reader-text">
    517517                        <?php
    518518                        printf(
    … …  
    522522                        );
    523523                        ?>
     524                        </span>
    524525                </label>
     526                <input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
    525527                <?php
    526528        }

  • trunk/src/wp-admin/includes/class-wp-ms-users-list-table.php

    r55732 r55954  
    236236                }
    237237                ?>
    238                 <label class="screen-reader-text" for="blog_<?php echo $user->ID; ?>">
     238                <label class="label-covers-full-cell" for="blog_<?php echo $user->ID; ?>">
     239                        <span class="screen-reader-text">
    239240                        <?php
    240241                        /* translators: Hidden accessibility text. %s: User login. */
    241242                        printf( __( 'Select %s' ), $user->user_login );
    242243                        ?>
     244                        </span>
    243245                </label>
    244246                <input type="checkbox" id="blog_<?php echo $user->ID; ?>" name="allusers[]" value="<?php echo esc_attr( $user->ID ); ?>" />

  • trunk/src/wp-admin/includes/class-wp-plugins-list-table.php

    r55903 r55954  
    983983                } else {
    984984                        $checkbox = sprintf(
    985                                 '<label class="screen-reader-text" for="%1$s">%2$s</label>' .
     985                                '<label class="label-covers-full-cell" for="%1$s"><span class="screen-reader-text">%2$s</span></label>' .
    986986                                '<input type="checkbox" name="checked[]" value="%3$s" id="%1$s" />',
    987987                                $checkbox_id,

  • trunk/src/wp-admin/includes/class-wp-posts-list-table.php

    r55911 r55954  
    10131013                if ( apply_filters( 'wp_list_table_show_post_checkbox', $show, $post ) ) :
    10141014                        ?>
    1015                         <label class="screen-reader-text" for="cb-select-<?php the_ID(); ?>">
     1015                        <label class="label-covers-full-cell" for="cb-select-<?php the_ID(); ?>">
     1016                                <span class="screen-reader-text">
    10161017                                <?php
    10171018                                        /* translators: %s: Post title. */
    10181019                                        printf( __( 'Select %s' ), _draft_or_post_title() );
    10191020                                ?>
     1021                                </span>
    10201022                        </label>
    10211023                        <input id="cb-select-<?php the_ID(); ?>" type="checkbox" name="post[]" value="<?php the_ID(); ?>" />

  • trunk/src/wp-admin/includes/class-wp-privacy-requests-table.php

    r55911 r55954  
    416416         */
    417417        public function column_cb( $item ) {
    418                 return sprintf( '<input type="checkbox" name="request_id[]" value="%1$s" /><span class="spinner"></span>', esc_attr( $item->ID ) );
     418                return sprintf(
     419                        '<label class="label-covers-full-cell" for="requester_%1$s"><span class="screen-reader-text">%2$s</span></label>' .
     420                        '<input type="checkbox" name="request_id[]" id="requester_%1$s" value="%1$s" /><span class="spinner"></span>',
     421                        esc_attr( $item->ID ),
     422                        /* translators: Hidden accessibility text. %s: Email address. */
     423                        sprintf( __( 'Select %s' ), $item->email )
     424                );
    419425        }
    420426

  • trunk/src/wp-admin/includes/class-wp-terms-list-table.php

    r55732 r55954  
    358358                if ( current_user_can( 'delete_term', $tag->term_id ) ) {
    359359                        return sprintf(
    360                                 '<label class="screen-reader-text" for="cb-select-%1$s">%2$s</label>' .
     360                                '<label class="label-covers-full-cell" for="cb-select-%1$s"><span class="screen-reader-text">%2$s</span></label>' .
    361361                                '<input type="checkbox" name="delete_tags[]" value="%1$s" id="cb-select-%1$s" />',
    362362                                $tag->term_id,

  • trunk/src/wp-admin/includes/class-wp-users-list-table.php

    r55911 r55954  
    524524                        // Set up the checkbox (because the user is editable, otherwise it's empty).
    525525                        $checkbox = sprintf(
    526                                 '<label class="screen-reader-text" for="user_%1$s">%2$s</label>' .
     526                                '<label class="label-covers-full-cell" for="user_%1$s"><span class="screen-reader-text">%2$s</span></label>' .
    527527                                '<input type="checkbox" name="users[]" id="user_%1$s" class="%3$s" value="%1$s" />',
    528528                                $user_object->ID,

  • trunk/src/wp-admin/update-core.php

    r55917 r55954  
    572572                <td class="check-column">
    573573                        <?php if ( $compatible_php ) : ?>
    574                                 <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
    575                                 <label for="<?php echo $checkbox_id; ?>" class="screen-reader-text">
     574                                <label for="<?php echo $checkbox_id; ?>" class="label-covers-full-cell">
     575                                        <span class="screen-reader-text">
    576576                                        <?php
    577577                                        /* translators: Hidden accessibility text. %s: Plugin name. */
    578578                                        printf( __( 'Select %s' ), $plugin_data->Name );
    579579                                        ?>
     580                                        </span>
    580581                                </label>
     582                                <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
    581583                        <?php endif; ?>
    582584                </td>
    … …  
    746748                <td class="check-column">
    747749                        <?php if ( $compatible_wp && $compatible_php ) : ?>
    748                                 <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
    749                                 <label for="<?php echo $checkbox_id; ?>" class="screen-reader-text">
     750                                <label for="<?php echo $checkbox_id; ?>" class="label-covers-full-cell">
     751                                        <span class="screen-reader-text">
    750752                                        <?php
    751753                                        /* translators: Hidden accessibility text. %s: Theme name. */
    752754                                        printf( __( 'Select %s' ), $theme->display( 'Name' ) );
    753755                                        ?>
     756                                        </span>
    754757                                </label>
     758                                <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
    755759                        <?php endif; ?>
    756760                </td>
Note: See TracChangeset for help on using the changeset viewer.