From 12c154717b4dbc63d1e364db6ab3aa517a44c731 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sat, 25 May 2019 15:18:24 +0000
Subject: [PATCH] Accessibility: Improve settings tables and forms after
 [45403].

- adds `role="presentation"` to the edit comment table
- removes a few pointless `<fieldset>` elements
- adds a few missing `<label>` elements
- adds the CSS class `class="td-full"` to table rows spanning to multiple cells
- adds explicit `scope="row"` attribute to the table headers in `options-permalink.php`: this table is better communicated as data table
- uses consistent label association in the "Privacy Settings" page
- in the installation page "Set up your database connection": associates descriptions to their inout fields using `aria-describedby`
- improves the link to gravatar.com in the `user-edit.php` page

See #46899.
Fixes #47390.


git-svn-id: https://develop.svn.wordpress.org/trunk@45416 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/edit-form-comment.php  |  2 +-
 src/wp-admin/includes/ms.php        |  2 +-
 src/wp-admin/includes/network.php   |  8 ++++----
 src/wp-admin/network/settings.php   | 13 ++++++-------
 src/wp-admin/network/site-info.php  |  2 +-
 src/wp-admin/network/site-new.php   |  2 +-
 src/wp-admin/network/site-users.php |  2 +-
 src/wp-admin/network/user-new.php   |  2 +-
 src/wp-admin/options-discussion.php |  6 ++++--
 src/wp-admin/options-permalink.php  | 12 ++++++------
 src/wp-admin/privacy.php            |  9 +++------
 src/wp-admin/setup-config.php       | 20 ++++++++++----------
 src/wp-admin/user-edit.php          |  2 +-
 13 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/wp-admin/edit-form-comment.php b/src/wp-admin/edit-form-comment.php
