Komponen / Navigasi
AppHeader
Header aplikasi BizOps: pengalih perusahaan, pencarian global ⌘K, notifikasi, dan menu pengguna. Tanpa bar latar penuh — kaca hanya di kelompok kontrol.
Yang sudah ditangani
- Bawaan <header role="banner"> — landmark utama aplikasi. Bila disarangkan (di dalam <main>, panel, atau dokumentasi), set landmark={false}.
- Pintasan ⌘K / Ctrl K didaftarkan di document (diabaikan bila penangan lain sudah memanggil preventDefault — pasang satu saja per halaman) dan diumumkan lewat aria-keyshortcuts pada kolom pencarian; petunjuk visualnya aria-hidden.
- Jumlah belum dibaca masuk ke nama aksesibel tombol ("Notifikasi, 3 belum dibaca"); titik/Badge hanya hiasan (aria-hidden).
- Avatar pengguna adalah <button> dengan nama aksesibel; tambahkan aria-haspopup="menu" bila membuka menu.
- Saat header sempit, pencarian menjadi tombol dengan aria-expanded; membentangkannya memindah fokus ke kolom.
Keyboard
| Tombol | Fungsi |
|---|---|
| ⌘KCtrl K | Memfokuskan pencarian global (membentangkannya bila sedang terlipat) |
| Tab | Pengalih perusahaan → pencarian → notifikasi → akun |
| Esc | Mengosongkan pencarian; 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.