List Table: Fix incorrect use of row headers in post list tables - #9761
List Table: Fix incorrect use of row headers in post list tables#9761himanshupathak95 wants to merge 11 commits into
Conversation
|
Other list tables, such as the Users list and multi-site tables, are yet to be updated. Additionally, the styling has been affected, which I will address in the subsequent commits. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
484b7f2 to
f3d1db4
Compare
|
The styles of the plugins list table and highly coupled, and removing padding on unselected rows is affecting other headers. Debugging deeper into this - Screen.Recording.2025-09-09.at.15.23.37.mov |
f3d1db4 to
5298ab1
Compare
…the checkbox column
2539f61 to
8a672c2
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Considered using the post excerpt, as added elsewhere, but it doesn't return a value in excerpt mode for the view
The `select` column has been the `th` with row scope for post list tables since at least 2010. This results in a row name for screen readers that is based on the checkbox input and its label, which can be an empty value when that input is not available. Move the `th` to the post title column, change the select column to `td`, and add `aria-label` to the `th` to provide a simplified row name to supporting screen readers. Styles are additive, to retain support for custom list table implementations. Developed in #9761 Props afercia, abcd95, ozgursar, nikunj8866, joedolson. Fixes #32892. git-svn-id: https://develop.svn.wordpress.org/trunk@62838 602fd350-edb4-49c9-b593-d223f7449a82
The `select` column has been the `th` with row scope for post list tables since at least 2010. This results in a row name for screen readers that is based on the checkbox input and its label, which can be an empty value when that input is not available. Move the `th` to the post title column, change the select column to `td`, and add `aria-label` to the `th` to provide a simplified row name to supporting screen readers. Styles are additive, to retain support for custom list table implementations. Developed in WordPress/wordpress-develop#9761 Props afercia, abcd95, ozgursar, nikunj8866, joedolson. Fixes #32892. Built from https://develop.svn.wordpress.org/trunk@62838 git-svn-id: http://core.svn.wordpress.org/trunk@62118 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Trac ticket: https://core.trac.wordpress.org/ticket/32892
Changes the semantic structure so that:
<td>instead of<th scope="row"><th scope="row">as proper row headersThis ensures screen readers announce meaningful content (post titles, usernames, etc.) as row headers instead of "Select [item]" from checkboxes.
aria-labelHandling: Added aget_primary_column_aria_label()hook directly inWP_List_Tableso the parent class is responsible for attachingaria-labelto primary column row headers rather than delegating to subclasses.WP_Posts_List_Table,WP_Plugins_List_Table,WP_Users_List_Table, andWP_MS_Themes_List_Tableto return each item's clean, human-readable identifier. This resolves the screen-reader duplication caused by the row header's accessible name being computed from full cell content (including row actions and excerpt).abbrattribute as flagged by reviewers.common.css,list-tables.css, andforms.cssto addtd.check-columnselectors alongside the existingth.check-columnrules, and extended responsivecolumn-primarysibling selectors to cover the<th>case.