Bileşenler
DateTimePicker
Tarihi ve saati birlikte seçtiren alan grubu: bir DatePicker ve bir TimeField.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”DateTimePicker bir fieldset’tir; legend grubu adlandırır. Yardım metni ve hata gruba aria-describedby ile bağlıdır. İçindeki DatePicker ve TimeField kendi gruplarıdır; bölümleri spinbutton rolündedir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Tarih bölümlerine, takvim düğmesine, sonra saat bölümlerine. |
| Yukarı, Aşağı | Bölüm değerini bir artırır ya da azaltır. |
| Rakamlar | Bölüme değer yazar; dolunca sonraki bölüme geçer. |
| Backspace | Bölümü siler. |
Odak bölümler ve takvim düğmesi arasında gezer; her biri 2 px dışına çizilen 2 px color-focus-ring odak çizgisi gösterir.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Gruba girme | “Gönderim zamanı, grup” |
| Saat bölümü | “Saat, saat, 9, döndürme düğmesi” |
| Hata | Grubun açıklaması olarak okunur. |
Kontrast
Bölüm başlığı “Kontrast”Kenarlıklar 3:1, metin ve hata iletisi 4.5:1 kontrastlıdır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | DateTimePicker nasıl karşılar | Ürün ekibi ne yapar |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | fieldset, legend, aria-describedby. |
Lejantı anlamlı yazın. |
| 3.3.1 Hata tanımlama | Hata gruba bağlı okunur. | Hatada ne yapılacağını yazın. |
| 3.3.2 Etiketler veya talimatlar | Her bölümün görünür etiketi vardır. | Saat dilimini yardım metninde verin. |