Application Passwords: Render a row header in the AJAX row template#12690
Application Passwords: Render a row header in the AJAX row template#12690itzmekhokan wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
Improves accessibility parity for the Application Passwords admin list table by ensuring the AJAX-rendered “new row” markup matches the server-rendered row structure, specifically by rendering the primary column as a row header (<th scope="row">) so assistive technologies get correct context without requiring a page reload.
Changes:
- Update
WP_Application_Passwords_List_Table::print_js_template_row()to render the primary column as<th scope="row">instead of<td>. - Add a PHPUnit test to assert the JS template uses a
<th scope="row">for the primary column and<td>for non-primary columns.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/wp-admin/includes/class-wp-application-passwords-list-table.php |
Aligns the AJAX row template’s primary column markup with WP_List_Table::single_row_columns() by using <th scope="row">. |
tests/phpunit/tests/admin/wpApplicationPasswordsListTable.php |
Adds regression coverage to ensure the JS template renders the primary column as a row header. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| $this->assertStringContainsString( | ||
| '<th class="name column-name has-row-actions column-primary" data-colname="Name" scope="row">', | ||
| $html, | ||
| 'The primary column should be rendered as a <th scope="row"> row header.' | ||
| ); |
|
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. |
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. |
| $tag = $is_primary ? 'th' : 'td'; | ||
| $scope = $is_primary ? ' scope="row"' : ''; | ||
|
|
||
| printf( '<%1$s class="%2$s" data-colname="%3$s"%4$s>', $tag, esc_attr( $classes ), esc_attr( wp_strip_all_tags( $display_name ) ), $scope ); |
There was a problem hiding this comment.
Add translators comment
There was a problem hiding this comment.
Thanks @mukeshpanchal27. I looked into this, and I don't think a translators comment applies on this line — could you double-check?
This printf() only assembles the opening tag:
printf( '<%1$s class="%2$s" data-colname="%3$s"%4$s>', $tag, esc_attr( $classes ), esc_attr( wp_strip_all_tags( $display_name ) ), $scope );
The %1$s–%4$s placeholders are filled by $tag (th/td), $classes, $display_name, and $scope — none of them is a gettext call, so there's no translatable string here for a translators comment to describe. (The change from %s to numbered placeholders is just to keep the format readable now that there are four arguments.)
Happy to add one if you were pointing at a different line — let me know.
Tables extending WP_List_Table use a `<th scope="row">` element as the row header for the primary column so screen readers can announce it as context when navigating the table vertically. WP_List_Table::single_row_columns() renders this for server-generated rows, but the JavaScript template used when a new application password is created via AJAX rendered every cell as a `<td>`, leaving the row header missing until the page was reloaded. Render the primary column of the JavaScript row template as a `<th scope="row">` element, mirroring the server-rendered markup. Fixes #65707. See #32892.
16231a6 to
4380271
Compare
| $this->assertMatchesRegularExpression( | ||
| '/<th class="name column-name has-row-actions column-primary" data-colname="[^"]*" scope="row">/', | ||
| $html, | ||
| 'The primary column should be rendered as a <th scope="row"> row header.' | ||
| ); |
Tables extending WP_List_Table render the primary column as a
<th scope="row">element so screen readers can announce it as context when navigating the table vertically. The Application Passwords table did this for server-rendered rows but not for the JavaScript row template used when a password is created via AJAX, so the row header was missing until reload.What the problem was:
<th scope="row">(correct).<td>— the<th>row header was missing.What the fix does:
print_js_template_row()as a<th scope="row">element, mirroringWP_List_Table::single_row_columns().Approach and why:
single_row_columns()uses the same$tag/$scopelogic; reusing it keeps the two rendering paths identical. Noaria-labelis added because the table does not overrideget_primary_column_aria_label(), so the server path emits none either — adding one would introduce a new mismatch.Trac ticket: https://core.trac.wordpress.org/ticket/65707
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Ticket analysis, tests implementation, and writing PR description. All changes were reviewed and validated by me.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.