Release my-jetpack

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/7103461055

CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.24.3-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Added
+- Contact Form: added submitting state
+
+### Changed
+- Contact Form: align checkbox and radio button baselines
+- Updated package dependencies.
+
+### Fixed
+- Contact Form: fix checkbox field layout in editor
+
 ## [0.24.2] - 2023-12-03
 ### Added
 - Made forms a screen reader region. [#34344]
@@ -396,6 +410,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a new jetpack/forms package [#28409]
 - Added a public load_contact_form method for initializing the contact form module. [#28416]
 
+[0.24.3-alpha]: https://github.com/automattic/jetpack-forms/compare/v0.24.2...v0.24.3-alpha
 [0.24.2]: https://github.com/automattic/jetpack-forms/compare/v0.24.1...v0.24.2
 [0.24.1]: https://github.com/automattic/jetpack-forms/compare/v0.24.0...v0.24.1
 [0.24.0]: https://github.com/automattic/jetpack-forms/compare/v0.23.1...v0.24.0

dist/blocks/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '814c36a10f0db8505d17');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '7f6b39fdba8f659a9c49');

package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.24.2",
+	"version": "0.24.3-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {
@@ -30,8 +30,8 @@
 	],
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.29",
-		"@automattic/jetpack-components": "^0.45.4",
-		"@automattic/jetpack-shared-extension-utils": "^0.13.3",
+		"@automattic/jetpack-components": "^0.45.5-alpha",
+		"@automattic/jetpack-shared-extension-utils": "^0.13.4-alpha",
 		"@wordpress/block-editor": "12.15.0",
 		"@wordpress/blocks": "12.24.0",
 		"@wordpress/compose": "6.24.0",
@@ -60,8 +60,8 @@
 		"@automattic/jetpack-base-styles": "^0.6.14",
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@automattic/remove-asset-webpack-plugin": "^1.0.21",
-		"@babel/core": "7.23.2",
-		"@babel/runtime": "7.23.2",
+		"@babel/core": "7.23.5",
+		"@babel/runtime": "7.23.5",
 		"@wordpress/api-fetch": "6.44.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "4.30.0",
 		"@wordpress/browserslist-config": "5.30.0",

src/class-jetpack-forms.php

@@ -15,7 +15,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.24.2';
+	const PACKAGE_VERSION = '0.24.3-alpha';
 
 	/**
 	 * Load the contact form module.

src/contact-form/class-contact-form-plugin.php

@@ -273,6 +273,8 @@ protected function __construct() {
 				'invalidForm'          => __( 'Please make sure all fields are valid.', 'jetpack-forms' ),
 				/* translators: error message shown when a multiple choice field requires at least one option to be selected. */
 				'checkboxMissingValue' => __( 'Please select at least one option.', 'jetpack-forms' ),
+				/* translators: text read by a screen reader when a form is being submitted */
+				'submittingForm'       => __( 'Submitting form', 'jetpack-forms' ),
 			)
 		);
 

src/contact-form/css/grunion.css

@@ -80,7 +80,6 @@
 .contact-form input[type='checkbox'] {
 	width: 1rem;
 	height: 1rem;
-	float: none;
 	margin: 0 0.75rem 0 0;
 }
 
@@ -115,11 +114,8 @@
 .contact-form label.checkbox-multiple,
 .contact-form label.radio {
 	margin-bottom: 0;
-	float: none;
 	font-weight: normal;
-	display: inline-flex;
-	align-items: center;
-	line-height: 1;
+	flex: 1;
 }
 
 .contact-form .grunion-checkbox-multiple-options,
@@ -160,6 +156,7 @@
 .contact-form .grunion-checkbox-multiple-options .contact-form-field,
 .contact-form .grunion-radio-options .contact-form-field {
 	display: flex;
+	align-items: baseline;
 
 	margin: 0;
 }
@@ -633,65 +630,51 @@ on production builds, the attributes are being reordered, causing side-effects
 
 .contact-form .grunion-field-wrap input.checkbox-multiple,
 .contact-form .grunion-field-wrap input.radio {
-	align-items: center;
-	appearance: none;
-	color: var(--jetpack--contact-form--text-color);
-	border: none;
-	font-size: var(--jetpack--contact-form--font-size);
-	font-family: var(--jetpack--contact-form--font-family);
-	height: var(--jetpack--contact-form--font-size);
-	justify-content: center;
-	margin: 0 10px 0 0;
-	padding: 0;
 	position: relative;
-	width: var(--jetpack--contact-form--font-size);
-}
 
-.contact-form .grunion-field-wrap input.checkbox-multiple::after,
-.contact-form .grunion-field-wrap input.checkbox-multiple::before,
-.contact-form .grunion-field-wrap input.radio::after,
-.contact-form .grunion-field-wrap input.radio::before {
-	all: initial;
-	color: inherit;
-	font-size: inherit;
-	font-family: inherit;
-}
-
-.contact-form .grunion-field-wrap input.checkbox-multiple::before,
-.contact-form .grunion-field-wrap input.radio::before {
-	align-items: center;
-	border-color: currentColor;
-	border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px);
-	border-style: solid;
-	border-width: 1px;
 	box-sizing: border-box;
