diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 295418bbccf2c..e2129643bbe03 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -193,35 +193,46 @@ 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({ + var 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({ + }); + var dateFilter = new wp.media.view.DateFilter({ controller: this.controller, model: this.collection.props, - priority: -75 - }).render() ); + }); + + var 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(); // BulkSelection is a
with subviews, including screen reader text. this.toolbar.set( 'selectModeToggleButton', new wp.media.view.SelectModeToggleButton({ @@ -363,18 +387,31 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro } else if ( this.options.date ) { // DateFilter is a