Needless UI

Komponen

Dialog

Jendela modal berbasis elemen dialog native, dengan fokus yang ditangani oleh browser.

Interaksi keyboard

TombolAksi
TabMemindahkan fokus ke elemen berikutnya di dalam dialog.
Shift + TabMemindahkan fokus ke elemen sebelumnya di dalam dialog.
EscMenutup dialog, kecuali jika dialog tidak bisa ditutup begitu saja.

Catatan aksesibilitas

  • Membuka dialog dengan showModal() memberinya role="dialog" dan semantik modal, serta membuat bagian halaman lainnya menjadi inert.
  • Judul dan deskripsi ditautkan melalui id yang dibuat otomatis, sehingga pembaca layar mengumumkan keduanya saat dialog terbuka.
  • Fokus awal jatuh ke elemen dengan autofocus, atau ke elemen pertama yang bisa difokus. Untuk konfirmasi destruktif, pasang autofocus pada pilihan yang aman.
  • Saat dialog ditutup, fokus kembali ke elemen yang membukanya.
  • Browser tetap bisa menutup dialog yang tidak bisa ditutup begitu saja setelah Esc ditekan berulang kali tanpa interaksi pengguna, jadi selalu sediakan jalan keluar yang jelas.