WordPress.org
Get WordPress

Make WordPress Core

Changeset 36477


Ignore:
Timestamp:
02/04/2016 07:18:21 PM (9 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.