WordPress.org
Get WordPress

Make WordPress Core

Changeset 55954


Ignore:
Timestamp:
06/21/2023 01:52:16 AM (18 months 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.