From 6b49ad22ba22d7dec7819e5e13b65fa679dd8820 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 4 Feb 2016 19:18:21 +0000
Subject: [PATCH] Accessibility: simplify the Plugins and Themes tables on the
 Updates screen.

Although it may seem counterintuitive at first, in very limited cases it's
better to remove improper semantics (this is not a tabular data table) in
order to reduce noise for screen reader users and simplify all the things.
Also improves headings to better separate sections.

Fixes #34780.

git-svn-id: https://develop.svn.wordpress.org/trunk@36477 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css      | 14 ++++----
 src/wp-admin/css/list-tables.css | 18 ++++------
 src/wp-admin/update-core.php     | 57 +++++++++++++++++---------------
 3 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 76583b12ef..679b0b919e 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -345,8 +345,12 @@ h3 {
 	margin: 1em 0;
 }
 
+.update-core-php h2 {
+	margin-top: 2em;
+}
+
 .update-php h2,
-.update-core-php h2,
+.update-messages h2,
 h4 {
 	font-size: 1em;
 	margin: 1.33em 0;
@@ -512,6 +516,7 @@ code {
 }
 
 .widefat th input,
+.updates-table td input,
 .widefat thead td input,
 .widefat tfoot td input {
 	margin: 0 0 0 8px;
@@ -525,18 +530,13 @@ code {
 	vertical-align: top;
 }
 
-.widefat th input[type=checkbox],
-.widefat thead td input[type=checkbox],
-.widefat tfoot td input[type=checkbox] {
-	margin-top: -1px;
-}
-
 .widefat tbody th.check-column {
 	padding: 9px 0 22px;
 }
 
 .widefat thead td.check-column,
 .widefat tbody th.check-column,
+.updates-table tbody td.check-column,
 .widefat tfoot td.check-column {
 	padding: 11px 0 0 3px;
 }
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index fa98d9972d..837a2b2bfd 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -1207,25 +1207,16 @@ ul.cat-checklist {
 	margin-top: 4px;
 }
 
-#update-plugins-table tbody td p {
+.updates-table .plugin-title p {
 	margin-top: 0;
 }
 
-#update-plugins-table tbody td p strong {
-	font-size: 14px;
-}
-
 .plugins thead td.check-column,
 .plugins tfoot td.check-column,
 .plugins .inactive th.check-column {
 	padding-left: 6px;
 }
 
-#update-plugins-table thead td.check-column,
-#update-plugins-table tfoot td.check-column {
-	padding-top: 11px;
-}
-
 .plugins,
 .plugins th,
 .plugins td {
@@ -1340,6 +1331,11 @@ tr.active.update + tr.plugin-update-tr .plugin-update {
 	white-space:nowrap;
 }
 
+.updates-table-screenshot {
+	float:left;
+	padding: 0 10px 5px 0;
+}
+
 .plugins .inactive .plugin-title strong {
 	font-weight: 400;
 }
@@ -2053,7 +2049,7 @@ div.action-links,
 	}
 
 	/* Updates */
-	#wpbody-content #update-themes-table .plugin-title {
+	#wpbody-content .updates-table .plugin-title {
 		width: auto;
 		white-space: normal;
 	}
