Komponen / Navigasi
CompanySwitcher
Berpindah antar-perusahaan (PT Dikstra Cipta Solusi, PT Divistant Teknologi Indonesia) dalam satu aplikasi. Pemicu tanpa bingkai membuka menu pilihan tunggal.
Yang sudah ditangani
- Pemicu adalah <button aria-haspopup="menu" aria-expanded> bernama "Perusahaan: {nama aktif}" — memuat teks yang terlihat (WCAG 2.5.3).
- Menu memakai role="menu" berisi role="menuitemradio" + aria-checked (pilihan tunggal) dan role="menuitem" untuk "Kelola akses" — dipilih ketimbang listbox karena Figma berupa menu pull-down yang memuat aksi.
- Saat dibuka fokus langsung ke perusahaan aktif; Esc, Tab, atau memilih menutup menu dan mengembalikan fokus ke pemicu.
- Perpindahan diumumkan lewat wilayah aria-live polite ("Beralih ke …"); matikan dengan announce={false} bila Toast sudah mengumumkannya.
- Perusahaan aktif ditandai centang + aria-checked, bukan hanya warna; opsi nonaktif aria-disabled dan dilewati panah.
Keyboard
| Tombol | Fungsi |
|---|---|
| EnterSpasi↓ | Di pemicu: membuka menu dengan fokus di perusahaan aktif |
| ↑ | Di pemicu: membuka menu dengan fokus di item terakhir |
| ↓↑ | Di menu: pindah item (berputar, melewati yang nonaktif) |
| HomeEnd | Ke item pertama/terakhir |
| EnterSpasi | Memilih perusahaan atau menjalankan "Kelola akses" |
| EscTab | Menutup menu, fokus kembali ke pemicu |
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.