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. Built from https://develop.svn.wordpress.org/trunk@36477 git-svn-id: http://core.svn.wordpress.org/trunk@36444 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
94fdeabe27
commit
f75f20edb2
|
@ -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 8px 0 0;
|
||||
|
@ -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 3px 0 0;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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-right: 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:right;
|
||||
padding: 0 0 5px 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.5-alpha-36476';
|
||||
$wp_version = '4.5-alpha-36477';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue