From a0b97df1a7ca79437e2e05aad414cee460d6337f Mon Sep 17 00:00:00 2001
From: Matthias Kittsteiner <mk@kittmedia.com>
Date: Sun, 6 Aug 2023 21:55:22 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Mark=20invalid=20fields=20?=
 =?UTF-8?q?via=20area=20for=20screen=20readers=20Closes=20#25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/validation.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/assets/js/validation.js b/assets/js/validation.js
index 663d2f2..2dbf3aa 100644
--- a/assets/js/validation.js
+++ b/assets/js/validation.js
@@ -266,5 +266,38 @@ document.addEventListener( 'DOMContentLoaded', function() {
 				} );
 			};
 		};
+		
+		const newFormErrorObserver = new MutationObserver( function( mutations, observer ) {
+			const formErrors = form.querySelectorAll( '.form-error' );
+			const oldFormErrors = form.querySelectorAll( '.form-block__element:not(.form-error) [aria-invalid="true"]' );
+			
+			if ( formErrors ) {
+				for ( const formError of formErrors ) {
+					if ( formError.classList.contains( 'wp-block-form-block-input' ) ) {
+						formError.querySelector( 'input' ).ariaInvalid = true;
+					}
+					else if ( formError.classList.contains( 'wp-block-form-block-select' ) ) {
+						formError.querySelector( 'select' ).ariaInvalid = true;
+					}
+					else if ( formError.classList.contains( 'wp-block-form-block-textarea' ) ) {
+						formError.querySelector( 'textarea' ).ariaInvalid = true;
+					}
+				};
+			}
+			
+			if ( oldFormErrors ) {
+				for ( const oldFormError of oldFormErrors ) {
+					oldFormError.ariaInvalid = false;
+				}
+			}
+		} );
+		
+		newFormErrorObserver.observe(
+			form,
+			{
+				attributeFilter: [ 'class' ],
+				subtree: true,
+			}
+		);
 	};
 } );