PhoneInput

Role and semantics

The picker and the number sit in a role="group" named by the label. The number field is bound to the <label> and has type="tel", inputmode="tel" and autocomplete="tel-national". The picker is a combobox button named “Country code”; list items read the country name in the Provider language.

Keyboard

Key	Behaviour
Tab	Moves to the picker, then to the number.
Enter, Space, Down arrow	On the picker, open the list.
Up and Down arrow	Move in the list; typing letters jumps to a country.
Escape	Closes the list.

Focus

Focus wraps the whole box; while the picker has focus it also shows its own ring. When the list closes, focus returns to the picker.

Screen reader output

Example	Output
Group	“Phone, group”
Picker	“Country code, TR +90, pop-up button”
List item	“Türkiye” in Turkish, “Turkey” in English
Number	“Phone, telephone, 532 123 45 67”

Contrast

The border and divider have at least 3:1; text has 4.5:1.

WCAG 2.2

Criterion	How PhoneInput meets it	What product teams must do
1.3.1 Info and relationships	The picker and number are in a named group.	—
1.3.5 Identify input purpose	autocomplete="tel-national".	—
3.3.1 Error identification	The error is bound to the field.	Write an error for an incomplete number.
3.3.4 Error prevention	Paste is corrected, length is limited.	Validate on the server too.