Bileşenler
OtpInput
Karakter başına bir kutulu, tek sekme duraklı tek kullanımlık kod alanı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Base UI OTP Field her karakter için bir <input> çizer; ilki etikete, diğerleri konum adına (“Hane 2 / 6”) bağlıdır. Formla tek bir gizli değer gönderilir. Ayırıcı aria-hidden. Hata ve açıklama aria-describedby ile okunur; geçersizken her kutu aria-invalid taşır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Koda tek durakta girer ve çıkar (gezici sekme). |
| Sol ve sağ ok | Kutular arasında dolaşır. |
| Home, End | İlk kutuya ya da son dolu kutunun ardına gider. |
| Backspace | Karakteri siler, önceki kutuya döner. |
Etkin kutu 2 px color-focus-ring halkası taşır. Yapıştırmadan sonra odak son dolu kutuya gider.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| İlk kutu | “Doğrulama kodu, düzenlenebilir metin” |
| İkinci kutu | “Hane 2 / 6, düzenlenebilir metin” |
| Hata | “Kod hatalı. Yeniden deneyin.” |
Kontrast
Bölüm başlığı “Kontrast”Kutu kenarlığı en az 3:1, karakterler color-text-default ile 4,5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | OtpInput nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.5 Girdi amacını belirleme | autocomplete="one-time-code". |
— |
| 2.1.1 Klavye | Tek sekme durağı, oklarla dolaşma. | — |
| 2.2.1 Zamanlama ayarlanabilir | — | Kodun süresi dolarsa yeniden gönderme sunun. |
| 3.3.8 Erişilebilir kimlik doğrulama (asgari) | Yapıştırma ve otomatik doldurma çalışır. | Yapıştırmayı engellemeyin. |