From ec3e9fc0f4c15abba40ee4a2f83231409e62844e Mon Sep 17 00:00:00 2001
From: Joshua Dinh <josh@joshuadinh.tech>
Date: Mon, 27 Jan 2025 10:00:20 +0900
Subject: [PATCH] fix: add field error focus and aria-describedBy

---
 .../templates/fields/Amount/CustomAmount.tsx    | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx
index aca5bd4017..0fe90c7840 100644
--- a/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx
+++ b/src/DonationForms/resources/registrars/templates/fields/Amount/CustomAmount.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import {__} from '@wordpress/i18n';
 import CurrencyInput from 'react-currency-input-field';
-import { CurrencyInputOnChangeValues } from "react-currency-input-field/dist/components/CurrencyInputProps";
+import {CurrencyInputOnChangeValues} from 'react-currency-input-field/dist/components/CurrencyInputProps';
 
 /**
  * @since 3.0.0
@@ -22,13 +22,15 @@ const decimalSeparator = formatter.format(1.1).replace(/[0-9]/g, '');
 /**
  * @since 3.0.0
  */
-const CustomAmount = (
-    {defaultValue, fieldError, currency, value, onValueChange}: CustomAmountProps
-) => {
-
+const CustomAmount = ({defaultValue, fieldError, currency, value, onValueChange}: CustomAmountProps) => {
     return (
         <div className={classNames('givewp-fields-amount__input-container', {invalid: fieldError})}>
             <CurrencyInput
+                ref={(input) => {
+                    if (input && fieldError) {
+                        input.focus();
+                    }
+                }}
                 intlConfig={{
                     locale: navigator.language,
                     currency,
@@ -44,6 +46,7 @@ const CustomAmount = (
                 }
                 className="givewp-fields-amount__input givewp-fields-amount__input-custom"
                 aria-label={__('Enter custom amount', 'give')}
+                aria-describedby={fieldError ? 'givewp-field-error-amount' : undefined}
                 aria-invalid={fieldError ? 'true' : 'false'}
                 id="amount-custom"
                 name="amount-custom"
@@ -51,7 +54,9 @@ const CustomAmount = (
                 defaultValue={defaultValue}
                 value={value}
                 decimalsLimit={2}
-                onValueChange={(value) => {onValueChange(value !== undefined ? value : '')}}
+                onValueChange={(value) => {
+                    onValueChange(value !== undefined ? value : '');
+                }}
             />
         </div>
     );