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.
Built from https://develop.svn.wordpress.org/trunk@55954


git-svn-id: http://core.svn.wordpress.org/trunk@55466 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson
2023-06-21 01:54:19 +00:00
parent 17749f1d23
commit 7a4251fae4
18 changed files with 90 additions and 20 deletions

View File

@@ -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>