Comments form: Accessibility fixes for editor preview of comments form (

#54393) Remove inert from comments form. Disable form submit. Add accessibility support to provide an equivalent and accurate preview of the comments form to screen reader users.
WordPress · Sep 13, 2023 · 557d84b · 557d84b
1 parent 8c5dbab
commit 557d84b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
@@ -11,6 +11,9 @@ import {
 	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { VisuallyHidden } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,10 +28,14 @@ export default function PostCommentsFormEdit( {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
 
+	const instanceId = useInstanceId( PostCommentsFormEdit );
+	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
+		'aria-describedby': instanceIdDesc,
 	} );
 
 	return (
@@ -43,6 +50,9 @@ export default function PostCommentsFormEdit( {
 			</BlockControls>
 			<div { ...blockProps }>
 				<CommentsForm postId={ postId } postType={ postType } />
+				<VisuallyHidden id={ instanceIdDesc }>
+					{ __( 'Comments form disabled in editor.' ) }
+				</VisuallyHidden>
 			</div>
 		</>
 	);

diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
@@ -23,7 +23,11 @@ const CommentsFormPlaceholder = () => {
 	return (
 		<div className="comment-respond">
 			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
-			<form noValidate className="comment-form" inert="true">
+			<form
+				noValidate
+				className="comment-form"
+				onSubmit={ ( event ) => event.preventDefault() }
+			>
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
 						{ __( 'Comment' ) }
@@ -33,6 +37,7 @@ const CommentsFormPlaceholder = () => {
 						name="comment"
 						cols="45"
 						rows="8"
+						readOnly
 					/>
 				</p>
 				<p className="form-submit wp-block-button">
@@ -45,6 +50,7 @@ const CommentsFormPlaceholder = () => {
 						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
+						aria-disabled="true"
 					/>
 				</p>
 			</form>