Skip to content

Commit

Permalink
Administration: Make checkbox column clickable.
Browse files Browse the repository at this point in the history 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@55954 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@joedolson
joedolson committed Jun 21, 2023
1 parent c71fad7 commit 0b69111
Show file tree
Hide file tree
Showing 14 changed files with 65 additions and 17 deletions.
22 changes: 22 additions & 0 deletions src/wp-admin/css/list-tables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,6 +552,28 @@ th.asc a:focus span.sorting-indicator:before {
content: "\f142";
}

.check-column {
position: relative;
}

.check-column .label-covers-full-cell {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

.check-column .label-covers-full-cell input {
position: relative;
z-index: 1;
}

.check-column .label-covers-full-cell:hover + input {
box-shadow: 0 0 0 1px #2271b1;
}

.locked-indicator {
display: none;
margin-left: 6px;
Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-comments-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -884,11 +884,13 @@ public function column_cb( $item ) {

if ( $this->user_can ) {
?>
<label class="screen-reader-text" for="cb-select-<?php echo $comment->comment_ID; ?>">
<label class="label-covers-full-cell" for="cb-select-<?php echo $comment->comment_ID; ?>">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Select comment' );
?>
</span>
</label>
<input id="cb-select-<?php echo $comment->comment_ID; ?>" type="checkbox" name="delete_comments[]" value="<?php echo $comment->comment_ID; ?>" />
<?php
Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-links-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,11 +174,13 @@ public function column_cb( $item ) {
$link = $item;

?>
<label class="screen-reader-text" for="cb-select-<?php echo $link->link_id; ?>">
<label class="label-covers-full-cell" for="cb-select-<?php echo $link->link_id; ?>">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. %s: Link name. */
printf( __( 'Select %s' ), $link->link_name );
?>
</span>
</label>
<input type="checkbox" name="linkcheck[]" id="cb-select-<?php echo $link->link_id; ?>" value="<?php echo esc_attr( $link->link_id ); ?>" />
<?php
Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1306,9 +1306,11 @@ public function print_column_headers( $with_id = true ) {

if ( ! empty( $columns['cb'] ) ) {
static $cb_counter = 1;
$columns['cb'] = '<label class="screen-reader-text" for="cb-select-all-' . $cb_counter . '">' .
$columns['cb'] = '<label class="label-covers-full-cell" for="cb-select-all-' . $cb_counter . '">' .
'<span class="screen-reader-text">' .
/* translators: Hidden accessibility text. */
__( 'Select All' ) .
'</span>' .
'</label>' .
'<input id="cb-select-all-' . $cb_counter . '" type="checkbox" />';
$cb_counter++;
Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-media-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,11 +411,13 @@ public function column_cb( $item ) {

if ( current_user_can( 'edit_post', $post->ID ) ) {
?>
<label class="screen-reader-text" for="cb-select-<?php echo $post->ID; ?>">
<label class="label-covers-full-cell" for="cb-select-<?php echo $post->ID; ?>">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. %s: Attachment title. */
printf( __( 'Select %s' ), _draft_or_post_title() );
?>
</span>
</label>
<input type="checkbox" name="media[]" id="cb-select-<?php echo $post->ID; ?>" value="<?php echo $post->ID; ?>" />
<?php
Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-ms-sites-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,11 +411,13 @@ public function column_cb( $item ) {
if ( ! is_main_site( $blog['blog_id'] ) ) :
$blogname = untrailingslashit( $blog['domain'] . $blog['path'] );
?>
<label class="screen-reader-text" for="blog_<?php echo $blog['blog_id']; ?>">
<label class="label-covers-full-cell" for="blog_<?php echo $blog['blog_id']; ?>">
<span class="screen-reader-text">
<?php
/* translators: %s: Site URL. */
printf( __( 'Select %s' ), $blogname );
?>
</span>
</label>
<input type="checkbox" id="blog_<?php echo $blog['blog_id']; ?>" name="allblogs[]"
value="<?php echo esc_attr( $blog['blog_id'] ); ?>" />
Expand Down
6 changes: 4 additions & 2 deletions src/wp-admin/includes/class-wp-ms-themes-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -512,16 +512,18 @@ public function column_cb( $item ) {
$theme = $item;
$checkbox_id = 'checkbox_' . md5( $theme->get( 'Name' ) );
?>
<input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
<label class="screen-reader-text" for="<?php echo $checkbox_id; ?>" >
<label class="label-covers-full-cell" for="<?php echo $checkbox_id; ?>" >
<span class="screen-reader-text">
<?php
printf(
/* translators: Hidden accessibility text. %s: Theme name */
__( 'Select %s' ),
$theme->display( 'Name' )
);
?>
</span>
</label>
<input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
<?php
}

Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-ms-users-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,11 +235,13 @@ public function column_cb( $item ) {
return;
}
?>
<label class="screen-reader-text" for="blog_<?php echo $user->ID; ?>">
<label class="label-covers-full-cell" for="blog_<?php echo $user->ID; ?>">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. %s: User login. */
printf( __( 'Select %s' ), $user->user_login );
?>
</span>
</label>
<input type="checkbox" id="blog_<?php echo $user->ID; ?>" name="allusers[]" value="<?php echo esc_attr( $user->ID ); ?>" />
<?php
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/includes/class-wp-plugins-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -982,7 +982,7 @@ public function single_row( $item ) {
$checkbox = '';
} else {
$checkbox = sprintf(
'<label class="screen-reader-text" for="%1$s">%2$s</label>' .
'<label class="label-covers-full-cell" for="%1$s"><span class="screen-reader-text">%2$s</span></label>' .
'<input type="checkbox" name="checked[]" value="%3$s" id="%1$s" />',
$checkbox_id,
/* translators: Hidden accessibility text. %s: Plugin name. */
Expand Down
4 changes: 3 additions & 1 deletion src/wp-admin/includes/class-wp-posts-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1012,11 +1012,13 @@ public function column_cb( $item ) {
*/
if ( apply_filters( 'wp_list_table_show_post_checkbox', $show, $post ) ) :
?>
<label class="screen-reader-text" for="cb-select-<?php the_ID(); ?>">
<label class="label-covers-full-cell" for="cb-select-<?php the_ID(); ?>">
<span class="screen-reader-text">
<?php
/* translators: %s: Post title. */
printf( __( 'Select %s' ), _draft_or_post_title() );
?>
</span>
</label>
<input id="cb-select-<?php the_ID(); ?>" type="checkbox" name="post[]" value="<?php the_ID(); ?>" />
<div class="locked-indicator">
Expand Down
8 changes: 7 additions & 1 deletion src/wp-admin/includes/class-wp-privacy-requests-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,13 @@ public function prepare_items() {
* @return string Checkbox column markup.
*/
public function column_cb( $item ) {
return sprintf( '<input type="checkbox" name="request_id[]" value="%1$s" /><span class="spinner"></span>', esc_attr( $item->ID ) );
return sprintf(
'<label class="label-covers-full-cell" for="requester_%1$s"><span class="screen-reader-text">%2$s</span></label>' .
'<input type="checkbox" name="request_id[]" id="requester_%1$s" value="%1$s" /><span class="spinner"></span>',
esc_attr( $item->ID ),
/* translators: Hidden accessibility text. %s: Email address. */
sprintf( __( 'Select %s' ), $item->email )
);
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/includes/class-wp-terms-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@ public function column_cb( $item ) {

if ( current_user_can( 'delete_term', $tag->term_id ) ) {
return sprintf(
'<label class="screen-reader-text" for="cb-select-%1$s">%2$s</label>' .
'<label class="label-covers-full-cell" for="cb-select-%1$s"><span class="screen-reader-text">%2$s</span></label>' .
'<input type="checkbox" name="delete_tags[]" value="%1$s" id="cb-select-%1$s" />',
$tag->term_id,
/* translators: Hidden accessibility text. %s: Taxonomy term name. */
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/includes/class-wp-users-list-table.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,7 +523,7 @@ public function single_row( $user_object, $style = '', $role = '', $numposts = 0

// Set up the checkbox (because the user is editable, otherwise it's empty).
$checkbox = sprintf(
'<label class="screen-reader-text" for="user_%1$s">%2$s</label>' .
'<label class="label-covers-full-cell" for="user_%1$s"><span class="screen-reader-text">%2$s</span></label>' .
'<input type="checkbox" name="users[]" id="user_%1$s" class="%3$s" value="%1$s" />',
$user_object->ID,
/* translators: Hidden accessibility text. %s: User login. */
Expand Down
12 changes: 8 additions & 4 deletions src/wp-admin/update-core.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,13 +571,15 @@ function list_plugin_updates() {
<tr>
<td class="check-column">
<?php if ( $compatible_php ) : ?>
<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
<label for="<?php echo $checkbox_id; ?>" class="screen-reader-text">
<label for="<?php echo $checkbox_id; ?>" class="label-covers-full-cell">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. %s: Plugin name. */
printf( __( 'Select %s' ), $plugin_data->Name );
?>
</span>
</label>
<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
<?php endif; ?>
</td>
<td class="plugin-title"><p>
Expand Down Expand Up @@ -745,13 +747,15 @@ function list_theme_updates() {
<tr>
<td class="check-column">
<?php if ( $compatible_wp && $compatible_php ) : ?>
<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
<label for="<?php echo $checkbox_id; ?>" class="screen-reader-text">
<label for="<?php echo $checkbox_id; ?>" class="label-covers-full-cell">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. %s: Theme name. */
printf( __( 'Select %s' ), $theme->display( 'Name' ) );
?>
</span>
</label>
<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
<?php endif; ?>
</td>
<td class="plugin-title"><p>
Expand Down

0 comments on commit 0b69111

Please sign in to comment.