Block Comments: Try the alt method for transferring focus to sidebar

packages/editor/src/components/collab-sidebar/add-comment.js

@@ -7,26 +7,22 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 import { focusCommentThread } from './utils';
 
-/**
- * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
- *
- * @param {Object}   props                     - The component props.
- * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.
- * @param {boolean}  props.showCommentBoard    - The function to edit the comment.
- * @param {Function} props.setShowCommentBoard - The function to delete the comment.
- * @param {Ref}      props.commentSidebarRef   - The ref to the comment sidebar.
- * @return {React.ReactNode} The rendered comment input UI.
- */
+const { useBlockElement } = unlock( blockEditorPrivateApis );
+
 export function AddComment( {
 	onSubmit,
 	showCommentBoard,
@@ -44,8 +40,10 @@ export function AddComment( {
 					? isUnmodifiedDefaultBlock( selectedBlock )
 					: false,
 			};
-		}
+		},
+		[]
 	);
+	const blockElement = useBlockElement( clientId );
 
 	if (
 		! showCommentBoard ||
@@ -56,8 +54,6 @@ export function AddComment( {
 		return null;
 	}
 
-	const commentLabel = __( 'New Comment' );
-
 	return (
 		<VStack
 			className="editor-collab-sidebar-panel__thread is-selected"
@@ -75,9 +71,10 @@ export function AddComment( {
 				} }
 				onCancel={ () => {
 					setShowCommentBoard( false );
+					blockElement?.focus();
 				} }
 				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
-				labelText={ commentLabel }
+				labelText={ __( 'New Comment' ) }
 			/>
 		</VStack>
 	);

packages/editor/src/components/collab-sidebar/index.js

@@ -26,6 +26,7 @@ import {
 	useBlockCommentsActions,
 	useEnableFloatingSidebar,
 } from './hooks';
+import { focusCommentThread } from './utils';
 
 function CollabSidebarContent( {
 	showCommentBoard,
@@ -68,6 +69,7 @@ function CollabSidebarContent( {
  */
 export default function CollabSidebar() {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
@@ -89,11 +91,6 @@ export default function CollabSidebar() {
 			: null;
 	}, [] );
 
-	const openCollabBoard = () => {
-		setShowCommentBoard( true );
-		enableComplementaryArea( 'core', collabHistorySidebarName );
-	};
-
 	const { resultComments, unresolvedSortedThreads, totalPages } =
 		useBlockComments( postId );
 	useEnableFloatingSidebar( resultComments.length > 0 );
@@ -114,15 +111,36 @@ export default function CollabSidebar() {
 		return null;
 	}
 
+	async function openTheSidebar() {
+		enableComplementaryArea( 'core', collabHistorySidebarName );
+		const activeArea = await getActiveComplementaryArea( 'core' );
+
+		// Move focus to the target element after the sidebar has opened.
+		if (
+			[ collabHistorySidebarName, collabSidebarName ].includes(
+				activeArea
+			)
+		) {
+			setShowCommentBoard( ! blockCommentId );
+			focusCommentThread(
+				blockCommentId,
+				commentSidebarRef.current,
+				// Focus a comment thread when there's a selected block with a comment.
+				! blockCommentId ? 'textarea' : undefined
+			);
+		}
+	}
+
 	return (
 		<>
 			{ blockCommentId && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
 					hasMoreComments={ hasMoreComments }
+					onClick={ openTheSidebar }
 				/>
 			) }
-			<AddCommentMenuItem onClick={ openCollabBoard } />
+			<AddCommentMenuItem onClick={ openTheSidebar } />
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
 				// translators: Comments sidebar title

packages/editor/src/components/collab-sidebar/utils.js

@@ -98,11 +98,14 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
  * @param {string}       additionalSelector The additional selector to focus on.
  */
 export function focusCommentThread( commentId, container, additionalSelector ) {
-	if ( ! commentId || ! container ) {
+	if ( ! container ) {
 		return;
 	}
 
-	const threadSelector = `[role=listitem][id="comment-thread-${ commentId }"]`;
+	// A thread without a commentId is a new comment thread.
+	const threadSelector = commentId
+		? `[role=listitem][id="comment-thread-${ commentId }"]`
+		: '[role=listitem]:not([id])';
 	const selector = additionalSelector
 		? `${ threadSelector } ${ additionalSelector }`
 		: threadSelector;