Komponen / Lapisan & umpan balik
Notification
Panel notifikasi ala Mail: titik biru untuk yang belum dibaca, filter Semua / Belum dibaca / Sebutan, dan "Tandai semua dibaca". Dibuka dari lonceng AppHeader.
Yang sudah ditangani
- Panel adalah <section aria-labelledby> berjudul "Notifikasi"; daftar memakai <ul>/<li>.
- Setiap baris adalah satu <a> atau <button>, sehingga Tab berpindah per notifikasi dan nama aksesibelnya adalah seluruh kalimat + meta.
- Titik biru disembunyikan dari pembaca layar; sebagai gantinya kalimat diawali teks sr-only "Belum dibaca:".
- Perubahan jumlah belum dibaca diumumkan lewat region aria-live polite ("2 notifikasi belum dibaca"), tidak saat panel pertama tampil.
- Waktu ditulis di dalam <time dateTime> agar nilai lengkapnya tersedia.
- Di Popover: Esc atau klik di luar menutup panel dan fokus kembali ke tombol lonceng; jumlah belum dibaca ada di label tombol.
Keyboard
| Tombol | Fungsi |
|---|---|
| TabShift+Tab | Berpindah antara "Tandai semua dibaca", filter, tiap notifikasi, dan footer |
| ←→ | Di filter: berpindah dan memilih segmen |
| EnterSpasi | Membuka notifikasi yang terfokus |
| Esc | Menutup Popover dan mengembalikan fokus ke lonceng |
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.