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 History (10)
This ticket was mentioned in PR #12692 on WordPress/wordpress-develop by @afercia.
25 hours ago
#1
- Keywords has-patch added
#2
@
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-filtersdoes 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.
@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
- Logged into the WordPress admin dashboard, navigated to Media > Library, and switched to the Grid view.
- 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. - ✅ 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 (
dateFiltervsdateFilterLabel), ensuring correct screen reader compatibility.
### Screenshots/Screencast with results
- N/A
### Support Content
- N/A
#5
@
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.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
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.