Changeset 29428

Timestamp:

08/07/2014 05:19:14 AM (10 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