Changeset 48281

Timestamp:

07/03/2020 08:49:23 AM (3 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:

• css/common.css (modified) (2 diffs)
• css/list-tables.css (modified) (1 diff)
• includes/plugin-install.php (modified) (2 diffs)
• plugin-install.php (modified) (1 diff)

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

@@ -1087 +1087 @@
 }
 
+/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
+.plugin-install-php .wp-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .wp-filter .search-form.search-plugins {
+    /* This element is a flex item: the inherited float won't have any effect. */
+    margin-top: 0;
+}
+
+.wp-filter .search-form.search-plugins select,
+.wp-filter .search-form.search-plugins .wp-filter-search {
     display: inline-block;
+    margin-top: 10px;
+    vertical-align: top;
 }
 
@@ -3969 +3985 @@
         font-size: 1rem;
     }
+
+    .wp-filter .search-form.search-plugins {
+        /* This element is a flex item. */
+        min-width: 100%;
+    }
 }
 

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

@@ -2095 +2095 @@
     }
 
+    .plugins tbody th.check-column {
+        padding: 8px 0 0 5px;
+    }
+
+    .plugins thead td.check-column,
+    .plugins tfoot td.check-column,
+    .plugins .inactive th.check-column {
+        padding-left: 9px;
+    }
+
     /* Add New plugins page */
     table.plugin-install .column-name,

trunk/src/wp-admin/includes/plugin-install.php

@@ -335 +335 @@
             <option value="tag"<?php selected( 'tag', $type ); ?>><?php _ex( 'Tag', 'Plugin Installer' ); ?></option>
         </select>
-        <label><span class="screen-reader-text"><?php _e( 'Search Plugins' ); ?></span>
-            <input type="search" name="s" value="<?php echo esc_attr( $term ); ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search plugins...' ); ?>" />
-        </label>
+        <label class="screen-reader-text" for="search-plugins"><?php _e( 'Search Plugins' ); ?></label>
+        <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...' ); ?>" />
         <?php submit_button( __( 'Search Plugins' ), 'hide-if-js', false, false, array( 'id' => 'search-submit' ) ); ?>
     </form>
@@ -371 +370 @@
     $action = 'save_wporg_username_' . get_current_user_id();
     ?>
-    <p class="install-help"><?php _e( 'If you have marked plugins as favorites on WordPress.org, you can browse them here.' ); ?></p>
+    <p><?php _e( 'If you have marked plugins as favorites on WordPress.org, you can browse them here.' ); ?></p>
     <form method="get">
         <input type="hidden" name="tab" value="favorites" />

trunk/src/wp-admin/plugin-install.php

@@ -159 +159 @@
     <?php
     $wp_list_table->views();
-    echo '<br class="clear" />';
 }