Media library 23562

src/js/media/views/attachments/browser.js

@@ -193,37 +193,49 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 				priority:   -100,
 				text:       l10n.filterAttachments,
 				level:      'h2',
-				className:  'media-attachments-filter-heading'
+				className:  'media-attachments-filter-heading screen-reader-text'
 			}).render() );
 		}
 
 		if ( showFilterByType ) {
 			// "Filters" is a <select>, a visually hidden label element needs to be rendered before.
-			this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
+			var filtersLabel = new wp.media.view.Label({
 				value: l10n.filterByType,
 				attributes: {
 					'for':  'media-attachment-filters'
 				},
 				priority:   -80
-			}).render() );
+			});
 
 			if ( 'uploaded' === this.options.filters ) {
-				this.toolbar.set( 'filters', new wp.media.view.AttachmentFilters.Uploaded({
+				Filters = new wp.media.view.AttachmentFilters.Uploaded({
 					controller: this.controller,
 					model:      this.collection.props,
-					priority:   -80
-				}).render() );
+				});
 			} else {
 				Filters = new wp.media.view.AttachmentFilters.All({
 					controller: this.controller,
 					model:      this.collection.props,
-					priority:   -80
 				});
-
-				this.toolbar.set( 'filters', Filters.render() );
 			}
-		}
 
