fix: ValidatedTextInput attribute (#51971)

* fix: ValidatedTextInput  attribute

* lint in muh belly

* TDD

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* undo props change

* custom error message prop

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/packages/components/text-input/test/validated-text-input.tsx

@@ -117,6 +117,9 @@ describe( 'ValidatedTextInput', () => {
 			screen.queryByText( 'Error message in data store' )
 		).not.toBeInTheDocument();
 		await expect( customErrorMessageElement ).toBeInTheDocument();
+		expect( screen.getByRole( 'textbox' ) ).toHaveAccessibleErrorMessage(
+			'Custom error message'
+		);
 	} );
 	it( 'Displays an error message from the data store', async () => {
 		render(
@@ -138,6 +141,38 @@ describe( 'ValidatedTextInput', () => {
 		);
 		const errorMessageElement = await screen.getByText( 'Error message 3' );
 		await expect( errorMessageElement ).toBeInTheDocument();
+		expect( screen.getByRole( 'textbox' ) ).toHaveAccessibleErrorMessage(
+			'Error message 3'
+		);
+	} );
+	it( 'References the error message provided by its props', async () => {
+		render(
+			<>
+				<ValidatedTextInput
+					instanceId={ '2' }
+					onChange={ () => void 0 }
+					value={ 'Test' }
+					label={ 'Test Input' }
+					errorMessage={ 'Custom error message' }
+					aria-errormessage={ 'custom-error-message-container' }
+				/>
+				<p id={ 'custom-error-message-container' }>
+					Completely separate error message
+				</p>
+			</>
+		);
+		await act( () =>
+			dispatch( VALIDATION_STORE_KEY ).setValidationErrors( {
+				'textinput-2': {
+					message: 'Error message in data store',
+					hidden: false,
+				},
+			} )
+		);
+
+		expect( screen.getByRole( 'textbox' ) ).toHaveAccessibleErrorMessage(
+			'Completely separate error message'
+		);
 	} );
 	it( 'Runs custom validation on the input', async () => {
 		const user = userEvent.setup();

plugins/woocommerce-blocks/packages/components/text-input/validated-text-input.tsx

@@ -232,10 +232,6 @@ const ValidatedTextInput = forwardRef<
 		}
 
 		const hasError = validationError?.message && ! validationError?.hidden;
-		const describedBy =
-			showError && hasError && validationErrorId
-				? validationErrorId
-				: ariaDescribedBy;
 
 		return (
 			<TextInput
@@ -244,12 +240,20 @@ const ValidatedTextInput = forwardRef<
 				} ) }
 				aria-invalid={ hasError === true }
 				id={ textInputId }
+				aria-errormessage={
+					// we're using the internal `aria-errormessage` attribute, calculated from the data store.
+					// If a consumer wants to overwrite the attribute, they can pass a prop.
+					showError && hasError && validationErrorId
+						? validationErrorId
+						: undefined
+				}
 				type={ type }
 				feedback={
 					showError && hasError ? (
 						<ValidationInputError
 							errorMessage={ passedErrorMessage }
 							propertyName={ errorIdString }
+							elementId={ errorIdString }
 						/>
 					) : (
 						feedback
@@ -271,7 +275,7 @@ const ValidatedTextInput = forwardRef<
 					}
 				} }
 				onBlur={ () => validateInput( false ) }
-				ariaDescribedBy={ describedBy }
+				ariaDescribedBy={ ariaDescribedBy }
 				value={ value }
 				title="" // This prevents the same error being shown on hover.
 				label={ label }

plugins/woocommerce/changelog/51971-fix-block-validated-input-aria-errormessage-attribute

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: ValidatedTextInput aria-errormessage matching