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/wordpress-develop#11346.

Follow-up to [62074].

Props shekharnwagh.
See #64622.


Built from https://develop.svn.wordpress.org/trunk@62146


git-svn-id: http://core.svn.wordpress.org/trunk@61428 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Author: mcsf

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

@@ -640,6 +640,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%;
 }

wp-admin/css/list-tables-rtl.min.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%;
 }

wp-admin/css/list-tables.css

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

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

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '7.0-RC1-62145';
+$wp_version = '7.0-RC1-62146';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.