+			var filterContainer = wp.media.View.extend({
+				tagname: 'div',
+				className: 'media-filter-container type-filter',
+
+				initialize: function() {
+					this.views.add( [ filtersLabel, Filters ] );
+				}
+			});
+
+			this.toolbar.set( 'filters', new filterContainer({
+				controller: this.controller,
+				model:      this.controller.props,
+				priority:   -80
+			}).render() );
+		}
+
+		var dateFilter, dateFilterLabel, dateFilterContainer;
 		/*
 		 * Feels odd to bring the global media library switcher into the Attachment browser view.
 		 * Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
@@ -241,17 +253,30 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 			}).render() );
 
 			// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
-			this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
+			dateFilterLabel = new wp.media.view.Label({
 				value: l10n.filterByDate,
 				attributes: {
 					'for': 'media-attachment-date-filters'
 				},
-				priority: -75
-			}).render() );
-			this.toolbar.set( 'dateFilter', new wp.media.view.DateFilter({
+			});
+			dateFilter = new wp.media.view.DateFilter({
+				controller: this.controller,
+				model:      this.collection.props,
+			});
+
+			dateFilterContainer = wp.media.View.extend({
+				tagname: 'div',
+				className: 'media-filter-container date-filter',
+
+				initialize: function() {
+					this.views.add( [ dateFilterLabel, dateFilter ] );
+				}
+			});
+
+			this.toolbar.set( 'dateFilters', new dateFilterContainer({
 				controller: this.controller,
 				model:      this.collection.props,
-				priority: -75
+				priority:   -75
 			}).render() );
 
 			// BulkSelection is a <div> with subviews, including screen reader text.
@@ -363,17 +388,30 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 
 		} else if ( this.options.date ) {
 			// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
-			this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
+			dateFilterLabel = new wp.media.view.Label({
 				value: l10n.filterByDate,
 				attributes: {
 					'for': 'media-attachment-date-filters'
 				},
-				priority: -75
-			}).render() );
-			this.toolbar.set( 'dateFilter', new wp.media.view.DateFilter({
+			});
+			dateFilter = new wp.media.view.DateFilter({
+				controller: this.controller,
+				model:      this.collection.props,
+			});
+
+			dateFilterContainer = wp.media.View.extend({
+				tagname: 'div',
+				className: 'media-filter-container date-filter',
+
+				initialize: function() {
+					this.views.add( [ dateFilterLabel, dateFilter ] );
+				}
+			});
+
+			this.toolbar.set( 'dateFilters', new dateFilterContainer({
 				controller: this.controller,
 				model:      this.collection.props,
-				priority: -75
+				priority:   -75
 			}).render() );
 		}
 

src/js/media/views/label.js

@@ -10,7 +10,6 @@
  */
 var Label = wp.media.View.extend(/** @lends wp.media.view.Label.prototype */{
 	tagName: 'label',
-	className: 'screen-reader-text',
 
 	initialize: function() {
 		this.value = this.options.value;

src/wp-admin/css/media.css

@@ -555,6 +555,10 @@ border color while dragging a file over the uploader drop area */
 	height: auto;
 }
 
+.media-frame.mode-grid .media-toolbar label {
+	display: block;
+}
+
 .media-frame.mode-grid .media-toolbar select {
 	margin: 0 10px 0 0;
 	min-height: 32px;
@@ -576,7 +580,7 @@ border color while dragging a file over the uploader drop area */
 
 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 	margin: 0 8px 0 0;
-	vertical-align: middle;
+	height: 100%;
 }
 
 .media-frame.mode-grid .attachments-browser .bulk-select {

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

@@ -27,6 +27,15 @@
 	font-size: 13px;
 }
 
+.media-modal .media-filter-container label {
+	display: block;
+}
+
+.media-modal .media-filter-container select,
+.media-modal .search-form input {
+	margin-top: 6px;
+}
+
 .media-modal .legend-inline {
 	position: absolute;
 	transform: translate(-100%, 50%);
@@ -294,13 +303,6 @@
 	padding: 0 24px 0 8px;
 }
 
-.media-modal-content .media-frame select.attachment-filters {
-	margin-top: 32px;
-	margin-right: 2%;
-	width: 42%;
-	width: calc(48% - 12px);
-}
-
 /* higher specificity */
 .wp-core-ui .media-modal-icon {
 	background-image: url(../images/uploader-icons.png);
@@ -316,10 +318,10 @@
 	left: 0;
 	right: 0;
 	z-index: 100;
-	height: 60px;
+	height: 48px;
 	padding: 0 16px;
 	border: 0 solid #dcdcde;
-	overflow: hidden;
+	overflow: auto;
 }
 
 .media-frame-toolbar .media-toolbar {
@@ -346,6 +348,10 @@
 .media-toolbar-secondary {
 	float: left;
 	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	align-items: end;
 }
 
 .media-toolbar-primary > .media-button,
@@ -948,7 +954,7 @@
  * Search
  */
 .media-frame .search {
-	margin: 32px 0 0;
+	margin: 0;
 	padding: 4px;
 	font-size: 13px;
 	color: #3c434a;
@@ -961,11 +967,7 @@
 }
 
 .media-modal .media-frame .media-search-input-label {
-	position: absolute;
-	left: 0;
-	top: 10px;
-	margin: 0;
-	line-height: 1;
+	display: block;
 }
 
 /**
@@ -994,6 +996,25 @@
 	box-sizing: border-box;
 }
 
+.wp-core-ui .attachment:not(:has(.filename))::after {
+	content: attr(aria-label);
+	position: absolute;
+	bottom: 8px;
+	width: calc( 100% - 16px );
+	left: 8px;
+	font-size: 12px;
+	background-color: rgba(255, 255, 255, 0.8);
+	color: #1d2327;
+	max-height: 3rem;
+	overflow: hidden;
+	text-align: start;
+	padding: 5px 10px;
+	word-wrap: break-word;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+	box-sizing: border-box;
+	font-weight: 600;
+}
+
 .wp-core-ui .attachment:focus,
 .wp-core-ui .selected.attachment:focus,
 .wp-core-ui .attachment.details:focus {
@@ -1217,8 +1238,8 @@
 
 .attachments-browser .media-toolbar {
 	right: 300px;
-	height: 72px;
 	background: #fff;
+	padding: 12px 16px;
 }
 
 .attachments-browser.hide-sidebar .media-toolbar {
@@ -2597,13 +2618,13 @@
 	}
 
 	.attachments-browser .media-toolbar {
-		height: 82px;
+		height: 74px;
 	}
 
 	.attachments-browser .attachments,
 	.attachments-browser .uploader-inline,
 	.media-frame-content .attachments-browser .attachments-wrapper {
-		top: 82px;
+		top: 90px;
 	}
 
 	.media-sidebar .setting,