diff --git a/src/wp-admin/update-core.php b/src/wp-admin/update-core.php
index 3b8e06b6ae..a38b5bbba1 100644
--- a/src/wp-admin/update-core.php
+++ b/src/wp-admin/update-core.php
@@ -242,11 +242,11 @@ function list_plugin_updates() {
 <form method="post" action="<?php echo esc_url( $form_action ); ?>" name="upgrade-plugins" class="upgrade">
 <?php wp_nonce_field('upgrade-core'); ?>
 <p><input id="upgrade-plugins" class="button" type="submit" value="<?php esc_attr_e('Update Plugins'); ?>" name="upgrade" /></p>
-<table class="widefat" id="update-plugins-table">
+<table class="widefat updates-table" id="update-plugins-table">
 	<thead>
 	<tr>
-		<td scope="col" class="manage-column check-column"><input type="checkbox" id="plugins-select-all" /></td>
-		<th scope="col" class="manage-column"><label for="plugins-select-all"><?php _e('Select All'); ?></label></th>
+		<td class="manage-column check-column"><input type="checkbox" id="plugins-select-all" /></td>
+		<td class="manage-column"><label for="plugins-select-all"><?php _e( 'Select All' ); ?></label></td>
 	</tr>
 	</thead>
 
@@ -288,23 +288,26 @@ function list_plugin_updates() {
 		$checkbox_id =  "checkbox_" . md5( $plugin_data->Name );
 		?>
 		<tr>
-			<th scope="row" class="check-column">
+			<td class="check-column">
+				<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"><?php
 					/* translators: %s: plugin name */
 					printf( __( 'Select %s' ),
 						$plugin_data->Name
 					);
 				?></label>
-				<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
-			</th>
-			<td><p><strong><?php echo $plugin_data->Name; ?></strong><br /><?php
-				/* translators: 1: plugin version, 2: new version */
-				printf( __( 'You have version %1$s installed. Update to %2$s.' ),
-					$plugin_data->Version,
-					$plugin_data->update->new_version
-				);
-				echo ' ' . $details . $compat . $upgrade_notice;
-			?></p></td>
+			</td>
+			<td class="plugin-title"><p>
+				<strong><?php echo $plugin_data->Name; ?></strong>
+				<?php
+					/* translators: 1: plugin version, 2: new version */
+					printf( __( 'You have version %1$s installed. Update to %2$s.' ),
+						$plugin_data->Version,
+						$plugin_data->update->new_version
+					);
+					echo ' ' . $details . $compat . $upgrade_notice;
+				?>
+			</p></td>
 		</tr>
 		<?php
 	}
@@ -313,8 +316,8 @@ function list_plugin_updates() {
 
 	<tfoot>
 	<tr>
-		<td scope="col" class="manage-column check-column"><input type="checkbox" id="plugins-select-all-2" /></td>
-		<th scope="col" class="manage-column"><label for="plugins-select-all-2"><?php _e( 'Select All' ); ?></label></th>
+		<td class="manage-column check-column"><input type="checkbox" id="plugins-select-all-2" /></td>
+		<td class="manage-column"><label for="plugins-select-all-2"><?php _e( 'Select All' ); ?></label></td>
 	</tr>
 	</tfoot>
 </table>
@@ -342,11 +345,11 @@ function list_theme_updates() {
 <form method="post" action="<?php echo esc_url( $form_action ); ?>" name="upgrade-themes" class="upgrade">
 <?php wp_nonce_field('upgrade-core'); ?>
 <p><input id="upgrade-themes" class="button" type="submit" value="<?php esc_attr_e('Update Themes'); ?>" name="upgrade" /></p>
-<table class="widefat" id="update-themes-table">
+<table class="widefat updates-table" id="update-themes-table">
 	<thead>
 	<tr>
-		<td scope="col" class="manage-column check-column"><input type="checkbox" id="themes-select-all" /></td>
-		<th scope="col" class="manage-column"><label for="themes-select-all"><?php _e('Select All'); ?></label></th>
+		<td class="manage-column check-column"><input type="checkbox" id="themes-select-all" /></td>
+		<td class="manage-column"><label for="themes-select-all"><?php _e( 'Select All' ); ?></label></td>
 	</tr>
 	</thead>
 
@@ -356,17 +359,17 @@ function list_theme_updates() {
 		$checkbox_id = 'checkbox_' . md5( $theme->get( 'Name' ) );
 		?>
 		<tr>
-			<th scope="row" class="check-column">
+			<td class="check-column">
+				<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"><?php
 					/* translators: %s: theme name */
 					printf( __( 'Select %s' ),
 						$theme->display( 'Name' )
 					);
 				?></label>
-				<input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
-			</th>
-			<td class="plugin-title">
-				<img src="<?php echo esc_url( $theme->get_screenshot() ); ?>" width="85" height="64" style="float:left; padding: 0 5px 5px" alt="" />
+			</td>
+			<td class="plugin-title"><p>
+				<img src="<?php echo esc_url( $theme->get_screenshot() ); ?>" width="85" height="64" class="updates-table-screenshot" alt="" />
 				<strong><?php echo $theme->display( 'Name' ); ?></strong>
 				<?php
 					/* translators: 1: theme version, 2: new version */
@@ -375,7 +378,7 @@ function list_theme_updates() {
 						$theme->update['new_version']
 					);
 				?>
-			</td>
+			</p></td>
 		</tr>
 		<?php
 	}
@@ -384,8 +387,8 @@ function list_theme_updates() {
 
 	<tfoot>
 	<tr>
-		<td scope="col" class="manage-column check-column"><input type="checkbox" id="themes-select-all-2" /></td>
-		<th scope="col" class="manage-column"><label for="themes-select-all-2"><?php _e( 'Select All' ); ?></label></th>
+		<td class="manage-column check-column"><input type="checkbox" id="themes-select-all-2" /></td>
+		<td class="manage-column"><label for="themes-select-all-2"><?php _e( 'Select All' ); ?></label></td>
 	</tr>
 	</tfoot>
 </table>