Fix: add accessibility updates to amount field

[JoshuaHungDinh]

Resolves:
Accessibility Audit: Give-033 & - Give-044

https://lw.slack.com/archives/C0355E6LBMZ/p1736794600442929

Description

This PR includes a couple updates for the amount field template.

• An aria-label attribute for the field, as it lacks a corresponding <label>.
• An aria-describedBy attribute for the field to match the field error when present.
• Use of refs to focus the field when an amount error occurs.

Affects

• Custom Amount field on Donation Forms.

Visuals

Screen.Recording.2025-01-27.at.10.06.34.AM.mov

Testing Instructions

• View a form.
• Check the console and verify that the custom amount field is properly labeled with an aria-label attribute.
• Set a minimum amount on the donation form.
• Process a donation with an amount less than the minimum.
• Verify that when an error occurs the amount field is focused and properly described by the error id.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Self Review of code and UX completed

[jonwaldstein]

hmm, i'm pretty sure react-hook-form handles this for us or at least provides a way of doing this for custom inputs. I know it works properly for other fields since we're using shouldFocusOnError by default. Might want to check the discussion forums https://github.com/orgs/react-hook-form/discussions?discussions_q=is%3Aopen+shouldFocusError

There's also a react-hook-form helper setFocus