From 38a83068c47be5939a1de189b9868048a998331c Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 30 Jan 2026 18:12:13 -0600 Subject: [PATCH 1/7] Make labels visible for filters Changes the current filter heading to be hidden using .screen-reader-text, changes the labels to be visible. Adds wrapper around the labels & inputs for filters for styling, updates styling to adapt for visible labels. --- src/js/media/views/attachments/browser.js | 79 +++++++++++++++++------ src/js/media/views/label.js | 1 - src/wp-includes/css/media-views.css | 49 ++++++-------- 3 files changed, 76 insertions(+), 53 deletions(-) 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 - value="0"> - year ) { - continue; - } +
+ + + printf( + "\n", + selected( $selected_month, $year . $month, false ), + esc_attr( $year . $month ), + /* translators: 1: Month name, 2: 4-digit year. */ + esc_html( sprintf( __( '%1$s %2$d' ), $wp_locale->get_month( $month ), $year ) ) + ); + } + ?> + +
view_switcher( $mode ); ?> - - - + $view ) { + echo "\t$view\n"; + } } - } - ?> - + ?> + +
extra_tablenav( 'bar' ); From dac051d498b4d1c7cb0022c2d20067cfa36195cd Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 30 Jan 2026 19:38:21 -0600 Subject: [PATCH 7/7] Revert "Adjust in list view" This reverts commit 191054490e9f5f871b1fd45a4e77e8d9712bf6ac. --- src/wp-admin/css/common.css | 3 -- src/wp-admin/css/list-tables.css | 3 +- src/wp-admin/includes/class-wp-list-table.php | 42 +++++++++---------- .../includes/class-wp-media-list-table.php | 31 +++++++------- 4 files changed, 37 insertions(+), 42 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a0dca5ea0330c..e062a471d7150 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1058,9 +1058,6 @@ th.action-links { .filter-items { float: left; - display: flex; - align-items: center; - gap: 12px; } .filter-links { diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 1bbe7c751a805..80e652003a33c 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -727,7 +727,8 @@ th.sorted a span { } .wp-filter .actions { - display: flex; + display: inline-block; + vertical-align: middle; } .tablenav .delete { diff --git a/src/wp-admin/includes/class-wp-list-table.php b/src/wp-admin/includes/class-wp-list-table.php index 8a1e0f5842645..a67921824397a 100644 --- a/src/wp-admin/includes/class-wp-list-table.php +++ b/src/wp-admin/includes/class-wp-list-table.php @@ -760,30 +760,28 @@ protected function months_dropdown( $post_type ) { $selected_month = isset( $_GET['m'] ) ? (int) $_GET['m'] : 0; ?> -
- - + value="0"> + year ) { + continue; + } - $month = zeroise( $arc_row->month, 2 ); - $year = $arc_row->year; + $month = zeroise( $arc_row->month, 2 ); + $year = $arc_row->year; - printf( - "\n", - selected( $selected_month, $year . $month, false ), - esc_attr( $year . $month ), - /* translators: 1: Month name, 2: 4-digit year. */ - esc_html( sprintf( __( '%1$s %2$d' ), $wp_locale->get_month( $month ), $year ) ) - ); - } - ?> - -
+ printf( + "\n", + selected( $selected_month, $year . $month, false ), + esc_attr( $year . $month ), + /* translators: 1: Month name, 2: 4-digit year. */ + esc_html( sprintf( __( '%1$s %2$d' ), $wp_locale->get_month( $month ), $year ) ) + ); + } + ?> +
view_switcher( $mode ); ?> -
- - + $view ) { + echo "\t$view\n"; } - ?> - -
+ } + ?> + extra_tablenav( 'bar' );