-	content: ' ';
-	display: flex;
-	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-	font-weight: 400;
-	height: var(--jetpack--contact-form--font-size);
-	justify-content: center;
 	width: var(--jetpack--contact-form--font-size);
+	height: var(--jetpack--contact-form--font-size);
+	margin-inline-end: calc(var(--jetpack--contact-form--font-size) / 2);
+	padding: 0;
+
+	appearance: none;
+	border: solid 1px var(--jetpack--contact-form--text-color);
+
+	outline-offset: 4px;
 }
 
-.contact-form .grunion-field-wrap input.radio::before {
+.contact-form .grunion-field-wrap input.radio {
 	border-radius: 50%;
+
+	transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */
 }
 
 .contact-form .grunion-field-wrap input.checkbox-multiple:checked::before {
 	content: "\2713";
+
+	position: absolute;
+	top: calc(var(--jetpack--contact-form--font-size) / 2);
+	left: calc(var(--jetpack--contact-form--font-size) / 2);
+
+	display: block;
+
+	font-size: var(--jetpack--contact-form--font-size);
+	line-height: 1;
+
+  transform: translate(-50%, -50%);
 }
 
-.contact-form .grunion-field-wrap input.radio:checked::after {
+.contact-form .grunion-field-wrap input.radio:checked::before {
 	background: currentColor;
 	border-radius: 50%;
 	content: '';
-	height: 0.5em;
+	height: calc(var(--jetpack--contact-form--font-size) / 2);
+	margin-left: 50%;
+	margin-top: 50%;
 	position: absolute;
 	transform: translate(-50%, -50%);
-	width: 0.5em;
-	top: calc(var(--jetpack--contact-form--font-size) / 2);
-	inset-inline-start: calc(var(--jetpack--contact-form--font-size) / 2);
+	width: calc(var(--jetpack--contact-form--font-size) / 2);
 }
 
 .contact-form .grunion-field-wrap.is-style-button-wrap .grunion-checkbox-multiple-label,
@@ -821,4 +804,29 @@ on production builds, the attributes are being reordered, causing side-effects
 .contact-form__checkbox-wrap {
 	display: inline-flex;
 	align-items: baseline;
+}
+
+.contact-form :is([type="submit"],button:not([type="reset"])) {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5em;
+}
+
+.contact-form .contact-form__spinner {
+	fill: currentColor;
+}
+
+.contact-form .contact-form__spinner svg {
+	/* Ensure container is of the exact same dimension */
+	display: block;
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }

src/contact-form/js/accessible-form.js

@@ -33,19 +33,26 @@ const initForm = form => {
 	}
 
 	form.addEventListener( 'submit', e => {
+		e.preventDefault();
+
+		const submitBtn = getFormSubmitBtn( form );
+
+		// If form is submitting, do nothing.
+		if ( submitBtn && submitBtn.getAttribute( 'aria-disabled' ) === 'true' ) {
+			return;
+		}
+
 		clearErrors( form );
 
 		if ( form.checkValidity() ) {
-			const submitBtn = getFormSubmitBtn( form );
+			// We should avoid using `disabled` when possible. One of the reasons is that `disabled`
+			// buttons lose their focus, which can be confusing. Better use `aria-disabled` instead.
+			// Ref. https://css-tricks.com/making-disabled-buttons-more-inclusive/#aa-aria-to-the-rescue
+			submitBtn.setAttribute( 'aria-disabled', true );
+			submitBtn.appendChild( createSpinner() );
 
-			if ( submitBtn ) {
-				// TODO: implement loading state
-				// Temporarily prevents the user from submitting the form multiple times.
-				submitBtn.disabled = true;
-			}
+			form.submit();
 		} else {
-			e.preventDefault();
-
 			setErrors( form );
 		}
 	} );
@@ -110,6 +117,33 @@ const getFormInvalidFields = form => {
  * BUILDERS
  ******************************************************************************/
 
+/**
+ * Create a new spinner.
+ * @returns {HTMLSpanElement} Spinner
+ */
+const createSpinner = () => {
+	const elt = document.createElement( 'span' );
+	const spinner = document.createElement( 'span' );
+	const srText = document.createElement( 'span' );
+
+	// Hide SVG from screen readers
+	spinner.setAttribute( 'aria-hidden', true );
+	// Inlining the SVG rather than embedding it in an <img> tag allows us to set the `fill` property
+	// in CSS.
+	spinner.innerHTML =
+		'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>';
+
+	// Spinner replacement for screen readers
+	srText.classList.add( 'visually-hidden' );
+	srText.textContent = L10N.submittingForm || 'Submitting form';
+
+	elt.classList.add( 'contact-form__spinner' );
+	elt.appendChild( spinner );
+	elt.appendChild( srText );
+
+	return elt;
+};
+
 /**
  * Create a new warning icon.
  * @returns {HTMLSpanElement} Warning icon