Real-time collaboration: Update "Join" action label in post list if lock expires

When RTC is enabled, let the "Join" action link in the post list turn into "Edit" after the post lock expires. Do this by rendering both "Edit" and "Join" as separate spans and toggling visibility via CSS using the `wp-collaborative-editing` class that heartbeat already manages. Do the same to aria-label with screen-reader-text spans so the accessible name stays in sync with the visible text across lock state changes.

Developed in WordPress#11346.

Follow-up to [62074].

Props shekharnwagh.
See #64622.



git-svn-id: https://develop.svn.wordpress.org/trunk@62146 602fd350-edb4-49c9-b593-d223f7449a82

Author: mcsf

src/wp-admin/css/list-tables.css

@@ -639,6 +639,18 @@ tr.wp-locked .row-actions .trash {
 	display: block;
 }
 
+.join-action-text {
+	display: none;
+}
+
+.wp-collaborative-editing .edit-action-text {
+	display: none;
+}
+
+.wp-collaborative-editing .join-action-text {
+	display: inline;
+}
+
 #menu-locations-wrap .widefat {
 	width: 60%;
 }

src/wp-admin/includes/class-wp-posts-list-table.php

@@ -1491,24 +1491,44 @@ protected function handle_row_actions( $item, $column_name, $primary ) {
 		$title            = _draft_or_post_title();
 
 		if ( $can_edit_post && 'trash' !== $post->post_status ) {
-			$is_rtc_locked = get_option( 'wp_collaboration_enabled' ) && wp_check_post_lock( $post->ID );
+			$is_rtc_enabled = (bool) get_option( 'wp_collaboration_enabled' );
 
-			$actions['edit'] = sprintf(
-				'<a href="%s" aria-label="%s">%s</a>',
-				get_edit_post_link( $post->ID ),
-				esc_attr(
-					sprintf(
-						$is_rtc_locked
-							/* translators: %s: Post title. */
-							? __( 'Join editing &#8220;%s&#8221;', 'post list' )
-							/* translators: %s: Post title. */
-							: __( 'Edit &#8220;%s&#8221;' ),
-						$title
-					)
-				),
-				/* translators: Action link text for a singular post in the post list. Can be any type of post. */
-				$is_rtc_locked ? _x( 'Join', 'post list' ) : __( 'Edit' )
-			);
+			/*
+			 * When RTC is enabled, both "Edit" and "Join" labels are rendered.
+			 * The visible label is toggled by CSS based on the row's
+			 * `wp-collaborative-editing` class, which is added or removed by
+			 * inline-edit-post.js in response to heartbeat ticks.
+			 */
+			if ( $is_rtc_enabled ) {
+				$actions['edit'] = sprintf(
+					'<a href="%1$s">'
+					. '<span class="edit-action-text">'
+					. '<span aria-hidden="true">%2$s</span>'
+					. '<span class="screen-reader-text">%3$s</span>'
+					. '</span>'
+					. '<span class="join-action-text">'
+					. '<span aria-hidden="true">%4$s</span>'
+					. '<span class="screen-reader-text">%5$s</span>'
+					. '</span>'
+					. '</a>',
+					get_edit_post_link( $post->ID ),
+					__( 'Edit' ),
+					/* translators: %s: Post title. */
+					sprintf( __( 'Edit &#8220;%s&#8221;' ), $title ),
+					/* translators: Action link text for a singular post in the post list. Can be any type of post. */
+					_x( 'Join', 'post list' ),
+					/* translators: %s: Post title. */
+					sprintf( __( 'Join editing &#8220;%s&#8221;', 'post list' ), $title )
+				);
+			} else {
+				$actions['edit'] = sprintf(
+					'<a href="%s" aria-label="%s">%s</a>',
+					get_edit_post_link( $post->ID ),
+					/* translators: %s: Post title. */
+					esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;' ), $title ) ),
+					__( 'Edit' )
+				);
+			}
 
 			/**
 			 * Filters whether Quick Edit should be enabled for the given post type.