diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 295418bbccf2c..65936efc186ef 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -193,37 +193,49 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro priority: -100, text: l10n.filterAttachments, level: 'h2', - className: 'media-attachments-filter-heading' + className: 'media-attachments-filter-heading screen-reader-text' }).render() ); } if ( showFilterByType ) { // "Filters" is a , a visually hidden label element needs to be rendered before. - this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({ + dateFilterLabel = 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, + }); + + 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 + priority: -75 }).render() ); // BulkSelection is a
with subviews, including screen reader text. @@ -363,17 +388,30 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro } else if ( this.options.date ) { // DateFilter is a