Media Grid: use a media.view.Label instance in the toolbar for the screen reader text for Search.

See #29026.


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

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

@@ -5766,13 +5766,19 @@
 			}) );
 
 			if ( this.options.search ) {
+				// Search is an input, screen reader text needs to be rendered before
+				this.toolbar.set( 'searchLabel', new media.view.Label({
+					value: l10n.searchMediaLabel,
+					attributes: {
+						'for': 'media-search-input'
+					},
+					priority:   60
+				}).render() );
 				this.toolbar.set( 'search', new media.view.Search({
 					controller: this.controller,
 					model:      this.collection.props,
 					priority:   60
 				}).render() );
-				screenReaderText = $( '<label class="screen-reader-text" for="media-search-input">' + l10n.search + '</label>' );
-				this.toolbar.get( 'search' ).$el.before( screenReaderText );
 			}
 
 			if ( this.options.dragInfo ) {

src/wp-includes/media.php

@@ -2941,6 +2941,7 @@ function wp_enqueue_media( $args = array() ) {
 		'deletePermanently'      => __( 'Delete Permanently' ),
 		'apply'                  => __( 'Apply' ),
 		'filterByDate'           => __( 'Filter by date' ),
+		'searchMediaLabel'       => __( 'Search Media' ),
 
 		// Library Details
 		'attachmentDetails'  => __( 'Attachment Details' ),