Contact Form: add accessible name to form (#34667)

* Contact Form: add accessible name to form

* Update accessible name on content change

* Remove unused code

* Fix package version

* Add warning notice

projects/packages/forms/changelog/add-contact-form-accessible-name

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Contact Form: add accessible name to form

projects/packages/forms/src/blocks/contact-form/components/jetpack-manage-responses-settings.js

@@ -1,17 +1,13 @@
 import { getJetpackData } from '@automattic/jetpack-shared-extension-utils';
-import { Button, TextControl } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { get } from 'lodash';
 import React from 'react';
 import InspectorHint from '../components/inspector-hint';
 
 const RESPONSES_PATH = `${ get( getJetpackData(), 'adminUrl', false ) }edit.php?post_type=feedback`;
 
-const JetpackManageResponsesSettings = ( {
-	formTitle = '',
-	isChildBlock = false,
-	setAttributes,
-} ) => {
+const JetpackManageResponsesSettings = () => {
 	return (
 		<>
 			<InspectorHint>
@@ -23,15 +19,6 @@ const JetpackManageResponsesSettings = ( {
 					{ __( '(opens in a new tab)', 'jetpack-forms' ) }
 				</span>
 			</Button>
-			{ /* Temporarily hiding the Form Title */ }
-			{ false && ! isChildBlock && (
-				<TextControl
-					label={ __( 'Title of the Form', 'jetpack-forms' ) }
-					value={ formTitle }
-					onChange={ value => setAttributes( { formTitle: value } ) }
-					help={ __( 'Optional - not visible to viewers', 'jetpack-forms' ) }
-				/>
-			) }
 		</>
 	);
 };

projects/packages/forms/src/blocks/contact-form/edit.js

@@ -20,6 +20,7 @@ import {
 	SelectControl,
 	TextareaControl,
 	TextControl,
+	Notice,
 } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -36,6 +37,7 @@ import JetpackEmailConnectionSettings from './components/jetpack-email-connectio
 import JetpackManageResponsesSettings from './components/jetpack-manage-responses-settings';
 import NewsletterIntegrationSettings from './components/jetpack-newsletter-integration-settings';
 import SalesforceLeadFormSettings from './components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings';
+import useFormAccessibleName from './hooks/use-form-accessible-name';
 import { withStyleVariables } from './util/with-style-variables';
 import defaultVariations from './variations';
 
@@ -159,6 +161,8 @@ export const JetpackContactFormEdit = forwardRef(
 			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] );
 
+		useFormAccessibleName( formTitle, clientId, setAttributes );
+
 		useEffect( () => {
 			if ( to === undefined && postAuthorEmail ) {
 				setAttributes( { to: postAuthorEmail } );
@@ -305,11 +309,18 @@ export const JetpackContactFormEdit = forwardRef(
 		return (
 			<>
 				<InspectorControls>
+					{ ! attributes.formTitle && (
+						<PanelBody>
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'Add a heading inside the form or before it to help everybody identify it.',
+									'jetpack-forms'
+								) }
+							</Notice>{ ' ' }
+						</PanelBody>
+					) }
 					<PanelBody title={ __( 'Manage Responses', 'jetpack-forms' ) }>
-						<JetpackManageResponsesSettings
-							formTitle={ formTitle }
-							setAttributes={ setAttributes }
-						/>
+						<JetpackManageResponsesSettings setAttributes={ setAttributes } />
 					</PanelBody>
 					<PanelBody title={ __( 'Submission Settings', 'jetpack-forms' ) } initialOpen={ false }>
 						{ renderSubmissionSettings() }

projects/packages/forms/src/blocks/contact-form/hooks/use-form-accessible-name.js

@@ -0,0 +1,53 @@
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+const getNameFromBlockHeading = block => {
+	const innerHeading = block.innerBlocks?.find( b => b.name === 'core/heading' );
+
+	return innerHeading?.attributes?.content;
+};
+
+const getNameFromBlockPreviousHeadings = ( block, pageBlocks ) => {
+	const blockIndex = pageBlocks.findIndex( b => b.clientId === block.clientId );
+	const previousBlocks = pageBlocks.slice( 0, blockIndex );
+	const closestHeading = previousBlocks.findLast( b => b.name === 'core/heading' );
+
+	return closestHeading?.attributes?.content;
+};
+
+/**
+ * Update the form accessible stored in the `formTitle` attribute as the block or page
+ * content changes. The heuristic is as follows:
+ * 1. Look for a heading inside the form
+ * 2. Look for a heading in the previous siblings
+ * 3. Use the post title (in Contact_Form::parse, server side)
+ *
+ * @param {string} formTitle - The form title
+ * @param {string} clientId - The block unique identifier
+ * @param {Function} setAttributes - Function to call to update one or more attributes
+ */
+export default function useFormAccessibleName( formTitle, clientId, setAttributes ) {
+	const { pageBlocks } = useSelect( select => ( {
+		pageBlocks: select( 'core/block-editor' ).getBlocks(),
+	} ) );
+
+	useEffect( () => {
+		const currentBlock = pageBlocks.find( block => block.clientId === clientId );
+
+		let name = '';
+
+		if ( currentBlock ) {
+			// #1
+			name = getNameFromBlockHeading( currentBlock );
+
+			if ( ! name ) {
+				// #2
+				name = getNameFromBlockPreviousHeadings( currentBlock, pageBlocks );
+			}
+		}
+
+		if ( formTitle !== name ) {
+			setAttributes( { formTitle: name } );
+		}
+	}, [ clientId, formTitle, setAttributes, pageBlocks ] );
+}

projects/packages/forms/src/contact-form/class-contact-form.php

@@ -240,6 +240,8 @@ public static function style_on() {
 	 * @return string HTML for the concat form.
 	 */
 	public static function parse( $attributes, $content ) {
+		global $post;
+
 		if ( Settings::is_syncing() ) {
 			return '';
 		}
@@ -352,12 +354,14 @@ public static function parse( $attributes, $content ) {
 			$url                     = apply_filters( 'grunion_contact_form_form_action', "{$url}#contact-form-{$id}", $GLOBALS['post'], $id );
 			$has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' );
 			$form_classes            = 'contact-form commentsblock';
+			$form_accessible_name    = $attributes['formTitle'] ? $attributes['formTitle'] : $post->post_title;
+			$form_aria_label         = isset( $form_accessible_name ) && ! empty( $form_accessible_name ) ? 'aria-label="' . esc_attr( $form_accessible_name ) . '"' : '';
 
 			if ( $has_submit_button_block ) {
 				$form_classes .= ' wp-block-jetpack-contact-form';
 			}
 
-			$r .= "<form role='form' action='" . esc_url( $url ) . "' method='post' class='" . esc_attr( $form_classes ) . "' novalidate>\n";
+			$r .= "<form action='" . esc_url( $url ) . "' method='post' class='" . esc_attr( $form_classes ) . "' $form_aria_label novalidate>\n";
 			$r .= $form->body;
 
 			// In new versions of the contact form block the button is an inner block

projects/plugins/jetpack/changelog/add-contact-form-accessible-name

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+