New component request: Phone number input

[basham]

Rivet currently has no documentation or code concerning the display of phone numbers or the use of phone number form fields. The Student Appointment Scheduler requires both students and staff to enter and use phone numbers when creating appointment slots and requesting appointments. I’d like to Rivet to provide a solution, so we can start implementing some standard in our products.

I recently started working on prototypes for a phone number field. I’ve gotten some feedback from the design community, but I’d appreciate a review from the accessibility and Rivet teams. If none of these solutions are acceptable, I'm fine exploring other options. Each of these CodePens includes both a description of how the prototype works and a working prototype. I have done some light testing in Safari with VoiceOver.

1. https://codepen.io/basham/pen/NWpVqoK
2. https://codepen.io/basham/pen/XWgyveb
3. https://codepen.io/basham/pen/OJgaKzw
4. https://codepen.io/basham/pen/dyRajrx

Additional work would include providing a recommendation for a phone number format and maybe recommendations for handling international phone numbers.