fix: add field error focus and aria-describedBy

impress-org · Jan 27, 2025 · ec3e9fc · ec3e9fc
1 parent d01c4a2
commit ec3e9fc
Showing 1 changed file with 11 additions and 6 deletions.
diff --git 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,14 +46,17 @@ 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"
                 placeholder={__('Enter custom amount', 'give')}
                 defaultValue={defaultValue}
                 value={value}
                 decimalsLimit={2}
-                onValueChange={(value) => {onValueChange(value !== undefined ? value : '')}}
+                onValueChange={(value) => {
+                    onValueChange(value !== undefined ? value : '');
+                }}
             />
         </div>
     );