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 Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com 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 Cascading Style Sheets. for collapsed table cells in the responsive view port has been updated to use flex layout.

CSS and JS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. 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.

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

<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