Accessibility: Improve the headings hierarchy in the Add Themes screen.

Fixes #33819.

git-svn-id: https://develop.svn.wordpress.org/trunk@35273 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/common.css

@@ -1126,9 +1126,10 @@ th.action-links {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
+	position: relative;
 	float: left;
 	margin: 0 1% 0 0;
-	padding: 10px;
+	padding: 20px 10px 10px;
 	width: 24%;
 	background: #fff;
 	border: 1px solid #e5e5e5;
@@ -1136,24 +1137,27 @@ th.action-links {
 	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
-.filter-group h4 {
-	position: relative;
+.filter-group legend {
+	position: absolute;
+	top: 10px;
+	display: block;
 	margin: 0;
+	padding: 0;
+	font-size: 1em;
+	font-weight: 600;
 }
 
-.filter-drawer ol {
-	margin: 20px 0 0;
+.filter-drawer .filter-group-feature {
+	margin: 28px 0 0;
 	list-style-type: none;
 	font-size: 12px;
 }
 
-.filter-drawer li {
+.filter-drawer .filter-group-feature input,
+.filter-drawer .filter-group-feature label {
 	display: inline-block;
-	vertical-align: top;
-	margin: 5px 0;
-	padding-right: 25px;
-	width: 160px;
-	list-style-type: none;
+	margin: 7px 4px 7px 0;
+	line-height: 16px;
 }
 
 .filter-drawer .buttons {
@@ -3518,6 +3522,11 @@ img {
 	.edit-comment-author {
 		margin: 2px 0 0;
 	}
+
+	.filter-drawer .filter-group-feature input,
+	.filter-drawer .filter-group-feature label {
+		line-height: 25px;
+	}
 }
 
 /* Smartphone */

src/wp-admin/css/ie.css

@@ -396,15 +396,10 @@ p.search-box {
 	margin: -3px 0 4px;
 }
 
-#widget-list .widget,
-.feature-filter .feature-group li {
+#widget-list .widget {
 	display: inline;
 }
 
-.feature-filter .feature-group li input {
-	vertical-align: middle;
-}
-
 #editorcontainer #content {
 	overflow: auto;
 	margin: auto;
@@ -695,10 +690,6 @@ input[type="password"],
 	border: 1px solid #DFDFDF;
 }
 
-* html .feature-filter .feature-group li {
-	width: 145px;
-}
-
 * html div.widget-liquid-left {
 	width: 99%;
 }

src/wp-admin/js/theme.js

@@ -960,7 +960,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 		}
 
 		// Make sure the add-new stays at the end
-		if ( page >= 1 ) {
+		if ( ! themes.isInstall && page >= 1 ) {
 			$( '.add-new-theme' ).remove();
 		}
 
@@ -982,7 +982,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 		});
 
 		// 'Add new theme' element shown at the end of the grid
-		if ( themes.data.settings.canInstall ) {
+		if ( ! themes.isInstall && themes.data.settings.canInstall ) {
 			this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h2 class="theme-name">' + l10n.addNew + '</h2></a></div>' );
 		}
 

src/wp-admin/theme-install.php

@@ -153,17 +153,17 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 		<?php
 		$feature_list = get_theme_feature_list();
 		foreach ( $feature_list as $feature_name => $features ) {
-			echo '<div class="filter-group">';
+			echo '<fieldset class="filter-group">';
 			$feature_name = esc_html( $feature_name );
-			echo '<h4>' . $feature_name . '</h4>';
-			echo '<ol class="feature-group">';
+			echo '<legend>' . $feature_name . '</legend>';
+			echo '<div class="filter-group-feature">';
 			foreach ( $features as $feature => $feature_name ) {
 				$feature = esc_attr( $feature );
-				echo '<li><input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
-				echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label></li>';
+				echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
+				echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
 			}
-			echo '</ol>';
 			echo '</div>';
+			echo '</fieldset>';
 		}
 		?>
 			<div class="filtered-by">