Make WordPress Core

Opened 25 hours ago

Last modified 17 hours ago

#65711 assigned defect (bug)

Media grid: 'Filter by date' select is unlabeled and labels are not visible in the Media grid

Reported by: afercia Owned by: afercia
Priority: normal Milestone: 7.1
Component: Media Version: 7.0
Severity: normal Keywords: has-patch has-screenshots commit
Cc: Focuses: accessibility

Description

Related: #65697.

In [61757] the labels for the Media grid and Media dialog were made visible for accessibility purposes. The change also wrapped the labels and select elements within two containers.

Later, in [62326], the change was partially reverted to remove those two containers and solve some layout issues.

The partial revert included a typo: dateFilter instead of dateFilterLabel. Since then, the 'Filter by date' select is unlabeled.

Additionally, the original change was meant to make the labels visible in the Media dialog and in the Media grid. Since the partial revert, the labels are visible only in the Media dialog.

The unlabeled select should be fixed for 7.1 as it's an accessibility regression.

I'm not sure that at this point of the release cycle there is time to make the labels visible also in the Media grid, to respect the intent of the original change in [61757].

Attachments (4)

change.png (765.2 KB ) - added by afercia 25 hours ago.
The original change in WP 7.0 to make the labels visible in the media dialog
intended grid .png (242.8 KB ) - added by afercia 25 hours ago.
And in the media grid.
actual grid.png (241.2 KB ) - added by afercia 25 hours ago.
Labels still visually hidden in the media grid.
containers.png (42.8 KB ) - added by afercia 25 hours ago.
Screenshot to illustrate the two containers that were added and then removed.

Download all attachments as: .zip

Change History (10)

This ticket was mentioned in PR #12692 on WordPress/wordpress-develop by @afercia.


25 hours ago
#1

  • Keywords has-patch added

Trac ticket: https://core.trac.wordpress.org/ticket/65711

Fixes a typo that prevents the label for the 'Filter by date' select from being rendered in the Media grid.

## Use of AI Tools

Nond.

#2 @afercia
25 hours ago

  • Keywords has-patch removed

https://github.com/WordPress/wordpress-develop/pull/12692 fixes the missing label. To test:

  • On current trunk, go to WP Admin > Media, and switch the Media Library to the 'grid' view.
  • Inspect the DOM in your browser devtools and observe the select element with id media-attachment-date-filters does not have any associated label.
  • Switch to the linked PR branch.
  • Observe the select now does have an associated, visually hidden, label with text 'Filter by date'.

Note that the issue occurs only in the Media grid. It doesn't occur in the Media dialog because the media views handle these two cases separately.

@afercia
25 hours ago

The original change in WP 7.0 to make the labels visible in the media dialog

@afercia
25 hours ago

And in the media grid.

@afercia
25 hours ago

Labels still visually hidden in the media grid.

@afercia
25 hours ago

Screenshot to illustrate the two containers that were added and then removed.

#3 @afercia
25 hours ago

  • Keywords has-patch has-screenshots added
  • Owner set to afercia
  • Status newassigned

@mirmpro commented on PR #12692:


24 hours ago
#4

## Patch tested Report

### Environment

  • WordPress: 7.0.2
  • Subdirectory: No
  • PHP: 8.5.1
  • Server: nginx/1.26.1
  • Database: mysqli (Server: 10.6.23-MariaDB / Client: mysqlnd 8.5.1)
  • Browser: Chrome 150.0.0.0
  • OS: Windows 10/11
  • Theme: Twenty Twenty-Five 1.4
  • MU Plugins: None activated
  • Plugins:
    • Core Rollback 1.4.2
    • Test Reports 1.3.0

### Steps taken

  1. Logged into the WordPress admin dashboard, navigated to Media > Library, and switched to the Grid view.
  2. Inspected the HTML source of the media toolbar filters to verify the presence and association of the <label for="media-attachment-date-filters">Filter by date</label> element directly preceding the <select id="media-attachment-date-filters"> dropdown.
  3. ✅ Patch is solving the problem

### Expected result

  • The "Filter by date" select element in the Media Library grid view should be correctly labeled and associated via the proper ID/for attribute relationship for accessibility compliance.

### Additional Notes

  • The patch resolves the missing label regression caused by the previous ID reference mapping typo (dateFilter vs dateFilterLabel), ensuring correct screen reader compatibility.

### Screenshots/Screencast with results

  • N/A

### Support Content

  • N/A

#5 @joedolson
22 hours ago

The partial revert was entirely because of the API breakage in AttachmentFilters, not because of layout issues. Ideally, restoring the wrappers would be much preferable, but I wasn't able to resolve that at the time - keeping the wrappers and also keeping the filter API promise intact. Not keeping the visible labels outside of the grid view was also a decision due to problems getting that layout to work.

Restoring the wrappers would be a much better solution, as it makes the CSS considerably less complicated - the grid solution is definitely nothing but an awkward workaround.

#6 @joedolson
17 hours ago

  • Keywords commit added
Note: See TracTickets for help on using tickets.