Komponen / Navigasi
Toolbar
Bar judul layar ala macOS: judul + subjudul, kelompok kontrol berbahan kaca, pencarian, dan satu aksi utama. Bar transparan — kaca hanya di kelompok kontrol.
Yang sudah ditangani
- Toolbar sengaja tidak memakai role="toolbar": bar ini mencampur judul, kolom pencarian (yang memakai panah untuk kursor), dan beberapa kelompok. Pola toolbar ARIA (satu tab stop + panah kiri/kanan) akan bentrok dengan kolom teks, jadi setiap kontrol tetap tab stop biasa.
- Setiap kelompok kaca adalah role="group" dengan aria-label sehingga pembaca layar menyebut "Aksi daftar, grup".
- Judul dirender sebagai heading (h1 bawaan; atur `titleAs`) agar bisa dilompati dengan navigasi heading.
- Semua IconButton wajib `label` — dipakai sebagai aria-label dan tooltip.
- Tombol pencarian terlipat memakai aria-expanded; saat dibentangkan fokus pindah ke kolom, Esc/Batal mengembalikan fokus ke tombol.
- Kontrol nonaktif (Kembali di awal riwayat) tetap terlihat dengan opasitas 45%, tidak dihilangkan.
Keyboard
| Tombol | Fungsi |
|---|---|
| TabShift+Tab | Berpindah antar-kontrol berurutan: navigasi → kelompok → pencarian → aksi utama |
| EnterSpasi | Menjalankan tombol yang difokus |
| Esc | Di pencarian: mengosongkan teks; pada kolom kosong yang dibentangkan, melipat kembali |
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.