Accessibility: Media: Improve the search media field labelling.

Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels.
Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format.

Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example:

- users with cognitive disabilities may have trouble remembering what the filled field does
- speech recognition users cannot see the name they can speak to set focus on the field
- low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input

Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia.
See #40331.
Fixes #47138.


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

src/wp-includes/css/media-views.css

@@ -310,6 +310,7 @@
 .media-toolbar-primary {
 	float: right;
 	height: 100%;
+	position: relative;
 }
 
 .media-toolbar-secondary {
@@ -870,7 +871,7 @@
  * Search
  */
 .media-frame .search {
-	margin-top: 32px;
+	margin: 32px 0 0;
 	padding: 4px;
 	font-size: 13px;
 	color: #444;
@@ -882,6 +883,14 @@
 	max-width: 100%;
 }
 
+.media-frame .media-search-input-label {
+	position: absolute;
+	left: 0;
+	top: 10px;
+	margin: 0;
+	line-height: 1;
+}
+
 /**
  * Attachments
  */
@@ -1165,6 +1174,15 @@
 	max-width: 33%;
 }
 
+.mode-grid .attachments-browser .media-toolbar-primary {
+	display: flex;
+	align-items: center;
+}
+
+.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
+	display: none;
+}
+
 .attachments-browser .media-toolbar-secondary {
 	max-width: 66%;
 }
@@ -1650,12 +1668,20 @@
 	vertical-align: middle;
 }
 
-.media-frame .spinner.is-active {
-	visibility: visible;
+.media-frame.mode-grid .spinner {
+	margin: 0;
+	float: none;
+	vertical-align: middle;
 }
 
-.media-toolbar .spinner {
-	margin-top: 14px;
+.media-modal .media-toolbar .spinner {
+	float: none;
+	vertical-align: bottom;
+	margin: 0 0 5px 5px;
+}
+
+.media-frame .spinner.is-active {
+	visibility: visible;
 }
 
 /**
@@ -2493,6 +2519,10 @@
 		height: auto;
 	}
 
+	.media-frame .media-toolbar input[type="search"] {
+		line-height: 2.25; /* 36px */
+	}
+
 	.media-sidebar .setting select.columns,
 	.attachment-details .setting select.columns {
 		width: auto;
@@ -2504,6 +2534,13 @@
 		padding: 3px 6px;
 	}
 
+	.wp-admin .media-frame select {
+		min-height: 40px;
+		font-size: 16px;
+		line-height: 1.625;
+		padding: 5px 24px 5px 8px;
+	}
+
 	.image-details .column-image {
 		width: 30%;
 		left: 70%;
@@ -2590,10 +2627,6 @@
 		height: auto;
 	}
 
-	.media-modal .attachments-browser .media-toolbar .spinner {
-		margin: 14px 2px 0;
-	}
-
 	/* Text inputs need to be 16px, or they force zooming on iOS */
 	.media-frame input[type="text"],
 	.media-frame input[type="password"],
@@ -2607,7 +2640,11 @@
 	}
 
 	.media-frame .media-toolbar input[type="search"] {
-		line-height: 1.625; /* 26px */
+		line-height: 2.3755; /* 38px */
+	}
+
+	.media-modal .media-toolbar .spinner {
+		margin-bottom: 10px;
 	}
 }
 
@@ -2621,15 +2658,17 @@
 		top: 82px;
 	}
 
-	.media-frame .media-toolbar input[type="search"] {
-		line-height: 2.25; /* 36px */
-	}
-
 	.media-frame-toolbar .media-toolbar {
 		bottom: -48px;
 	}
 }
 
+@media screen and (max-width: 782px) {
+	.mode-grid .attachments-browser .media-toolbar-primary {
+		display: block;
+	}
+}
+
 /* Responsive on portrait and landscape */
 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
 	/* Full-bleed modal */