Komponen / Tata letak
GroupedList
Daftar berkelompok inset ala Settings untuk halaman pengaturan, inspector, dan form ringkas di ponsel: judul grup, kartu berisi baris label + nilai/kontrol, dan keterangan di bawahnya.
Yang sudah ditangani
- Setiap grup adalah <section aria-labelledby> berjudul heading; footer terhubung lewat aria-describedby. Baris berada di <ul>/<li>.
- Baris navigasi adalah satu tautan/tombol penuh baris, sehingga seluruh baris bisa diklik dan dibacakan sebagai satu kesatuan (label, nilai).
- Baris berkontrol memakai <label htmlFor> ke kontrol; mengklik label mengubah Switch.
- Ikon Tile dan chevron bersifat dekoratif (aria-hidden).
- Cincin fokus baris navigasi digambar di dalam baris (outline offset negatif) agar tidak terpotong kartu.
Keyboard
| Tombol | Fungsi |
|---|---|
| Tab | Pindah antarbaris navigasi dan kontrol. |
| Enter | Buka baris navigasi. |
| Space | Ubah Switch; buka Select. |
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.