From 0b6911113b42652ca6a1631448a0e0ae313d13e1 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Wed, 21 Jun 2023 01:52:16 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@55954 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/list-tables.css              | 22 +++++++++++++++++++
 .../includes/class-wp-comments-list-table.php |  4 +++-
 .../includes/class-wp-links-list-table.php    |  4 +++-
 src/wp-admin/includes/class-wp-list-table.php |  4 +++-
 .../includes/class-wp-media-list-table.php    |  4 +++-
 .../includes/class-wp-ms-sites-list-table.php |  4 +++-
 .../class-wp-ms-themes-list-table.php         |  6 +++--
 .../includes/class-wp-ms-users-list-table.php |  4 +++-
 .../includes/class-wp-plugins-list-table.php  |  2 +-
 .../includes/class-wp-posts-list-table.php    |  4 +++-
 .../class-wp-privacy-requests-table.php       |  8 ++++++-
 .../includes/class-wp-terms-list-table.php    |  2 +-
 .../includes/class-wp-users-list-table.php    |  2 +-
 src/wp-admin/update-core.php                  | 12 ++++++----
 14 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 00a6d8c4a055f..2976d2f9821e7 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -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;
diff --git a/src/wp-admin/includes/class-wp-comments-list-table.php b/src/wp-admin/includes/class-wp-comments-list-table.php
index 176b16718a1fb..c7dfcc61597e0 100644
--- a/src/wp-admin/includes/class-wp-comments-list-table.php
+++ b/src/wp-admin/includes/class-wp-comments-list-table.php
@@ -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
diff --git a/src/wp-admin/includes/class-wp-links-list-table.php b/src/wp-admin/includes/class-wp-links-list-table.php
index 17a7950fb5f7d..b6766294530bb 100644
--- a/src/wp-admin/includes/class-wp-links-list-table.php
+++ b/src/wp-admin/includes/class-wp-links-list-table.php
@@ -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
diff --git a/src/wp-admin/includes/class-wp-list-table.php b/src/wp-admin/includes/class-wp-list-table.php
index cd62ae4f31eb2..1e6a8ea505e9e 100644
--- a/src/wp-admin/includes/class-wp-list-table.php
+++ b/src/wp-admin/includes/class-wp-list-table.php
@@ -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++;
diff --git a/src/wp-admin/includes/class-wp-media-list-table.php b/src/wp-admin/includes/class-wp-media-list-table.php
index 870f36f3ae643..cbe419d920e5f 100644
--- a/src/wp-admin/includes/class-wp-media-list-table.php
+++ b/src/wp-admin/includes/class-wp-media-list-table.php
@@ -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
diff --git a/src/wp-admin/includes/class-wp-ms-sites-list-table.php b/src/wp-admin/includes/class-wp-ms-sites-list-table.php
index 6a1cf3a76303f..2416dd1f73042 100644
--- a/src/wp-admin/includes/class-wp-ms-sites-list-table.php
+++ b/src/wp-admin/includes/class-wp-ms-sites-list-table.php
@@ -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'] ); ?>" />
diff --git a/src/wp-admin/includes/class-wp-ms-themes-list-table.php b/src/wp-admin/includes/class-wp-ms-themes-list-table.php
index 8245b5a7e8dd6..d1d467f19e415 100644
--- a/src/wp-admin/includes/class-wp-ms-themes-list-table.php
+++ b/src/wp-admin/includes/class-wp-ms-themes-list-table.php
@@ -512,8 +512,8 @@ 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 */
@@ -521,7 +521,9 @@ public function column_cb( $item ) {
 				$theme->display( 'Name' )
 			);
 			?>
+			</span>
 		</label>
+		<input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
 		<?php
 	}
 
diff --git a/src/wp-admin/includes/class-wp-ms-users-list-table.php b/src/wp-admin/includes/class-wp-ms-users-list-table.php
index a97b507ffda2d..e1eec05cba15c 100644
--- a/src/wp-admin/includes/class-wp-ms-users-list-table.php
+++ b/src/wp-admin/includes/class-wp-ms-users-list-table.php
@@ -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
diff --git a/src/wp-admin/includes/class-wp-plugins-list-table.php b/src/wp-admin/includes/class-wp-plugins-list-table.php
index 2dcb495e40a8c..81e45cf258e4a 100644
--- a/src/wp-admin/includes/class-wp-plugins-list-table.php
+++ b/src/wp-admin/includes/class-wp-plugins-list-table.php
@@ -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. */
diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php
index 38498d4ec2b62..73f6194812b92 100644
--- a/src/wp-admin/includes/class-wp-posts-list-table.php
+++ b/src/wp-admin/includes/class-wp-posts-list-table.php
@@ -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">
diff --git a/src/wp-admin/includes/class-wp-privacy-requests-table.php b/src/wp-admin/includes/class-wp-privacy-requests-table.php
index 80345a466fdd9..cbc8c01892617 100644
--- a/src/wp-admin/includes/class-wp-privacy-requests-table.php
+++ b/src/wp-admin/includes/class-wp-privacy-requests-table.php
@@ -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 )
+		);
 	}
 
 	/**
diff --git a/src/wp-admin/includes/class-wp-terms-list-table.php b/src/wp-admin/includes/class-wp-terms-list-table.php
index 482a7afb254f6..0671f8580d9c4 100644
--- a/src/wp-admin/includes/class-wp-terms-list-table.php
+++ b/src/wp-admin/includes/class-wp-terms-list-table.php
@@ -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. */
diff --git a/src/wp-admin/includes/class-wp-users-list-table.php b/src/wp-admin/includes/class-wp-users-list-table.php
index cd1fc809fceb1..4c4d5a9f6dd77 100644
--- a/src/wp-admin/includes/class-wp-users-list-table.php
+++ b/src/wp-admin/includes/class-wp-users-list-table.php
@@ -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. */
diff --git a/src/wp-admin/update-core.php b/src/wp-admin/update-core.php
index 6090229f4a827..3145b505493d8 100644
--- a/src/wp-admin/update-core.php
+++ b/src/wp-admin/update-core.php
@@ -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>
@@ -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>