Donation amount field should use appropriate numeric/decimal keypad on iOS

[knowler]

User Story

As an iOS, I want the custom donation amount input to use the appropriate keypad so that I can use decimals in my donation amount.

Details

Currently on iOS, the donation amount field uses the telephone keypad. This does not include decimals or commas (though commas can be added using the "pause" key — not ideal). The underlying input type tel is the issue and this can be fixed by using text with the inputmode attribute set to decimal.

Expected Behavior

The custom donation amount input to use the appropriate keypad on iOS and Android. This means allowing for numbers as well as decimals and comma.

Steps to Reproduce

1. Try setting the custom amount with a decimal value in the donation amount field on iOS.

Visuals

https://user-images.githubusercontent.com/6908001/138127915-15cd7cdc-6ee3-4e73-a825-87282c7a01d7.mp4

Additional Context

This field uses type=tel since that was a common hack to get mobile devices to use a numeric keypad.

About the hack:

• Since there is so much of a variety of telephone number formats, type=tel doesn’t have any built-in browser validation unlike type=email or type=url. It effectively is the same as type=text in this regard.
• On mobile, type=tel uses a numeric keypad on Android and the telephone keypad on iOS. This is obviously preferred over a standard keyboard — especially for amounts. The iOS keypad doesn’t allow for decimals which is a problem.
• From limited testing with VoiceOver, there seems to be no accessibility issues with using type=tel in this way. VoiceOver announces it as a regular text field. It is a better choice than type=number in this regard, since the type=number is announced as a "stepper" indicating to the user that the field works in steps and we do not want that.

About this proposed changed:

• Since the change from type=text to type=tel did not change how the input behaves as far as validation, there is no risk in reverting back to type=text.
• The inputmode attribute allows us to hint to mobile browsers that it should use a numeric/decimal keypad for input. This has widespread mobile support from iOS 12.2+ (March 2019), Chrome 66 (April 2018). It’s hard to tell exactly when some mobile browsers started supporting this since many of them are forks of their desktop counterparts, but it seems like it’s been at least 3.5 years (Firefox has potentially partially supported this since 2012).

System Information

Details

- iOS 14.5 - GiveWP 2.15.0

Acceptance Criteria

• [ ] The custom donation amount input to use the appropriate keypad on iOS and Android.

[canny[bot]]

This issue has been linked to a Canny post: Donation amount field should use appropriate numeric/decimal keypad on iOS :tada: