Make WordPress Core

Changeset 48281


Ignore:
Timestamp:
07/03/2020 08:49:23 AM (5 years ago)
Author:
afercia
Message:

Accessibility: Plugins: Accessibility and CSS improvements for the Plugins pages.

  • improves checkboxes alignment on the "Plugins" page table in the responsive view
  • improves spacing between form controls on the "Add Plugins" page in the responsive view
  • the layout of the "filter bar" on the "Add Plugins" page is now based on CSS Flexbox
  • removes italic type from a paragraph in the "Favorites" page

Props passoniate, garethgillman, maxpertici, audrasjb, sabernhardt, afercia.
See #47327.
Fixes #49231.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r48129 r48281  
    10871087}
    10881088
     1089/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
     1090.plugin-install-php .wp-filter {
     1091    display: flex;
     1092    flex-wrap: wrap;
     1093    justify-content: space-between;
     1094    align-items: center;
     1095}
     1096
    10891097.wp-filter .search-form.search-plugins {
     1098    /* This element is a flex item: the inherited float won't have any effect. */
     1099    margin-top: 0;
     1100}
     1101
     1102.wp-filter .search-form.search-plugins select,
     1103.wp-filter .search-form.search-plugins .wp-filter-search {
    10901104    display: inline-block;
     1105    margin-top: 10px;
     1106    vertical-align: top;
    10911107}
    10921108
     
    39693985        font-size: 1rem;
    39703986    }
     3987
     3988    .wp-filter .search-form.search-plugins {
     3989        /* This element is a flex item. */
     3990        min-width: 100%;
     3991    }
    39713992}
    39723993
  • trunk/src/wp-admin/css/list-tables.css

    r48120 r48281  
    20952095    }
    20962096
     2097    .plugins tbody th.check-column {
     2098        padding: 8px 0 0 5px;
     2099    }
     2100
     2101    .plugins thead td.check-column,
     2102    .plugins tfoot td.check-column,
     2103    .plugins .inactive th.check-column {
     2104        padding-left: 9px;
     2105    }
     2106
    20972107    /* Add New plugins page */
    20982108    table.plugin-install .column-name,
  • trunk/src/wp-admin/includes/plugin-install.php

    r48242 r48281  
    335335            <option value="tag"<?php selected( 'tag', $type ); ?>><?php _ex( 'Tag', 'Plugin Installer' ); ?></option>
    336336        </select>
    337         <label><span class="screen-reader-text"><?php _e( 'Search Plugins' ); ?></span>
    338             <input type="search" name="s" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search plugins...' ); ?>" />
    339         </label>
     337        <label class="screen-reader-text" for="search-plugins"><?php _e( 'Search Plugins' ); ?></label>
     338        <input type="search" name="s" id="search-plugins" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search plugins...' ); ?>" />
    340339        <?php submit_button( __( 'Search Plugins' ), 'hide-if-js', false, false, array( 'id' => 'search-submit' ) ); ?>
    341340    </form>
     
    371370    $action = 'save_wporg_username_' . get_current_user_id();
    372371    ?>
    373     <p class="install-help"><?php _e( 'If you have marked plugins as favorites on WordPress.org, you can browse them here.' ); ?></p>
     372    <p><?php _e( 'If you have marked plugins as favorites on WordPress.org, you can browse them here.' ); ?></p>
    374373    <form method="get">
    375374        <input type="hidden" name="tab" value="favorites" />
  • trunk/src/wp-admin/plugin-install.php

    r47855 r48281  
    159159    <?php
    160160    $wp_list_table->views();
    161     echo '<br class="clear" />';
    162161}
    163162
Note: See TracChangeset for help on using the changeset viewer.