Komponen / Form & input
DatePicker
Field tanggal tertutup dengan kalender pop-up: tanggal PO, jatuh tempo termin, tanggal kick-off. Bisa diketik langsung ("29/09/2026") atau dipilih dari kalender yang minggunya mulai Senin.
Yang sudah ditangani
- Field adalah <input> teks yang terhubung ke label FormField, helperText/error (aria-describedby), dan aria-invalid.
- Ikon kalender adalah tombol berlabel "Pilih tanggal dari kalender" dengan aria-haspopup="dialog" dan aria-expanded.
- Kalender berpola ARIA grid: header bulan menjadi nama grid dan diumumkan (aria-live) saat berganti; kolom hari berupa columnheader bernama lengkap ("Senin").
- Setiap hari dibacakan lengkap ("Selasa, 29 September 2026"); hari ini memakai aria-current="date", terpilih aria-selected, nonaktif aria-disabled.
- Status hari tidak hanya lewat warna: hari ini tebal, terpilih berisi lingkaran penuh, nonaktif dicoret.
- Saat dibuka fokus pindah ke hari terpilih (atau hari ini); Esc/Batal/Pilih mengembalikan fokus ke field.
Keyboard
| Tombol | Fungsi |
|---|---|
| ↓ (di field) | Buka kalender |
| Enter (di field) | Simpan tanggal yang diketik |
| ←→ | Hari sebelumnya/berikutnya |
| ↑↓ | Minggu sebelumnya/berikutnya |
| PageUpPageDown | Bulan sebelumnya/berikutnya (Shift: tahun) |
| HomeEnd | Awal (Senin) / akhir (Minggu) minggu |
| Spasi | Tandai hari terfokus |
| Enter | Pilih hari terfokus dan tutup kalender |
| Esc | Tutup tanpa mengubah, fokus kembali ke field |
Tanggung jawab Anda
- Beri label yang bermakna: teks label, atau aria-label untuk kontrol tanpa teks.
- Uji di mode gelap dan kontras tinggi (pilih lewat menu Tema di kanan atas, atau tombol Terang/Gelap di tiap contoh).
- Pastikan semua aksi bisa dijalankan dengan keyboard saja.