Перейти к содержимому
v2.5.0
English
Русский
Документация

PhoneField

PhoneField — составной компонент, который объединяет поле телефона с маской и вложенный Select для кода страны.

Подписи

У PhoneField должна быть одна понятная подпись поля для всего семейства элементов.

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
↓↑На триггере страны открывает список стран. В открытом списке переносит активный вариант. Остальные клавиши списка работают как в [Select](../select/accessibility.md).
EnterВыбирает активную страну, записывает её телефонный код в поле и переносит фокус в поле.
TabС закрытого триггера страны переносит фокус в поле телефона.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.
  • основной целью ввода текста должно оставаться поле ввода
  • поведение маски не должно неожиданно мешать обычному редактированию

Поведение фокуса

  • фокус должен предсказуемо переходить между триггером страны и полем ввода
  • список стран рендерится в верхнем слое, но не должен нарушать порядок фокуса

Семантика для скринридеров

  • поле должно читаться как единый сценарий ввода телефона, а не как набор несвязанных элементов
  • собственный рендер значения страны всё равно должен передавать понятный смысл

Семантика форм

Используйте PhoneFieldSelectHiddenSelect, когда выбор страны должен нативно участвовать в форме.

Риски доступности

  • выбор страны без подписи внутри в остальном подписанного поля
  • строгая маска, из-за которой поле трудно редактировать с клавиатуры
  • собственные варианты стран, которые дробят одну выбираемую строку на несколько интерактивных целей