Media: On Media Settings screen, make the pairs of labels and inputs …

…always stacked vertically, on both mobile and desktop screens. Make `<br />` tags on the screen behave as line breaks again after [41836]. Add a missing fieldset + legend for better accessibility. Props afercia, RavanH, obenland, garrett-eclipse. Fixes #42724. See #34539. Built from https://develop.svn.wordpress.org/trunk@42864 git-svn-id: http://core.svn.wordpress.org/trunk@42694 1a063a9b-81f0-0310-95a4-ce76da25c4cd
jerryola1 · Mar 20, 2018 · 61a0745 · 61a0745
1 parent 2ac3192
commit 61a0745
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 46 deletions.
diff --git a/wp-admin/css/common-rtl.css b/wp-admin/css/common-rtl.css
@@ -3952,23 +3952,6 @@ img {
 	}
 }
 
-.options-media-php br {
-	display: none;
-}
-
-@media screen and (max-width: 375px) {
-	.options-media-php input[type="number"][name*="_size_"] {
-		margin: 5px 0;
-	}
-	.options-media-php label[for*="_size_h"]:before {
-		content: "";
-		display: block;
-	}
-	.options-media-php br {
-		display: block;
-	}
-}
-
 @media screen and (max-width: 320px) {
 	/* Prevent default center alignment and larger font for the Right Now widget when
 	   the network dashboard is viewed on a small mobile device. */

diff --git a/wp-admin/css/common-rtl.min.css b/wp-admin/css/common-rtl.min.css
diff --git a/wp-admin/css/common.css b/wp-admin/css/common.css
@@ -3952,23 +3952,6 @@ img {
 	}
 }
 
-.options-media-php br {
-	display: none;
-}
-
-@media screen and (max-width: 375px) {
-	.options-media-php input[type="number"][name*="_size_"] {
-		margin: 5px 0;
-	}
-	.options-media-php label[for*="_size_h"]:before {
-		content: "";
-		display: block;
-	}
-	.options-media-php br {
-		display: block;
-	}
-}
-
 @media screen and (max-width: 320px) {
 	/* Prevent default center alignment and larger font for the Right Now widget when
 	   the network dashboard is viewed on a small mobile device. */

diff --git a/wp-admin/css/common.min.css b/wp-admin/css/common.min.css
diff --git a/wp-admin/css/forms-rtl.css b/wp-admin/css/forms-rtl.css
@@ -438,7 +438,15 @@ fieldset label,
 	vertical-align: middle;
 }
 
-.options-media-php label[for*="_size_"],
+.options-media-php [for*="_size_"] {
+	min-width: 10em;
+	vertical-align: baseline;
+}
+
+.options-media-php .small-text[name*="_size_"] {
+	margin: 0 0 1em;
+}
+
 #misc-publishing-actions label {
 	vertical-align: baseline;
 }

diff --git a/wp-admin/css/forms-rtl.min.css b/wp-admin/css/forms-rtl.min.css
diff --git a/wp-admin/css/forms.css b/wp-admin/css/forms.css
@@ -438,7 +438,15 @@ fieldset label,
 	vertical-align: middle;
 }
 
-.options-media-php label[for*="_size_"],
+.options-media-php [for*="_size_"] {
+	min-width: 10em;
+	vertical-align: baseline;
+}
+
+.options-media-php .small-text[name*="_size_"] {
+	margin: 0 0 1em;
+}
+
 #misc-publishing-actions label {
 	vertical-align: baseline;
 }

diff --git a/wp-admin/css/forms.min.css b/wp-admin/css/forms.min.css
diff --git a/wp-admin/css/login-rtl.min.css b/wp-admin/css/login-rtl.min.css
diff --git a/wp-admin/css/login.min.css b/wp-admin/css/login.min.css
diff --git a/wp-admin/options-media.php b/wp-admin/options-media.php
@@ -54,13 +54,15 @@
 <table class="form-table">
 <tr>
 <th scope="row"><?php _e( 'Thumbnail size' ); ?></th>
-<td>
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Thumbnail size' ); ?></span></legend>
 <label for="thumbnail_size_w"><?php _e( 'Width' ); ?></label>
 <input name="thumbnail_size_w" type="number" step="1" min="0" id="thumbnail_size_w" value="<?php form_option( 'thumbnail_size_w' ); ?>" class="small-text" />
+<br />
 <label for="thumbnail_size_h"><?php _e( 'Height' ); ?></label>
 <input name="thumbnail_size_h" type="number" step="1" min="0" id="thumbnail_size_h" value="<?php form_option( 'thumbnail_size_h' ); ?>" class="small-text" />
-<p><input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked( '1', get_option( 'thumbnail_crop' ) ); ?>/>
-<label for="thumbnail_crop"><?php _e( 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' ); ?></label></p>
+</fieldset>
+<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked( '1', get_option( 'thumbnail_crop' ) ); ?>/>
+<label for="thumbnail_crop"><?php _e( 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' ); ?></label>
 </td>
 </tr>
 

diff --git a/wp-includes/version.php b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.0-alpha-42863';
+$wp_version = '5.0-alpha-42864';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.