Bileşenler
PhoneInput
Ülke kodu seçicili telefon alanı; Türkiye varsayılan, E.164 olarak gönderilir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Seçici ve numara role="group" içindedir ve grup etiketle adlandırılır. Numara alanı <label> ile bağlıdır, type="tel", inputmode="tel" ve autocomplete="tel-national" taşır. Seçici bir combobox düğmesidir ve “Ülke kodu” adını taşır; liste öğeleri ülke adını Provider dilinde okur.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Önce seçiciye, sonra numaraya gider. |
| Enter, Space, Aşağı ok | Seçicide listeyi açar. |
| Yukarı ve Aşağı ok | Listede dolaşır; harf yazmak ülkeye atlar. |
| Escape | Listeyi kapatır. |
Odak kutunun tamamını çevreler; seçici odaktayken kendi halkasını da gösterir. Liste kapanınca odak seçiciye döner.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Grup | “Telefon, grup” |
| Seçici | “Ülke kodu, TR +90, açılır kutu” |
| Liste öğesi | “Türkiye” |
| Numara | “Telefon, telefon, 532 123 45 67” |
Kontrast
Bölüm başlığı “Kontrast”Kenarlık ve ayırıcı çizgi en az 3:1, metinler 4,5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | PhoneInput nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Seçici ve numara adlandırılmış bir grupta. | — |
| 1.3.5 Girdi amacını belirleme | autocomplete="tel-national". |
— |
| 3.3.1 Hata tanımlama | Hata alana bağlı. | Eksik numarada hata yazın. |
| 3.3.4 Hata önleme | Yapıştırma düzeltilir, uzunluk sınırlanır. | Sunucuda da doğrulayın. |