Post list table row headers now point to post title

The column used as the primary list table th with scope="row" was moved from the first column, containing the selection checkbox, to the second column, containing the post title and row actions in #32892.

This change significantly improves accessibility for post list tables by ensuring that the naming used for screen readers to identify the current row refers consistently to the name of the relevant post, rather than referring to a selection checkbox that may not be present if the post is not currently available for editing.

This is expected to have an impact on extenders who assign custom styles or use JavaScript to register events using the th.check-column selector or similar selectors that expect a checkbox inside the th in a posts row.

This is also potentially going to impact extenders who target row actions or post titles with the expectation they are inside a td.

Additionally, the CSS for collapsed table cells in the responsive view port has been updated to use flex layout.

What you may need to change

CSS and JS selectors targeting check columns should look for selectors targeting th.check-column or th input[type="checkbox"].

CSS and JS selectors targeting titles or row actions should look for selectors targeting td.title, td.column-title, td.page-title, td.column-primary, td .row-title, td .post-state, td .row-actions, or other similar selection patterns.

Retaining both td and th selectors will support retaining compatibility with versions of WordPress prior to 7.1.

Before and After

Code Before Change

<tr>
  <th scope="row" class="check-column">
    <input type="checkbox" name="post[]" value="123">
  </th>
  <td class="title column-title column-primary page-title">
    <a class="row-title" href="...">Hello world!</a>
  </td>
  <td class="author column-author">admin</td>
</tr>

The th is in the first column, followed by a td with the column title.

Code After Change

<tr>
  <td class="check-column">
    <input type="checkbox" name="post[]" value="123">
  </td>
  <th scope="row" class="title column-title column-primary page-title" aria-label="Hello world!">
    <a class="row-title" href="...">Hello world!</a>
  </th>
  <td class="author column-author">admin</td>
</tr>

The th is in the second column, with an aria-label containing the post title. The check-column is now a td.

Reviewed by @wildworks.

#7-1, #dev-notes, #dev-notes-7-1