Changeset 29428

Timestamp:

08/07/2014 05:19:14 AM (12 years ago)

Author:

wonderboymusic

Message:

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

Props afercia.
Fixes #29026.

Location:

trunk/src

Files:

• wp-admin/includes/class-wp-list-table.php (modified) (2 diffs)
• wp-includes/js/media-grid.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (6 diffs)
• wp-includes/media.php (modified) (1 diff)

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

@@ -372 +372 @@
                         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";
@@ -470 +470 @@
                 $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

trunk/src/wp-includes/js/media-grid.js

@@ -566 +566 @@
          */
         media.view.BulkSelectionActionDropdown = media.View.extend({
-                tagName:   'select',
+                tagName: 'select',
+                id:      'bulk-select-dropdown',
 
                 initialize: function() {

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

@@ -5698 +5698 @@
                                 LibraryViewSwitcher,
                                 FiltersConstructor,
-                                screenReaderText;
+                                filterByTypeLabel,
+                                bulkActionsLabel,
+                                filterByDateLabel,
+                                searchLabel;
 
                         /**
@@ -5713 +5716 @@
                         // 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,
@@ -5722 +5727 @@
                                 }).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,
@@ -5731 +5732 @@
                                         priority: -75
                                 }).render() );
+
+                                this.toolbar.set( 'bulkSelection', new media.view.BulkSelection({
+                                        controller: this.controller,
+                                        priority: -70
+                                }).render() );
+
+                                this.toolbar.set( 'spinner', new media.view.Spinner({
+                                        priority: -60
+                                }) );
+
                         }
 
@@ -5747 +5758 @@
                                 }).render() );
 
-                                screenReaderText = $( '<label class="screen-reader-text" for="media-attachment-filters">' + l10n.select + '</label>' );
-                                this.toolbar.get( 'filters' ).$el.before( screenReaderText );
-                        }
-
-                        this.toolbar.set( 'spinner', new media.view.Spinner({
-                                priority: -70
-                        }) );
+                                filterByTypeLabel = $( '<label class="screen-reader-text" for="media-attachment-filters">' + l10n.filterByType + '</label>' );
+                                this.toolbar.get( 'filters' ).$el.before( filterByTypeLabel );
+
+                                filterByDateLabel = $( '<label class="screen-reader-text" for="media-attachment-date-filters">' + l10n.filterByDate + '</label>' );
+                                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 ) {
@@ -5761 +5774 @@
                                         priority:   60
                                 }).render() );
-                                screenReaderText = $( '<label class="screen-reader-text" for="media-search-input">' + l10n.search + '</label>' );
-                                this.toolbar.get( 'search' ).$el.before( screenReaderText );
+                                searchLabel = $( '<label class="screen-reader-text" for="media-search-input">' + l10n.searchMediaLabel + '</label>' );
+                                this.toolbar.get( 'search' ).$el.before( searchLabel );
                         }
 

trunk/src/wp-includes/media.php

@@ -2929 +2929 @@
                 '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