Fix: Restore keyboard accessibility in donation amount template

[JoshuaHungDinh]

Resolves: GIVE-2072

Reference: https://lw.slack.com/archives/C02Q714965S/p1734472242800619

Description

This PR restores the native keyboard access to the radio field for the donation frequency.

Previous Implementation:
The Amount stylesheet was applying display: none to the input[type='radio'] because we have a custom radio button UI for Donation Frequencies in v3 forms. However, this approach inadvertently removed native keyboard accessibility.

Solution:
To restore keyboard accessibility, I’ve updated the implementation to keep the radio button in the DOM while visually hiding it from the HTML flow by positioning it below the form's z-index, allowing it to remain focusable and operable via the keyboard.

Additional styles were included to better match the focus elements of the Donation Levels & Custom Amount with the rest of the form inputs.

References:

• https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttons
• https://www.w3.org/WAI/ARIA/apg/patterns/radio/

Affects

v3 forms - Radio Fields - Donation Frequency - Donation Amount Template

Visuals

https://www.loom.com/share/59e3083c67e549808157eedb4af146e5?sid=86f5e996-aac0-441a-afd2-08517fe0fbb1

Testing Instructions

• Create a v3 form with recurring donations.
• Use the Tab key to select the Donation Frequency group.
• Once the group is selected you should be able to use all the arrow keys to navigate the group.
• Pressing Tab again will take you to the next field.
• You should be able to press shift + tab to access the group in a backward fashion once you have progressed past it.
• Tab through the donation levels

Pre-review Checklist

• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[jdghinson]

All good!