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.

Built from https://develop.svn.wordpress.org/trunk@48281


git-svn-id: http://core.svn.wordpress.org/trunk@48050 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1087,8 +1087,24 @@ th.action-links {
 	margin: 0;
 }
 
+/* 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;
 }
 
 .wp-filter .button.drawer-toggle {
@@ -3969,6 +3985,11 @@ img {
 	.wp-filter .search-form input[type="search"] {
 		font-size: 1rem;
 	}
+
+	.wp-filter .search-form.search-plugins {
+		/* This element is a flex item. */
+		min-width: 100%;
+	}
 }
 
 /* Smartphone */

wp-admin/css/common.css

@@ -1086,8 +1086,24 @@ th.action-links {
 	margin: 0;
 }
 
+/* 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;
 }
 
 .wp-filter .button.drawer-toggle {
@@ -3968,6 +3984,11 @@ img {
 	.wp-filter .search-form input[type="search"] {
 		font-size: 1rem;
 	}
+
+	.wp-filter .search-form.search-plugins {
+		/* This element is a flex item. */
+		min-width: 100%;
+	}
 }
 
 /* Smartphone */

wp-admin/css/list-tables-rtl.css

@@ -2095,6 +2095,16 @@ div.action-links,
 		line-height: 1.5;
 	}
 
+	.plugins tbody th.check-column {
+		padding: 8px 5px 0 0;
+	}
+
+	.plugins thead td.check-column,
+	.plugins tfoot td.check-column,
+	.plugins .inactive th.check-column {
+		padding-right: 9px;
+	}
+
 	/* Add New plugins page */
 	table.plugin-install .column-name,
 	table.plugin-install .column-version,

wp-admin/css/list-tables.css

@@ -2094,6 +2094,16 @@ div.action-links,
 		line-height: 1.5;
 	}
 
+	.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,
 	table.plugin-install .column-version,

wp-admin/includes/plugin-install.php

@@ -334,9 +334,8 @@ function install_search_form( $deprecated = true ) {
 			<option value="author"<?php selected( 'author', $type ); ?>><?php _e( 'Author' ); ?></option>
 			<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>
 	<?php
@@ -370,7 +369,7 @@ function install_plugins_favorites_form() {
 	$user   = get_user_option( 'wporg_favorites' );
 	$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" />
 		<p>

wp-admin/plugin-install.php

@@ -158,7 +158,6 @@ if ( 'upload' !== $tab ) {
 	</div>
 	<?php
 	$wp_list_table->views();
-	echo '<br class="clear" />';
 }
 
 /**

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.5-alpha-48280';
+$wp_version = '5.5-alpha-48281';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.