Notes: Add form submission shortcut

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

@@ -16,6 +16,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId, useDebounce } from '@wordpress/compose';
+import { isKeyboardEvent } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -50,6 +51,12 @@ function CommentForm( {
 		<VStack
 			className="editor-collab-sidebar-panel__comment-form"
 			spacing="4"
+			as="form"
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				onSubmit( inputComment );
+				setInputComment( '' );
+			} }
 		>
 			<VisuallyHidden as="label" htmlFor={ inputId }>
 				{ labelText ?? __( 'Note' ) }
@@ -63,6 +70,14 @@ function CommentForm( {
 				} }
 				rows={ 1 }
 				maxRows={ 20 }
+				onKeyDown={ ( event ) => {
+					if (
+						isKeyboardEvent.primary( event, 'Enter' ) &&
+						! isDisabled
+					) {
+						event.target.parentNode.requestSubmit();
+					}
+				} }
 			/>
 			<HStack spacing="2" justify="flex-end" wrap>
 				<Button size="compact" variant="tertiary" onClick={ onCancel }>
@@ -72,10 +87,7 @@ function CommentForm( {
 					size="compact"
 					accessibleWhenDisabled
 					variant="primary"
-					onClick={ () => {
-						onSubmit( inputComment );
-						setInputComment( '' );
-					} }
+					type="submit"
 					disabled={ isDisabled }
 				>
 					<Truncate>{ submitButtonText }</Truncate>

test/e2e/specs/editor/various/block-comments.spec.js

@@ -282,7 +282,7 @@ test.describe( 'Block Comments', () => {
 		await expect( replyTextbox ).toBeVisible();
 	} );
 
-	test.describe( 'Keyboard navigation', () => {
+	test.describe( 'Keyboard', () => {
 		const KEY_COMBINATIONS = [
 			{
 				keyToExpand: 'Enter',
@@ -768,6 +768,41 @@ test.describe( 'Block Comments', () => {
 					.getByRole( 'button', { name: 'Actions' } )
 			).toBeFocused();
 		} );
+
+		test( 'can add a note using form shortcut', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'Testing block comments' },
+			} );
+			await editor.clickBlockOptionsMenuItem( 'Add note' );
+			const textbox = page.getByRole( 'textbox', {
+				name: 'New note',
+				exact: true,
+			} );
+			const thread = page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByRole( 'treeitem', {
+					name: 'Note: A test comment',
+				} );
+
+			await textbox.fill( '' );
+			await pageUtils.pressKeys( 'primary+Enter' );
+			await expect(
+				textbox,
+				`doesn't sumbit an empty form and focus remains in the textbox`
+			).toBeFocused();
+
+			await textbox.fill( 'A test comment' );
+			await pageUtils.pressKeys( 'primary+Enter' );
+
+			await expect( thread ).toBeVisible();
+			// Should focus the newly added comment thread.
+			await expect( thread ).toBeFocused();
+		} );
 	} );
 } );