WordPress.org
Get WordPress

Make WordPress Core

Changeset 36477


Ignore:
Timestamp:
02/04/2016 07:18:21 PM (11 years ago)
Author:
afercia
Message:

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.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r36406 r36477  
    346346}
    347347
     348.update-core-php h2 {
     349        margin-top: 2em;
     350}
     351
    348352.update-php h2,
    349 .update-core-php h2,
     353.update-messages h2,
    350354h4 {
    351355        font-size: 1em;
    … …  
    513517
    514518.widefat th input,
     519.updates-table td input,
    515520.widefat thead td input,
    516521.widefat tfoot td input {
    … …  
    526531}
    527532
    528 .widefat th input[type=checkbox],
    529 .widefat thead td input[type=checkbox],
    530 .widefat tfoot td input[type=checkbox] {
    531         margin-top: -1px;
    532 }
    533 
    534533.widefat tbody th.check-column {
    535534        padding: 9px 0 22px;
    … …  
    538537.widefat thead td.check-column,
    539538.widefat tbody th.check-column,
     539.updates-table tbody td.check-column,
    540540.widefat tfoot td.check-column {
    541541        padding: 11px 0 0 3px;

  • trunk/src/wp-admin/css/list-tables.css

    r36422 r36477  
    12081208}
    12091209
    1210 #update-plugins-table tbody td p {
     1210.updates-table .plugin-title p {
    12111211        margin-top: 0;
    1212 }
    1213 
    1214 #update-plugins-table tbody td p strong {
    1215         font-size: 14px;
    12161212}
    12171213
    … …  
    12201216.plugins .inactive th.check-column {
    12211217        padding-left: 6px;
    1222 }
    1223 
    1224 #update-plugins-table thead td.check-column,
    1225 #update-plugins-table tfoot td.check-column {
    1226         padding-top: 11px;
    12271218}
    12281219
    … …  
    13391330        padding-right: 12px;
    13401331        white-space:nowrap;
     1332}
     1333
     1334.updates-table-screenshot {
     1335        float:left;
     1336        padding: 0 10px 5px 0;
    13411337}
    13421338
    … …  
    20542050
    20552051        /* Updates */
    2056         #wpbody-content #update-themes-table .plugin-title {
     2052        #wpbody-content .updates-table .plugin-title {
    20572053                width: auto;
    20582054                white-space: normal;

  • trunk/src/wp-admin/update-core.php

    r36349 r36477  
    243243<?php wp_nonce_field('upgrade-core'); ?>
    244244<p><input id="upgrade-plugins" class="button" type="submit" value="<?php esc_attr_e('Update Plugins'); ?>" name="upgrade" /></p>
    245 <table class="widefat" id="update-plugins-table">
     245<table class="widefat updates-table" id="update-plugins-table">
    246246        <thead>
    247247        <tr>
    248                 <td scope="col" class="manage-column check-column"><input type="checkbox" id="plugins-select-all" /></td>
    249                 <th scope="col" class="manage-column"><label for="plugins-select-all"><?php _e('Select All'); ?></label></th>
     248                <td class="manage-column check-column"><input type="checkbox" id="plugins-select-all" /></td>
     249                <td class="manage-column"><label for="plugins-select-all"><?php _e( 'Select All' ); ?></label></td>
    250250        </tr>
    251251        </thead>
    … …  
    289289                ?>
    290290                <tr>
    291                         <th scope="row" class="check-column">
     291                        <td class="check-column">
     292                                <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
    292293                                <label for="<?php echo $checkbox_id; ?>" class="screen-reader-text"><?php
    293294                                        /* translators: %s: plugin name */
    … …  
    296297                                        );
    297298                                ?></label>
    298                                 <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $plugin_file ); ?>" />
    299                         </th>
    300                         <td><p><strong><?php echo $plugin_data->Name; ?></strong><br /><?php
    301                                 /* translators: 1: plugin version, 2: new version */
    302                                 printf( __( 'You have version %1$s installed. Update to %2$s.' ),
    303                                         $plugin_data->Version,
    304                                         $plugin_data->update->new_version
    305                                 );
    306                                 echo ' ' . $details . $compat . $upgrade_notice;
    307                         ?></p></td>
     299                        </td>
     300                        <td class="plugin-title"><p>
     301                                <strong><?php echo $plugin_data->Name; ?></strong>
     302                                <?php
     303                                        /* translators: 1: plugin version, 2: new version */
     304                                        printf( __( 'You have version %1$s installed. Update to %2$s.' ),
     305                                                $plugin_data->Version,
     306                                                $plugin_data->update->new_version
     307                                        );
     308                                        echo ' ' . $details . $compat . $upgrade_notice;
     309                                ?>
     310                        </p></td>
    308311                </tr>
    309312                <?php
    … …  
    314317        <tfoot>
    315318        <tr>
    316                 <td scope="col" class="manage-column check-column"><input type="checkbox" id="plugins-select-all-2" /></td>
    317                 <th scope="col" class="manage-column"><label for="plugins-select-all-2"><?php _e( 'Select All' ); ?></label></th>
     319                <td class="manage-column check-column"><input type="checkbox" id="plugins-select-all-2" /></td>
     320                <td class="manage-column"><label for="plugins-select-all-2"><?php _e( 'Select All' ); ?></label></td>
    318321        </tr>
    319322        </tfoot>
    … …  
    343346<?php wp_nonce_field('upgrade-core'); ?>
    344347<p><input id="upgrade-themes" class="button" type="submit" value="<?php esc_attr_e('Update Themes'); ?>" name="upgrade" /></p>
    345 <table class="widefat" id="update-themes-table">
     348<table class="widefat updates-table" id="update-themes-table">
    346349        <thead>
    347350        <tr>
    348                 <td scope="col" class="manage-column check-column"><input type="checkbox" id="themes-select-all" /></td>
    349                 <th scope="col" class="manage-column"><label for="themes-select-all"><?php _e('Select All'); ?></label></th>
     351                <td class="manage-column check-column"><input type="checkbox" id="themes-select-all" /></td>
     352                <td class="manage-column"><label for="themes-select-all"><?php _e( 'Select All' ); ?></label></td>
    350353        </tr>
    351354        </thead>
    … …  
    357360                ?>
    358361                <tr>
    359                         <th scope="row" class="check-column">
     362                        <td class="check-column">
     363                                <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
    360364                                <label for="<?php echo $checkbox_id; ?>" class="screen-reader-text"><?php
    361365                                        /* translators: %s: theme name */
    … …  
    364368                                        );
    365369                                ?></label>
    366                                 <input type="checkbox" name="checked[]" id="<?php echo $checkbox_id; ?>" value="<?php echo esc_attr( $stylesheet ); ?>" />
    367                         </th>
    368                         <td class="plugin-title">
    369                                 <img src="<?php echo esc_url( $theme->get_screenshot() ); ?>" width="85" height="64" style="float:left; padding: 0 5px 5px" alt="" />
     370                        </td>
     371                        <td class="plugin-title"><p>
     372                                <img src="<?php echo esc_url( $theme->get_screenshot() ); ?>" width="85" height="64" class="updates-table-screenshot" alt="" />
    370373                                <strong><?php echo $theme->display( 'Name' ); ?></strong>
    371374                                <?php
    … …  
    376379                                        );
    377380                                ?>
    378                         </td>
     381                        </p></td>
    379382                </tr>
    380383                <?php
    … …  
    385388        <tfoot>
    386389        <tr>
    387                 <td scope="col" class="manage-column check-column"><input type="checkbox" id="themes-select-all-2" /></td>
    388                 <th scope="col" class="manage-column"><label for="themes-select-all-2"><?php _e( 'Select All' ); ?></label></th>
     390                <td class="manage-column check-column"><input type="checkbox" id="themes-select-all-2" /></td>
     391                <td class="manage-column"><label for="themes-select-all-2"><?php _e( 'Select All' ); ?></label></td>
    389392        </tr>
    390393        </tfoot>
Note: See TracChangeset for help on using the changeset viewer.