Komponen / Tampilan data
DataTable
Tabel ERP untuk daftar dokumen (PO, invoice) dan tabel item dokumen: angka rata kanan, urut, seleksi baris, sel editable, pohon, baris total, keadaan kosong & memuat, dan paginasi.
Yang sudah ditangani
- Memakai <table> asli dengan <thead>/<tbody>/<tfoot> dan <th scope="col">; kolom rowHeader menjadi <th scope="row"> sehingga pembaca layar menyebut nomor dokumen di tiap sel.
- Beri caption (boleh captionHidden) atau aria-label. Caption juga menjadi label wadah gulir (role="region").
- Wadah gulir otomatis bisa difokus (tabIndex 0) hanya saat tabel melebar/meninggi, agar bisa digulir dengan keyboard.
- Header sortable adalah <button> dengan aria-sort pada <th>; indikator urut hanya pelengkap visual.
- Checkbox baris berlabel "Pilih <nama baris>" (getRowLabel); checkbox header "Pilih semua baris" dengan keadaan indeterminate.
- Tombol pohon memakai aria-expanded dan label "Buka/Tutup <nama baris>".
- Kontrol di sel editable wajib aria-label yang menyebut kolom dan barisnya ("Qty item 2").
- Saat memuat, tabel ber-aria-busy dan baris Skeleton disembunyikan dari pembaca layar.
Keyboard
| Tombol | Fungsi |
|---|---|
| Tab | Pindah ke tautan, checkbox, header sortable, kontrol sel, dan wadah gulir (bila melebar). |
| EnterSpasi | Urutkan kolom pada header; centang checkbox; buka/tutup baris pohon. |
| ← → ↑ ↓ | Gulir tabel yang melebar saat wadah gulir terfokus. |
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.