RTC: Fix Edit/Join row action invisible on mobile in post list

[taipeicoder]

What?

Related to #76795.
Fixes the Edit/Join row action being invisible at <=782px on wp-admin/edit.php when RTC is enabled.

Why?

The edit row action wraps its visible label in two <span> levels inside the action's <a>. WP core's responsive list-table CSS at <=782px sets .row-actions span { font-size: 0 } and restores 13px only on the action's <a>, expecting the visible label to be a direct text child of <a> (as it is for View/Trash/etc.). With the nested spans, the visible Edit/Join word matches the font-size: 0 rule directly and renders at 0px on mobile.

How?

Render the two states as sibling <a>s sharing the same href, with the visible label as a direct text child of each and the descriptive accessible name on aria-label. The existing .wp-locked CSS selectors in gutenberg_post_list_collaboration_styles() continue to drive the toggle — class names move from the inner <span>s onto the <a>s, nothing else changes. Heartbeat behavior is untouched.

Before:

<a href="…">
  <span class="edit-action-text"><span aria-hidden="true">Edit</span><span class="screen-reader-text">Edit "Hello world!"</span></span>
  <span class="join-action-text"><span aria-hidden="true">Join</span><span class="screen-reader-text">Join editing "Hello world!"</span></span>
</a>

After:

<a class="edit-action-text" href="…" aria-label='Edit "Hello world!"'>Edit</a>
<a class="join-action-text"  href="…" aria-label='Join editing "Hello world!"'>Join</a>

Two <a>s are needed because CSS can hide/show whole elements but can't swap an element's text — keeping the toggle purely CSS-driven requires both labels in the DOM. Using aria-label matches WP core's row-action convention for View/Trash/etc.

Testing Instructions

1. Enable RTC.
2. On trunk, visit edit.php?post_type=post at viewport <=782px → "Edit" label invisible (regression repro). On this branch, label is visible.
3. At desktop (>782px), confirm Edit/Trash/View/Quick Edit are unchanged vs trunk.
4. From a second session, open a post in the editor. After ~15s the row in the first session swaps Edit → Join via heartbeat; close the editor and after ~15s it swaps back. Verify on both desktop and mobile.
5. Inspect the row DOM: visible label is a direct text child of <a>; each <a> has a post-specific aria-label; both share the same href.

Use of AI Tools

Investigation, root-cause analysis, and the patch were drafted with Claude Opus 4.7 (1M context) via Claude Code, reviewed and accepted by the human author per the WordPress AI Guidelines.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: taipeicoder <griffithchen@git.wordpress.org>
Co-authored-by: shekharnwagh <shekharnwagh@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @taipeicoder! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[shekharnwagh]

Thank you for working on this !

At smaller widths (<=782px), posts that are not being edited elsewhere show both Edit and Join. For the post that is being edited elsewhere, only Join is shown, but it is offset/misaligned compared with the other row actions. It works fine on larger widths (<=782px).

Screenshots:

Small screen (<=782px)

Small screen <782px, no post being edited elsewhere	Small screen <782px, one post being edited elsewhere

Large screen (>782px)

Large screen >782px, no post being edited elsewhere	Large screen >782px, one post being edited elsewhere

The likely cause is the interaction with core’s responsive list-table CSS. At <=782px, core applies .row-actions span a { display: inline-block; ... }, which is more specific than .join-action-text { display: none; }, so the hidden Join link becomes visible on unlocked rows. For locked rows, .wp-locked .join-action-text { display: inline; } overrides core’s mobile inline-block, causing the alignment difference.

[taipeicoder]

@shekharnwagh nice catch. Your note on CSS specificity was indeed the cause of the regression.

[shekharnwagh]

Works now on both small and large screens. Thank you for fixing this !