Changeset 61757

Timestamp:

02/27/2026 07:14:49 PM (5 days ago)

Author:

joedolson

Message:

Media: Make filters & image selection usable by voice control.

Add a visible label with the aria-label value for image selection to enable voice control users to select images. Add visible labels on filters to improve access to media filters.

Props grahamarmfield, tomauger, afercia, rianrietveld, antpb, audrasjb, SirLouen, ozgursar, poojapadamad, mukesh27, alh0319, joedolson.
Fixes #23562.

Location:

trunk/src

Files:

• js/media/views/attachments/browser.js (modified) (5 diffs)
• js/media/views/label.js (modified) (1 diff)
• js/media/views/uploader/inline.js (modified) (1 diff)
• wp-admin/css/media.css (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (11 diffs)
• wp-includes/media-template.php (modified) (1 diff)

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

@@ -194 +194 @@
                 text:       l10n.filterAttachments,
                 level:      'h2',
-                className:  'media-attachments-filter-heading'
+                className:  'media-attachments-filter-heading'
             }).render() );
         }
@@ -200 +200 @@
         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({
+             new wp.media.view.Label({
                 value: l10n.filterByType,
                 attributes: {
@@ -206 +206 @@
                 },
                 priority:   -80
-            }).render() );
+            });
 
             if ( 'uploaded' === this.options.filters ) {
-                this.toolbar.set( 'filters', new wp.media.view.AttachmentFilters.Uploaded({
+                 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.
@@ -242 +254 @@
 
             // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
-            this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
+             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,
-                priority: -75
+            });
+
+            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
             }).render() );
 
@@ -364 +389 @@
         } 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({
+             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,
-                priority: -75
+            });
+
+            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
             }).render() );
         }

trunk/src/js/media/views/label.js

@@ -11 +11 @@
 var Label = wp.media.View.extend(/** @lends wp.media.view.Label.prototype */{
     tagName: 'label',
-    className: 'screen-reader-text',
 
     initialize: function() {

trunk/src/js/media/views/uploader/inline.js

@@ -116 +116 @@
             $browser.detach().text( $placeholder.text() );
             $browser[0].className = $placeholder[0].className;
-            $browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
+            $browser[0].setAttribute( 'aria-edby') );
             $placeholder.replaceWith( $browser.show() );
         }

trunk/src/wp-admin/css/media.css

@@ -556 +556 @@
 }
 
+
+
+
+
 .media-frame.mode-grid .media-toolbar select {
     margin: 0 10px 0 0;
@@ -573 +577 @@
     line-height: 2.30769231; /* 30px for 32px height with 13px font */
     padding: 0 12px;
+
 }
 
 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
     margin: 0 8px 0 0;
-    vertical-align: middle;
+    ;
 }
 

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

@@ -26 +26 @@
 .media-modal label {
     font-size: 13px;
+
+
+
+
+
+
+
+
+
 }
 
@@ -296 +305 @@
 }
 
-.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 {
@@ -318 +320 @@
     right: 0;
     z-index: 100;
-    height: 60px;
+    height: px;
     padding: 0 16px;
     border: 0 solid #dcdcde;
-    overflow: hidden;
+    overflow: ;
 }
 
@@ -348 +350 @@
     float: left;
     height: 100%;
+
+
+
 }
 
@@ -936 +941 @@
     line-height: 2.14285714; /* 30px for 32px height with 14px font */
     padding: 0 24px 0 8px;
-    margin-top: 11px;
     margin-right: 2%;
-    max-width: 42%;
-    max-width: calc(48% - 12px);
 }
 
@@ -950 +952 @@
  */
 .media-frame .search {
-    margin: 32px 0 0;
+    margin: 0;
     padding: 4px;
     font-size: 13px;
@@ -963 +965 @@
 
 .media-modal .media-frame .media-search-input-label {
-    position: absolute;
-    left: 0;
-    top: 10px;
-    margin: 0;
-    line-height: 1;
+    display: block;
 }
 
@@ -996 +994 @@
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 .wp-core-ui .attachment:focus,
 .wp-core-ui .selected.attachment:focus,
@@ -1219 +1236 @@
 .attachments-browser .media-toolbar {
     right: 300px;
-    height: 72px;
     background: #fff;
+
 }
 
@@ -2603 +2620 @@
 
     .attachments-browser .media-toolbar {
-        height: 82px;
+        height: px;
     }
 
@@ -2609 +2626 @@
     .attachments-browser .uploader-inline,
     .media-frame-content .attachments-browser .attachments-wrapper {
-        top: 82px;
+        top: px;
     }
 

trunk/src/wp-includes/media-template.php

@@ -270 +270 @@
                 <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
                 <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
-                <button type="button" class="browser button button-hero" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
+                <button type="button" class="browser button button-hero" aria-edby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
             </div>