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

[afercia]

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].

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.

[afercia]

​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]

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

[afercia]

And in the media grid.

[afercia]

Labels still visually hidden in the media grid.

[afercia]

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

## 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

[joedolson]

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.

[afercia]

Not keeping the visible labels outside of the grid view was also a decision due to problems getting that layout to work.

I guess it's too late in this release cycle to restore the visible labels. Any objections to fix the unlabeled select for now and take care of the visible labels in the next release cycle. Also because, ideally, is should be done for the List view as well.

[afercia]

As an aside consideration: visually hidden labels have various cons. One of them is that they make very difficult to catch potential regressions like this one. The absence of the label is just not noticeable, because it is visually hidden. It is apparent only when using a screen reader or when manually inspecting the DOM.

For that reason, ideally, there should be E2E tests to cover all the cases where visually hidden labels are in use, in Core and in Gutenberg.
With AI tools, generating a complete suite of such tests would be feasible in a reasonable amount of time.

Even better, there shouldn't be visually hidden labels at all :)

[afercia]

In 62851:

Media: Restore the label of the 'Filter by date' select in the Media grid.

Fixes a typo after [62326] that prevented the 'Filter by date' select label from rendering.

Props joedolson, mirmpro, afercia.
Fixes #65711.

@afercia Seems ​https://github.com/WordPress/wordpress-develop/pull/12692#issuecomment-5078517466 is not updated with folks names 🤔

You missed my name 😄

[nazmulasif]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/12692

Environment

• WordPress: 7.1-beta3-20260725.124255
• Subdirectory: No
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 150.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.0

Steps taken

1. Launched the WordPress testing environment via the Playground PR preview URL: https://playground.wordpress.net/?core-pr=12692....
2. Logged into the WordPress admin dashboard, navigated to Media > Library, and switched to the Grid view.
3. Inspected the HTML markup 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.

• ✅ 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

• Successfully tested and verified pull request #12692. The fix resolves the accessibility regression caused by the property reference typo (dateFilter vs dateFilterLabel) from the previous partial code revert.

Screenshots/Screencast with results

• Yes

Support Content

• Website Playground URL with parameters used for testing:

​https://playground.wordpress.net/?core-pr=12692#%7B%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin%22,%22login%22:true,%22preferredVersions%22:%7B%22php%22:%227.4%22%7D,%22features%22:%7B%22networking%22:true%7D%7D

[nazmulasif]

After applying patch