Bileşenler
DatePicker
Gün, ay ve yıl parçalarına yazılan ya da açılır takvimden seçilen tarih alanı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Parçalar role="group" içindedir ve etiketle adlandırılır. Her parça bir spinbutton’dır: adı “Tarih, gün”, değeri aria-valuenow ile, boşken “boş” olarak okunur. Parçalar dokunmatik cihazda sayısal klavyeyi açar. Takvim düğmesi “Takvimi aç” adını taşır; açılır takvim etiketle adlandırılır. Açıklama ve hata parça grubuna aria-describedby ile bağlıdır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Gün, ay, yıl ve takvim düğmesi sırayla. |
| Rakamlar | Parçayı doldurur, dolunca ilerler. |
| Yukarı ve aşağı ok | Parçayı değiştirir, sınırda başa döner. |
| Sol ve sağ ok | Önceki ya da sonraki parça. |
| Backspace, Delete | Parçayı temizler. |
| Escape | Açık takvimi kapatır, odak düğmeye döner. |
Açık takvimin içindeki tuşlar için Calendar sayfasına bakın.
Odaktaki parça birincil dolguyla gösterilir; kutunun tamamı odak halkası alır. Takvim açılınca odak seçili güne (yoksa bugüne) gider; kapanınca takvim düğmesine döner.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Gün parçası | “Tarih, gün, 28, döndürme düğmesi” |
| Boş parça | “Tarih, ay, boş” |
| Takvim düğmesi | “Takvimi aç, düğme” |
| Aralık dışı | “1 Şubat 2026 veya sonrasında bir tarih seçin” |
Kontrast
Bölüm başlığı “Kontrast”Parça metni 4,5:1; yer tutucu color-text-placeholder 4,5:1; odaktaki parça birincil dolguda 4,5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | DatePicker nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Adlandırılmış grup ve adlandırılmış parçalar. | — |
| 2.1.1 Klavye | Yazarak giriş; takvim isteğe bağlı. | — |
| 3.3.1 Hata tanımlama | Aralık dışı tarihler yerleşik mesaj alır. | Diğer kuralları error ile yazın. |
| 3.3.2 Etiketler veya yönergeler | Yer tutucular biçimi gösterir. | — |