Changeset 35273

Timestamp:

10/19/2015 10:03:48 PM (4 years ago)

Author:

afercia

Message:

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

Fixes #33819.

Location:

trunk/src/wp-admin

Files:

• css/common.css (modified) (3 diffs)
• css/ie.css (modified) (2 diffs)
• js/theme.js (modified) (2 diffs)
• theme-install.php (modified) (1 diff)

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

@@ -1127 +1127 @@
     -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;
@@ -1137 +1138 @@
 }
 
-.filter-group h4 {
-    position: relative;
+.filter-group legend {
+    position: absolute;
+    top: 10px;
+    display: block;
     margin: 0;
-}
-
-.filter-drawer ol {
-    margin: 20px 0 0;
+    padding: 0;
+    font-size: 1em;
+    font-weight: 600;
+}
+
+.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;
 }
 
@@ -3519 +3523 @@
         margin: 2px 0 0;
     }
+
+    .filter-drawer .filter-group-feature input,
+    .filter-drawer .filter-group-feature label {
+        line-height: 25px;
+    }
 }
 

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

@@ -397 +397 @@
 }
 
-#widget-list .widget,
-.feature-filter .feature-group li {
+#widget-list .widget {
     display: inline;
-}
-
-.feature-filter .feature-group li input {
-    vertical-align: middle;
 }
 
@@ -696 +691 @@
 }
 
-* html .feature-filter .feature-group li {
-    width: 145px;
-}
-
 * html div.widget-liquid-left {
     width: 99%;

trunk/src/wp-admin/js/theme.js

@@ -961 +961 @@
 
         // Make sure the add-new stays at the end
-        if ( page >= 1 ) {
+        if ( ! themes.isInstall && page >= 1 ) {
             $( '.add-new-theme' ).remove();
         }
@@ -983 +983 @@
 
         // '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>' );
         }

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

@@ -154 +154 @@
         $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>';
         }
         ?>