Media Grid: add screen reader labels with more context to filters and bulk actions. Ditto for list view.

Props afercia.
Fixes #29026.

Built from https://develop.svn.wordpress.org/trunk@29428


git-svn-id: http://core.svn.wordpress.org/trunk@29206 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/class-wp-list-table.php

@@ -371,7 +371,7 @@ class WP_List_Table {
 		if ( empty( $this->_actions ) )
 			return;
 
-		echo "<label for='bulk-action-selector-" . esc_attr( $which ) . "' class='screen-reader-text'>" . __( 'Select Bulk Action' ) . "</label>";
+		echo "<label for='bulk-action-selector-" . esc_attr( $which ) . "' class='screen-reader-text'>" . __( 'Select bulk action' ) . "</label>";
 		echo "<select name='action$two' id='bulk-action-selector-" . esc_attr( $which ) . "'>\n";
 		echo "<option value='-1' selected='selected'>" . __( 'Bulk Actions' ) . "</option>\n";
 
@@ -469,7 +469,8 @@ class WP_List_Table {
 
 		$m = isset( $_GET['m'] ) ? (int) $_GET['m'] : 0;
 ?>
-		<select name="m">
+		<label for="filter-by-date" class="screen-reader-text"><?php _e( 'Filter by date' ); ?></label>
+		<select name="m" id="filter-by-date">
 			<option<?php selected( $m, 0 ); ?> value="0"><?php _e( 'All dates' ); ?></option>
 <?php
 		foreach ( $months as $arc_row ) {

wp-includes/js/media-grid.js

@@ -565,7 +565,8 @@
 	 * @augments Backbone.View
 	 */
 	media.view.BulkSelectionActionDropdown = media.View.extend({
-		tagName:   'select',
+		tagName: 'select',
+		id:      'bulk-select-dropdown',
 
 		initialize: function() {
 			media.view.Button.prototype.initialize.apply( this, arguments );

wp-includes/js/media-views.js

@@ -5697,7 +5697,10 @@
 			var filters,
 				LibraryViewSwitcher,
 				FiltersConstructor,
-				screenReaderText;
+				filterByTypeLabel,
+				bulkActionsLabel,
+				filterByDateLabel,
+				searchLabel;
 
 			/**
 			 * @member {wp.media.view.Toolbar}
@@ -5712,24 +5715,32 @@
 			// browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
 			// which the controller can tap into and add this view?
 			if ( this.controller.activeModes.where( { id: 'grid' } ).length ) {
+
 				LibraryViewSwitcher = media.View.extend({
 					className: 'view-switch media-grid-view-switch',
 					template: media.template( 'media-library-view-switcher')
 				});
+
 				this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({
 					controller: this.controller,
 					priority: -90
 				}).render() );
 
+				this.toolbar.set( 'dateFilter', new media.view.DateFilter({
+					controller: this.controller,
+					model:      this.collection.props,
+					priority: -75
+				}).render() );
+
 				this.toolbar.set( 'bulkSelection', new media.view.BulkSelection({
 					controller: this.controller,
 					priority: -70
 				}).render() );
-				this.toolbar.set( 'dateFilter', new media.view.DateFilter({
+
-					controller: this.controller,
+				this.toolbar.set( 'spinner', new media.view.Spinner({
-					model:      this.collection.props,
+					priority: -60
-					priority: -75
+				}) );
-				}).render() );
+
 			}
 
 			filters = this.options.filters;
@@ -5746,13 +5757,15 @@
 					priority:   -80
 				}).render() );
 
-				screenReaderText = $( '<label class="screen-reader-text" for="media-attachment-filters">' + l10n.select + '</label>' );
+				filterByTypeLabel = $( '<label class="screen-reader-text" for="media-attachment-filters">' + l10n.filterByType + '</label>' );
-				this.toolbar.get( 'filters' ).$el.before( screenReaderText );
+				this.toolbar.get( 'filters' ).$el.before( filterByTypeLabel );
-			}
 
-			this.toolbar.set( 'spinner', new media.view.Spinner({
+				filterByDateLabel = $( '<label class="screen-reader-text" for="media-attachment-date-filters">' + l10n.filterByDate + '</label>' );
-				priority: -70
+				this.toolbar.get( 'dateFilter' ).$el.before( filterByDateLabel );
-			}) );
+
+				bulkActionsLabel = $( '<label class="screen-reader-text" for="bulk-select-dropdown">' + l10n.bulkActionsLabel + '</label>' );
+				this.toolbar.get( 'bulkSelection' ).$el.before( bulkActionsLabel );
+			}
 
 			if ( this.options.search ) {
 				this.toolbar.set( 'search', new media.view.Search({
@@ -5760,8 +5773,8 @@
 					model:      this.collection.props,
 					priority:   60
 				}).render() );
-				screenReaderText = $( '<label class="screen-reader-text" for="media-search-input">' + l10n.search + '</label>' );
+				searchLabel = $( '<label class="screen-reader-text" for="media-search-input">' + l10n.searchMediaLabel + '</label>' );
-				this.toolbar.get( 'search' ).$el.before( screenReaderText );
+				this.toolbar.get( 'search' ).$el.before( searchLabel );
 			}
 
 			if ( this.options.dragInfo ) {

wp-includes/media.php

@@ -2928,8 +2928,12 @@ function wp_enqueue_media( $args = array() ) {
 		'warnDelete'             => __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
 		'warnBulkDelete'         => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
 		'bulkActions'            => __( 'Bulk Actions' ),
+		'bulkActionsLabel'       => __( 'Select bulk action' ),
 		'deletePermanently'      => __( 'Delete Permanently' ),
 		'apply'                  => __( 'Apply' ),
+		'filterByDate'           => __( 'Filter by date' ),
+		'filterByType'           => __( 'Filter by type' ),
+		'searchMediaLabel'       => __( 'Search Media' ),
 
 		// Library Details
 		'attachmentDetails'  => __( 'Attachment Details' ),