Administration: Switch order of label/checkbox in WP_List_Table.

Move the label after the checkbox in `WP_List_Table` instances. Resolve a false positive that will be presented by automated accessibility testing tools. Follow up to [55954].

Props dimitrism, joedolson, sabernhardt, oglekler, marybaum, tobiasbg.
Fixes #58703.
Built from https://develop.svn.wordpress.org/trunk@56665


git-svn-id: http://core.svn.wordpress.org/trunk@56177 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2023-09-22 19:58:16 +00:00
parent 77582c4be9
commit 5d6106539e
18 changed files with 56 additions and 43 deletions

View File

@ -571,7 +571,8 @@ th.sorted.desc:hover .sorting-indicator.asc:before {
position: relative; position: relative;
} }
.check-column .label-covers-full-cell { .check-column label {
box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
@ -580,15 +581,21 @@ th.sorted.desc:hover .sorting-indicator.asc:before {
right: 0; right: 0;
} }
.check-column .label-covers-full-cell + input { .check-column input {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.check-column .label-covers-full-cell:hover + input { .check-column input:where(:not(:disabled)):hover,
.check-column:hover input:where(:not(:disabled)) {
box-shadow: 0 0 0 1px #2271b1; box-shadow: 0 0 0 1px #2271b1;
} }
.check-column label:hover,
.check-column input:hover + label {
background: rgba(0, 0, 0, 0.05);
}
.locked-indicator { .locked-indicator {
display: none; display: none;
margin-right: 6px; margin-right: 6px;

File diff suppressed because one or more lines are too long

View File

@ -570,7 +570,8 @@ th.sorted.desc:hover .sorting-indicator.asc:before {
position: relative; position: relative;
} }
.check-column .label-covers-full-cell { .check-column label {
box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
@ -579,15 +580,21 @@ th.sorted.desc:hover .sorting-indicator.asc:before {
left: 0; left: 0;
} }
.check-column .label-covers-full-cell + input { .check-column input {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.check-column .label-covers-full-cell:hover + input { .check-column input:where(:not(:disabled)):hover,
.check-column:hover input:where(:not(:disabled)) {
box-shadow: 0 0 0 1px #2271b1; box-shadow: 0 0 0 1px #2271b1;
} }
.check-column label:hover,
.check-column input:hover + label {
background: rgba(0, 0, 0, 0.05);
}
.locked-indicator { .locked-indicator {
display: none; display: none;
margin-left: 6px; margin-left: 6px;

File diff suppressed because one or more lines are too long

View File

@ -896,7 +896,8 @@ class WP_Comments_List_Table extends WP_List_Table {
if ( $this->user_can ) { if ( $this->user_can ) {
?> ?>
<label class="label-covers-full-cell" for="cb-select-<?php echo $comment->comment_ID; ?>"> <input id="cb-select-<?php echo $comment->comment_ID; ?>" type="checkbox" name="delete_comments[]" value="<?php echo $comment->comment_ID; ?>" />
<label for="cb-select-<?php echo $comment->comment_ID; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: Hidden accessibility text. */ /* translators: Hidden accessibility text. */
@ -904,7 +905,6 @@ class WP_Comments_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input id="cb-select-<?php echo $comment->comment_ID; ?>" type="checkbox" name="delete_comments[]" value="<?php echo $comment->comment_ID; ?>" />
<?php <?php
} }
} }

View File

@ -174,7 +174,8 @@ class WP_Links_List_Table extends WP_List_Table {
$link = $item; $link = $item;
?> ?>
<label class="label-covers-full-cell" for="cb-select-<?php echo $link->link_id; ?>"> <input type="checkbox" name="linkcheck[]" id="cb-select-<?php echo $link->link_id; ?>" value="<?php echo esc_attr( $link->link_id ); ?>" />
<label for="cb-select-<?php echo $link->link_id; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: Hidden accessibility text. %s: Link name. */ /* translators: Hidden accessibility text. %s: Link name. */
@ -182,7 +183,6 @@ class WP_Links_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" name="linkcheck[]" id="cb-select-<?php echo $link->link_id; ?>" value="<?php echo esc_attr( $link->link_id ); ?>" />
<?php <?php
} }

View File

@ -1403,13 +1403,13 @@ class WP_List_Table {
if ( ! empty( $columns['cb'] ) ) { if ( ! empty( $columns['cb'] ) ) {
static $cb_counter = 1; static $cb_counter = 1;
$columns['cb'] = '<label class="label-covers-full-cell" for="cb-select-all-' . $cb_counter . '">' . $columns['cb'] = '<input id="cb-select-all-' . $cb_counter . '" type="checkbox" />
<label for="cb-select-all-' . $cb_counter . '">' .
'<span class="screen-reader-text">' . '<span class="screen-reader-text">' .
/* translators: Hidden accessibility text. */ /* translators: Hidden accessibility text. */
__( 'Select All' ) . __( 'Select All' ) .
'</span>' . '</span>' .
'</label>' . '</label>';
'<input id="cb-select-all-' . $cb_counter . '" type="checkbox" />';
++$cb_counter; ++$cb_counter;
} }

View File

@ -419,7 +419,8 @@ class WP_Media_List_Table extends WP_List_Table {
if ( current_user_can( 'edit_post', $post->ID ) ) { if ( current_user_can( 'edit_post', $post->ID ) ) {
?> ?>
<label class="label-covers-full-cell" for="cb-select-<?php echo $post->ID; ?>"> <input type="checkbox" name="media[]" id="cb-select-<?php echo $post->ID; ?>" value="<?php echo $post->ID; ?>" />
<label for="cb-select-<?php echo $post->ID; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: Hidden accessibility text. %s: Attachment title. */ /* translators: Hidden accessibility text. %s: Attachment title. */
@ -427,7 +428,6 @@ class WP_Media_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" name="media[]" id="cb-select-<?php echo $post->ID; ?>" value="<?php echo $post->ID; ?>" />
<?php <?php
} }
} }

View File

@ -420,7 +420,8 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
if ( ! is_main_site( $blog['blog_id'] ) ) : if ( ! is_main_site( $blog['blog_id'] ) ) :
$blogname = untrailingslashit( $blog['domain'] . $blog['path'] ); $blogname = untrailingslashit( $blog['domain'] . $blog['path'] );
?> ?>
<label class="label-covers-full-cell" for="blog_<?php echo $blog['blog_id']; ?>"> <input type="checkbox" id="blog_<?php echo $blog['blog_id']; ?>" name="allblogs[]" value="<?php echo esc_attr( $blog['blog_id'] ); ?>" />
<label for="blog_<?php echo $blog['blog_id']; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: %s: Site URL. */ /* translators: %s: Site URL. */
@ -428,8 +429,6 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" id="blog_<?php echo $blog['blog_id']; ?>" name="allblogs[]"
value="<?php echo esc_attr( $blog['blog_id'] ); ?>" />
<?php <?php
endif; endif;
} }

View File

@ -513,7 +513,8 @@ class WP_MS_Themes_List_Table extends WP_List_Table {
$checkbox_id = 'checkbox_' . md5( $theme->get( 'Name' ) ); $checkbox_id = 'checkbox_' . md5( $theme->get( 'Name' ) );
?> ?>
<label class="label-covers-full-cell" for="<?php echo $checkbox_id; ?>" > <input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
<label for="<?php echo $checkbox_id; ?>" >
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
printf( printf(
@ -524,7 +525,6 @@ class WP_MS_Themes_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" name="checked[]" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" id="<?php echo $checkbox_id; ?>" />
<?php <?php
} }

View File

@ -235,7 +235,8 @@ class WP_MS_Users_List_Table extends WP_List_Table {
return; return;
} }
?> ?>
<label class="label-covers-full-cell" for="blog_<?php echo $user->ID; ?>"> <input type="checkbox" id="blog_<?php echo $user->ID; ?>" name="allusers[]" value="<?php echo esc_attr( $user->ID ); ?>" />
<label for="blog_<?php echo $user->ID; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: Hidden accessibility text. %s: User login. */ /* translators: Hidden accessibility text. %s: User login. */
@ -243,7 +244,6 @@ class WP_MS_Users_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" id="blog_<?php echo $user->ID; ?>" name="allusers[]" value="<?php echo esc_attr( $user->ID ); ?>" />
<?php <?php
} }

View File

@ -993,12 +993,12 @@ class WP_Plugins_List_Table extends WP_List_Table {
$checkbox = ''; $checkbox = '';
} else { } else {
$checkbox = sprintf( $checkbox = sprintf(
'<label class="label-covers-full-cell" for="%1$s"><span class="screen-reader-text">%2$s</span></label>' . '<input type="checkbox" name="checked[]" value="%1$s" id="%2$s" />' .
'<input type="checkbox" name="checked[]" value="%3$s" id="%1$s" />', '<label for="%2$s"><span class="screen-reader-text">%3$s</span></label>',
esc_attr( $plugin_file ),
$checkbox_id, $checkbox_id,
/* translators: Hidden accessibility text. %s: Plugin name. */ /* translators: Hidden accessibility text. %s: Plugin name. */
sprintf( __( 'Select %s' ), $plugin_data['Name'] ), sprintf( __( 'Select %s' ), $plugin_data['Name'] )
esc_attr( $plugin_file )
); );
} }

View File

@ -1034,7 +1034,8 @@ class WP_Posts_List_Table extends WP_List_Table {
*/ */
if ( apply_filters( 'wp_list_table_show_post_checkbox', $show, $post ) ) : if ( apply_filters( 'wp_list_table_show_post_checkbox', $show, $post ) ) :
?> ?>
<label class="label-covers-full-cell" for="cb-select-<?php the_ID(); ?>"> <input id="cb-select-<?php the_ID(); ?>" type="checkbox" name="post[]" value="<?php the_ID(); ?>" />
<label for="cb-select-<?php the_ID(); ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: %s: Post title. */ /* translators: %s: Post title. */
@ -1042,7 +1043,6 @@ class WP_Posts_List_Table extends WP_List_Table {
?> ?>
</span> </span>
</label> </label>
<input id="cb-select-<?php the_ID(); ?>" type="checkbox" name="post[]" value="<?php the_ID(); ?>" />
<div class="locked-indicator"> <div class="locked-indicator">
<span class="locked-indicator-icon" aria-hidden="true"></span> <span class="locked-indicator-icon" aria-hidden="true"></span>
<span class="screen-reader-text"> <span class="screen-reader-text">

View File

@ -416,8 +416,8 @@ abstract class WP_Privacy_Requests_Table extends WP_List_Table {
*/ */
public function column_cb( $item ) { public function column_cb( $item ) {
return sprintf( 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" />' .
'<input type="checkbox" name="request_id[]" id="requester_%1$s" value="%1$s" /><span class="spinner"></span>', '<label for="requester_%1$s"><span class="screen-reader-text">%2$s</span></label><span class="spinner"></span>',
esc_attr( $item->ID ), esc_attr( $item->ID ),
/* translators: Hidden accessibility text. %s: Email address. */ /* translators: Hidden accessibility text. %s: Email address. */
sprintf( __( 'Select %s' ), $item->email ) sprintf( __( 'Select %s' ), $item->email )

View File

@ -364,8 +364,8 @@ class WP_Terms_List_Table extends WP_List_Table {
if ( current_user_can( 'delete_term', $tag->term_id ) ) { if ( current_user_can( 'delete_term', $tag->term_id ) ) {
return sprintf( return sprintf(
'<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" />' .
'<input type="checkbox" name="delete_tags[]" value="%1$s" id="cb-select-%1$s" />', '<label for="cb-select-%1$s"><span class="screen-reader-text">%2$s</span></label>',
$tag->term_id, $tag->term_id,
/* translators: Hidden accessibility text. %s: Taxonomy term name. */ /* translators: Hidden accessibility text. %s: Taxonomy term name. */
sprintf( __( 'Select %s' ), $tag->name ) sprintf( __( 'Select %s' ), $tag->name )

View File

@ -524,12 +524,12 @@ class WP_Users_List_Table extends WP_List_Table {
// Set up the checkbox (because the user is editable, otherwise it's empty). // Set up the checkbox (because the user is editable, otherwise it's empty).
$checkbox = sprintf( $checkbox = sprintf(
'<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="%2$s" value="%1$s" />' .
'<input type="checkbox" name="users[]" id="user_%1$s" class="%3$s" value="%1$s" />', '<label for="user_%1$s"><span class="screen-reader-text">%3$s</span></label>',
$user_object->ID, $user_object->ID,
$role_classes,
/* translators: Hidden accessibility text. %s: User login. */ /* translators: Hidden accessibility text. %s: User login. */
sprintf( __( 'Select %s' ), $user_object->user_login ), sprintf( __( 'Select %s' ), $user_object->user_login )
$role_classes
); );
} else { } else {

View File

@ -582,7 +582,8 @@ function list_plugin_updates() {
<tr> <tr>
<td class="check-column"> <td class="check-column">
<?php if ( $compatible_php ) : ?> <?php if ( $compatible_php ) : ?>
<label for="<?php echo $checkbox_id; ?>" class="label-covers-full-cell"> <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
<label for="<?php echo $checkbox_id; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: Hidden accessibility text. %s: Plugin name. */ /* translators: Hidden accessibility text. %s: Plugin name. */
@ -590,7 +591,6 @@ function list_plugin_updates() {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
<?php endif; ?> <?php endif; ?>
</td> </td>
<td class="plugin-title"><p> <td class="plugin-title"><p>
@ -760,7 +760,8 @@ function list_theme_updates() {
<tr> <tr>
<td class="check-column"> <td class="check-column">
<?php if ( $compatible_wp && $compatible_php ) : ?> <?php if ( $compatible_wp && $compatible_php ) : ?>
<label for="<?php echo $checkbox_id; ?>" class="label-covers-full-cell"> <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
<label for="<?php echo $checkbox_id; ?>">
<span class="screen-reader-text"> <span class="screen-reader-text">
<?php <?php
/* translators: Hidden accessibility text. %s: Theme name. */ /* translators: Hidden accessibility text. %s: Theme name. */
@ -768,7 +769,6 @@ function list_theme_updates() {
?> ?>
</span> </span>
</label> </label>
<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
<?php endif; ?> <?php endif; ?>
</td> </td>
<td class="plugin-title"><p> <td class="plugin-title"><p>

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.4-alpha-56664'; $wp_version = '6.4-alpha-56665';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.