index 4a2f279a94..a64be9cf88 100644
--- a/src/wp-admin/edit-form-comment.php
+++ b/src/wp-admin/edit-form-comment.php
@@ -43,7 +43,7 @@ if ( 'approved' === wp_get_comment_status( $comment ) && $comment->comment_post_
 <h2 class="edit-comment-author"><?php _e( 'Author' ); ?></h2>
 <fieldset>
 <legend class="screen-reader-text"><?php _e( 'Comment Author' ); ?></legend>
-<table class="form-table editcomment">
+<table class="form-table editcomment" role="presentation">
 <tbody>
 <tr>
 	<td class="first"><label for="name"><?php _e( 'Name' ); ?></label></td>
diff --git a/src/wp-admin/includes/ms.php b/src/wp-admin/includes/ms.php
index 5d4ad46fd7..54d638f6d8 100644
--- a/src/wp-admin/includes/ms.php
+++ b/src/wp-admin/includes/ms.php
@@ -984,7 +984,7 @@ function confirm_delete_users( $users ) {
 				echo '</fieldset></td></tr>';
 			} else {
 				?>
-				<td><fieldset><p><legend><?php _e( 'User has no sites or content and will be deleted.' ); ?></legend></p>
+				<td><p><?php _e( 'User has no sites or content and will be deleted.' ); ?></p></td>
 			<?php } ?>
 			</tr>
 			<?php
diff --git a/src/wp-admin/includes/network.php b/src/wp-admin/includes/network.php
index b72afbbdd1..8576ae4e11 100644
--- a/src/wp-admin/includes/network.php
+++ b/src/wp-admin/includes/network.php
@@ -347,18 +347,18 @@ function network_step1( $errors = false ) {
 			</tr>
 		<?php endif; ?>
 			<tr>
-				<th scope='row'><?php esc_html_e( 'Network Title' ); ?></th>
+				<th scope='row'><label for="sitename"><?php esc_html_e( 'Network Title' ); ?></label></th>
 				<td>
-					<input name='sitename' type='text' size='45' value='<?php echo esc_attr( $site_name ); ?>' />
+					<input name='sitename' id='sitename' type='text' size='45' value='<?php echo esc_attr( $site_name ); ?>' />
 					<p class="description">
 						<?php _e( 'What would you like to call your network?' ); ?>
 					</p>
 				</td>
 			</tr>
 			<tr>
-				<th scope='row'><?php esc_html_e( 'Network Admin Email' ); ?></th>
+				<th scope='row'><label for="email"><?php esc_html_e( 'Network Admin Email' ); ?></label></th>
 				<td>
-					<input name='email' type='text' size='45' value='<?php echo esc_attr( $admin_email ); ?>' />
+					<input name='email' id='email' type='text' size='45' value='<?php echo esc_attr( $admin_email ); ?>' />
 					<p class="description">
 						<?php _e( 'Your email address.' ); ?>
 					</p>
diff --git a/src/wp-admin/network/settings.php b/src/wp-admin/network/settings.php
index 2658679331..375367a2d7 100644
--- a/src/wp-admin/network/settings.php
+++ b/src/wp-admin/network/settings.php
@@ -452,16 +452,15 @@ if ( isset( $_GET['updated'] ) ) {
 			 *
 			 * @param string[] $admin_menus Associative array of the menu items available.
 			 */
-			$menu_items   = apply_filters( 'mu_menu_items', array( 'plugins' => __( 'Plugins' ) ) );
-			$fieldset_end = '';
-			if ( count( (array) $menu_items ) > 1 ) {
-				echo '<fieldset><legend class="screen-reader-text">' . __( 'Enable menus' ) . '</legend>';
-				$fieldset_end = '</fieldset>';
-			}
+			$menu_items = apply_filters( 'mu_menu_items', array( 'plugins' => __( 'Plugins' ) ) );
+
+			echo '<fieldset><legend class="screen-reader-text">' . __( 'Enable menus' ) . '</legend>';
+
 			foreach ( (array) $menu_items as $key => $val ) {
 				echo "<label><input type='checkbox' name='menu_items[" . $key . "]' value='1'" . ( isset( $menu_perms[ $key ] ) ? checked( $menu_perms[ $key ], '1', false ) : '' ) . ' /> ' . esc_html( $val ) . '</label><br/>';
 			}
-			echo $fieldset_end;
+
+			echo '</fieldset>';
 			?>
 				</td>
 			</tr>
diff --git a/src/wp-admin/network/site-info.php b/src/wp-admin/network/site-info.php
index 1d4d5a37c7..c8b86e5f65 100644
--- a/src/wp-admin/network/site-info.php
+++ b/src/wp-admin/network/site-info.php
@@ -166,7 +166,7 @@ if ( ! empty( $messages ) ) {
 		else :
 			?>
 		<tr class="form-field form-required">
-			<th scope="row"><?php _e( 'Site Address (URL)' ); ?></th>
+			<th scope="row"><label for="url"><?php _e( 'Site Address (URL)' ); ?></label></th>
 			<td><input name="blog[url]" type="text" id="url" value="<?php echo $parsed_scheme . '://' . esc_attr( $details->domain ) . esc_attr( $details->path ); ?>" /></td>
 		</tr>
 		<?php endif; ?>
diff --git a/src/wp-admin/network/site-new.php b/src/wp-admin/network/site-new.php
index f62f200eaa..318c7b4464 100644
--- a/src/wp-admin/network/site-new.php
+++ b/src/wp-admin/network/site-new.php
@@ -281,7 +281,7 @@ printf(
 			<td><input name="blog[email]" type="email" class="regular-text wp-suggest-user" id="admin-email" data-autocomplete-type="search" data-autocomplete-field="user_email" aria-describedby="site-admin-email" required /></td>
 		</tr>
 		<tr class="form-field">
-			<td colspan="2"><p id="site-admin-email"><?php _e( 'A new user will be created if the above email address is not in the database.' ); ?><br /><?php _e( 'The username and a link to set the password will be mailed to this email address.' ); ?></p></td>
+			<td colspan="2" class="td-full"><p id="site-admin-email"><?php _e( 'A new user will be created if the above email address is not in the database.' ); ?><br /><?php _e( 'The username and a link to set the password will be mailed to this email address.' ); ?></p></td>
 		</tr>
 	</table>
 
diff --git a/src/wp-admin/network/site-users.php b/src/wp-admin/network/site-users.php
index c851664c86..06dd68c2a3 100644
--- a/src/wp-admin/network/site-users.php
+++ b/src/wp-admin/network/site-users.php
@@ -354,7 +354,7 @@ if ( current_user_can( 'create_users' ) && apply_filters( 'show_network_site_use
 			</select></td>
 		</tr>
 		<tr class="form-field">
-			<td colspan="2"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
+			<td colspan="2" class="td-full"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
 		</tr>
 	</table>
 	<?php wp_nonce_field( 'add-user', '_wpnonce_add-new-user' ); ?>
diff --git a/src/wp-admin/network/user-new.php b/src/wp-admin/network/user-new.php
index 59c595dc4a..73a4021b32 100644
--- a/src/wp-admin/network/user-new.php
+++ b/src/wp-admin/network/user-new.php
@@ -130,7 +130,7 @@ if ( isset( $add_user_errors ) && is_wp_error( $add_user_errors ) ) {
 			<td><input type="email" class="regular-text" name="user[email]" id="email"/></td>
 		</tr>
 		<tr class="form-field">
-			<td colspan="2"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
+			<td colspan="2" class="td-full"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></td>
 		</tr>
 	</table>
 	<?php
diff --git a/src/wp-admin/options-discussion.php b/src/wp-admin/options-discussion.php
index 5a3568cdff..bde50b9ec5 100644
--- a/src/wp-admin/options-discussion.php
+++ b/src/wp-admin/options-discussion.php
@@ -221,12 +221,12 @@ if ( ! $show_avatars ) {
 <table class="form-table" role="presentation">
 <tr>
 <th scope="row"><?php _e( 'Avatar Display' ); ?></th>
-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Avatar Display' ); ?></span></legend>
+<td>
 	<label for="show_avatars">
 		<input type="checkbox" id="show_avatars" name="show_avatars" value="1" <?php checked( $show_avatars, 1 ); ?> />
 		<?php _e( 'Show Avatars' ); ?>
 	</label>
-</fieldset></td>
+</td>
 </tr>
 <tr class="avatar-settings<?php echo $show_avatars_class; ?>">
 <th scope="row"><?php _e( 'Maximum Rating' ); ?></th>
@@ -255,7 +255,9 @@ endforeach;
 <th scope="row"><?php _e( 'Default Avatar' ); ?></th>
 <td class="defaultavatarpicker"><fieldset><legend class="screen-reader-text"><span><?php _e( 'Default Avatar' ); ?></span></legend>
 
+<p>
 <?php _e( 'For users without a custom avatar of their own, you can either display a generic logo or a generated one based on their email address.' ); ?><br />
+</p>
 
 <?php
 $avatar_defaults = array(
diff --git a/src/wp-admin/options-permalink.php b/src/wp-admin/options-permalink.php
index bbe4682a44..8e064faebe 100644
--- a/src/wp-admin/options-permalink.php
+++ b/src/wp-admin/options-permalink.php
@@ -197,27 +197,27 @@ $structures = array(
 <h2 class="title"><?php _e( 'Common Settings' ); ?></h2>
 <table class="form-table permalink-structure">
 	<tr>
-		<th><label><input name="selection" type="radio" value="" <?php checked( '', $permalink_structure ); ?> /> <?php _e( 'Plain' ); ?></label></th>
+		<th scope="row"><label><input name="selection" type="radio" value="" <?php checked( '', $permalink_structure ); ?> /> <?php _e( 'Plain' ); ?></label></th>
 		<td><code><?php echo get_option( 'home' ); ?>/?p=123</code></td>
 	</tr>
 	<tr>
-		<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[1] ); ?>" <?php checked( $structures[1], $permalink_structure ); ?> /> <?php _e( 'Day and name' ); ?></label></th>
+		<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[1] ); ?>" <?php checked( $structures[1], $permalink_structure ); ?> /> <?php _e( 'Day and name' ); ?></label></th>
 		<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . date( 'Y' ) . '/' . date( 'm' ) . '/' . date( 'd' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
 	</tr>
 	<tr>
-		<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[2] ); ?>" <?php checked( $structures[2], $permalink_structure ); ?> /> <?php _e( 'Month and name' ); ?></label></th>
+		<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[2] ); ?>" <?php checked( $structures[2], $permalink_structure ); ?> /> <?php _e( 'Month and name' ); ?></label></th>
 		<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . date( 'Y' ) . '/' . date( 'm' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
 	</tr>
 	<tr>
-		<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[3] ); ?>" <?php checked( $structures[3], $permalink_structure ); ?> /> <?php _e( 'Numeric' ); ?></label></th>
+		<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[3] ); ?>" <?php checked( $structures[3], $permalink_structure ); ?> /> <?php _e( 'Numeric' ); ?></label></th>
 		<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/123'; ?></code></td>
 	</tr>
 	<tr>
-		<th><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[4] ); ?>" <?php checked( $structures[4], $permalink_structure ); ?> /> <?php _e( 'Post name' ); ?></label></th>
+		<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[4] ); ?>" <?php checked( $structures[4], $permalink_structure ); ?> /> <?php _e( 'Post name' ); ?></label></th>
 		<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
 	</tr>
 	<tr>
-		<th>
+		<th scope="row">
 			<label><input name="selection" id="custom_selection" type="radio" value="custom" <?php checked( ! in_array( $permalink_structure, $structures ) ); ?> />
 			<?php _e( 'Custom Structure' ); ?>
 			</label>
diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php
index 3c15600bbc..6a158a7547 100644
--- a/src/wp-admin/privacy.php
+++ b/src/wp-admin/privacy.php
@@ -191,9 +191,9 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 	</p>
 
 	<hr>
-	<table class="form-table tools-privacy-policy-page">
+	<table class="form-table tools-privacy-policy-page" role="presentation">
 		<tr>
-			<th scope="row">
+			<th scope="row"><label for="page_for_privacy_policy">
 				<?php
 				if ( $privacy_policy_page_exists ) {
 					_e( 'Change your Privacy Policy page' );
@@ -201,7 +201,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 					_e( 'Select a Privacy Policy page' );
 				}
 				?>
-			</th>
+			</label></th>
 			<td>
 				<?php
 				$has_pages = (bool) get_posts(
@@ -218,9 +218,6 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 				if ( $has_pages ) :
 					?>
 					<form method="post" action="">
-						<label for="page_for_privacy_policy">
-							<?php _e( 'Select an existing page:' ); ?>
-						</label>
 						<input type="hidden" name="action" value="set-privacy-page" />
 						<?php
 						wp_dropdown_pages(
diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php
index 314af196c6..ebb1c4bbfa 100644
--- a/src/wp-admin/setup-config.php
+++ b/src/wp-admin/setup-config.php
@@ -210,23 +210,23 @@ switch ( $step ) {
 	<table class="form-table" role="presentation">
 		<tr>
 			<th scope="row"><label for="dbname"><?php _e( 'Database Name' ); ?></label></th>
-			<td><input name="dbname" id="dbname" type="text" size="25" value="wordpress"<?php echo $autofocus; ?>/></td>
-			<td><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
+			<td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" value="wordpress"<?php echo $autofocus; ?>/></td>
+			<td id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
 		</tr>
 		<tr>
 			<th scope="row"><label for="uname"><?php _e( 'Username' ); ?></label></th>
-			<td><input name="uname" id="uname" type="text" size="25" value="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /></td>
-			<td><?php _e( 'Your database username.' ); ?></td>
+			<td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" value="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /></td>
+			<td id="uname-desc"><?php _e( 'Your database username.' ); ?></td>
 		</tr>
 		<tr>
 			<th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
-			<td><input name="pwd" id="pwd" type="text" size="25" value="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" /></td>
-			<td><?php _e( 'Your database password.' ); ?></td>
+			<td><input name="pwd" id="pwd" type="text" aria-describedby="pwd-desc" size="25" value="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" /></td>
+			<td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
 		</tr>
 		<tr>
 			<th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th>
-			<td><input name="dbhost" id="dbhost" type="text" size="25" value="localhost" /></td>
-			<td>
+			<td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /></td>
+			<td id="dbhost-desc">
 			<?php
 				/* translators: %s: localhost */
 				printf( __( 'You should be able to get this info from your web host, if %s doesn&#8217;t work.' ), '<code>localhost</code>' );
@@ -235,8 +235,8 @@ switch ( $step ) {
 		</tr>
 		<tr>
 			<th scope="row"><label for="prefix"><?php _e( 'Table Prefix' ); ?></label></th>
-			<td><input name="prefix" id="prefix" type="text" value="wp_" size="25" /></td>
-			<td><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
+			<td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /></td>
+			<td id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
 		</tr>
 	</table>
 		<?php
diff --git a/src/wp-admin/user-edit.php b/src/wp-admin/user-edit.php
index 71ecb82701..c7d728cda1 100644
--- a/src/wp-admin/user-edit.php
+++ b/src/wp-admin/user-edit.php
@@ -568,7 +568,7 @@ endif; //!IS_PROFILE_PAGE
 			if ( IS_PROFILE_PAGE ) {
 				/* translators: %s: Gravatar URL */
 				$description = sprintf(
-					__( 'You can change your profile picture on <a href="%s">Gravatar</a>.' ),
+					__( '<a href="%s">You can change your profile picture on Gravatar</a>.' ),
 					__( 'https://en.gravatar.com/' )
 				);
 			} else {